本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh)
本文作者: 苏洋
创建时间: 2012年01月19日
统计字数: 2071字
阅读时间: 5分钟阅读
本文链接: https://soulteary.com/2012/01/19/jquery%E9%A3%9E%E5%B0%84%E6%B4%97%E7%89%8C%E7%89%B9%E6%95%88.html
-----
# jQuery 飞射(洗牌)特效
算下来,现在还差以前的登录页面没有独立做出来.所以手痒,打算做一下.
但是单调的登录感觉没什么意思,于是就开始写这个..
做了2个效果，一个是洗牌,一个是飞射出去再聚合一起。其实是一样的。下面贴下代码。
先贴基本的CSS和HTML结构.
```css
```
```html
soulteary's jquery
```
接着贴飞射的人代码,原理很简单,先做一个小变形,让人感觉box有变化的感觉。 然后设置speed快速的把box移动到屏幕外，接着再移动回来，并调整位置和z-index. 添加jquery库后,添加如下。
```js
$(document).ready(function(){
function boxset($a,$b,$act){
if ($act==1){
$b.animate({width:"300px"},400);
with($a){
animate({height:"180px"},200);
fadeTo(100,0.4);
animate({width:"250px"},100);
css('z-index',30);
animate({marginLeft:"2500px"});
animate({marginLeft:"-240px"});
}
with($b){
animate({marginLeft:"-2500px"});
animate({height:"240px"},50);
fadeTo(100,1);
css('z-index',60);
}
return -155;
}else{
$a.animate({width:"300px"},400);
with($b){
animate({height:"180px"},200);
fadeTo(100,0.4);
animate({width:"250px"},100);
css('z-index',40);
animate({marginLeft:"-2500px"});
}
with($a){
animate({marginLeft:"2500px"});
animate({marginLeft:"-150px"});
animate({height:"240px"},50);
fadeTo(100,1);
css('z-index',50);
}
return 0;
}
}
$("button,#left,#right").click(function(){
var $divL = $("#left");
var $divR = $("#right");
$divR.animate({
marginLeft:parseInt($divR.css('marginLeft'),0) >= -150 ? boxset($divL,$divR,1) : boxset($divL,$divR,2)
});
});
});
```
洗牌效果的话，就不需要移动到窗外了。
```js
$(document).ready(function(){
function boxset($a,$b,$act){
if ($act==1){
$b.animate({width:"300px"},400);
with($a){
animate({height:"180px"},200);
fadeTo(100,0.4);
animate({width:"250px"},100);
css('z-index',30);
}
with($b){
animate({height:"240px"},50);
fadeTo(100,1);
css('z-index',60);
}
return -330;
}else{
$a.animate({width:"300px"},400);
with($b){
animate({height:"180px"},200);
fadeTo(100,0.4);
animate({width:"250px"},100);
css('z-index',40);
}
with($a){
animate({height:"240px"},50);
fadeTo(100,1);
css('z-index',50);
}
return 10;
}
}
$("button,#left,#right").click(function(){
var $divL = $("#left");
var $divR = $("#right");
$divR.animate({
marginLeft:parseInt($divR.css('marginLeft'),0) >= -150 ? boxset($divL,$divR,1) : boxset($divL,$divR,2)
});
});
});
```
效果的话，可以看这里，只不过没做css样式，很丑陋...再考虑下再说吧。