05/19
2016
今天用js做了个元素移动的效果，支持水平、垂直方向上的单次移动和来回移动，支持斜向运动（斜向运动时自带反弹效果 哈哈）。
假设这个元素是我们想要移动的：
<img id="moveE" src="http://www.saber.我爱你/wp-content/uploads/2014/07/1_b.gif">
它可以是图片，也可以是其他元素。可以定义css样式，这个没关系。
js代码如下：
function move_on(element,far,to,cishu,time) {
var add=(to%2==1)?true:false;
var num=(to<3)?((element.style.marginLeft==="")?0:parseInt(element.style.marginLeft)):((element.style.marginTop==="")?0:parseInt(element.style.marginTop));
var max=(to%2==1)?(num+far):num;
var min=(to%2==1)?num:(num+far);
var time=setInterval(function () {
if(add){
num++;
(to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
if(num>=max){
add=false;
cishu--;
if(cishu==0){clearInterval(time)}
}
}else{
num--;
(to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
if(num<=min){
add=true;
cishu--;
if(cishu==0){clearInterval(time)}
}
}
},time);
}
（代码挺短的吧~三元操作符真是个好东西啊
参数解释：
要移动的元素、移动多少像素、移动类型、移动次数、定时器执行间隔时间（毫秒） 移动类型规定如下： 1 左右来回移动，起始点是从左向右 2 左右来回移动，起始点是从右向左 3 上下来回移动，起始点是从上向下 4 上下来回移动，起始点是从下向上 移动次数定义如下： 为0时为无限制来回移动，否则定义为多少则移动多少次。注意，一次单向运动算1次，一次来回运动算2次。
可能看的有点迷，没关系，接下来我一个个上例子。
Read More →
js做的元素不间断来回移动的效果
07/21
2015
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="/f/jquery-sakura.min.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="/f/jquery-sakura.min.css" />
<script>
// domReady
$(function() {
$('body').sakura();
});
// windowLoad
$(window).load(function() {
$('body').sakura();
});
</script>
转自离别歌，十几岁已经完爆我了。
页面太长的话可能会导致有点卡顿。jq版本不知有无影响。
一个樱花飞舞的jq特效
01/9
2015
刚刚找到并且使用的一个效果。严格来说飘落的并不是雪花，只是白色的光团。使用起来很简单，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>snow Examples</title> </head> <body style="background: #000;">. <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="https://saber.love/f/snow.js"></script> <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999;" class="snow-container"></div> </body> </html>
这个js貌似没有提供自定义参数，有时产生的大光团太大了，算是一个缺点吧。有时候光团会有随着移动产生变大变小的效果，与鼠标的移动也有互动效果，产生了3D感，不过感觉还是可以改进（反正我是站着说话不腰疼=，=）。
网站雪花飘落效果一例
10/14
2014
已弃坑。我下面试的几次，都是自己对其示例进行了结构的简化，想要以后用着方便，事实证明这么做意义不大，该用的时候拉过来源代码直接修改就成了。以后只做一些补充就行了。
用superslide做焦点图，其切换间隔太快，但是demo文档里又没有这个参数设置，于是去查看官网的参数文档,找到了interTime参数，如下：
jQuery(".slideBox").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:5000});
css里有些地方得改一下：
.slideBox .bd{ position:relative; height:100%; z-index:0; left:50%; margin-left:-960px; }/*这里设置居中*/
/*.slideBox .bd img 如无必要，不要设置width，否则可能导致图片变形*/
/*指示器默认是靠右的，可能会被右侧的漂浮广告挡住，给.slideBox .hd设置一个right值比较合适。*/
注意参数最后是不加分号的，加了报错。另附动画效果参数：
[v1.0] fade：渐显； || top：上滚动；|| left：左滚动；|| topLoop：上循环滚动；|| leftLoop：左循环滚动；|| topMarquee：上无缝循环滚动；|| leftMarquee：左无缝循环滚动；
[v2.0] fold：淡入淡出
[v2.1] slideDown：下拉效果
Read More →
研究SuperSlide的记录
10/14
2014
在仿站的时候发现某网站的滚动大量使用这个插件，原来是MSClass.js，官网在此。现在网上流传的版本有很多都是07年的了，然而照样能用，我只能说666666了。我也摸索了下怎么用（我实验的时候用的是老版）。
首先引入这个js。之后需要一个容器，设置id，里面放上需要滚动的内容，也可以是列表，复杂些的内容也可以。最后在容器结束之后，为这个容器创建滚动对象。
容器不需要设置超出隐藏和宽高（你在参数里指定之后MSClass.js会把这些规则加到元素上）。容器内的子元素浮动的话可能导致滚动失效。至于滚动的参数可以看说明。
我发现图片的html换行的话，图片之间会产生空白，至今无法解决。使图片浮动的话就没有空白了，但是滚动会失效。
MSClass.js滚动插件
08/1
2014
多个选项卡的切换（隐藏显示）是网页常见的特效，用jq来做很省事。
首先引入jq，然后封装一个事件，在div中写入onclick="showdome1()"
下面是两个tab切换的：
function showfuwutab2 () {
$("#dome2").show();
$("#dome1").hide();
$("#dome2").css('color','#cd4726');
$("#dome1").css('color','#fff');
}[/code]
下面是单个按钮切换一个div显示隐藏的：
function showdome1() {
if($('#dome1').is(':hidden')){
$("#dome1").show();
}else{
$("#dome1").hide();
}
}[/code]
如果封装的js太长的话可以保存到外部文件。
参考：http://www.phpvar.com/archives/183.html
Jq显示隐藏div
