在做pc网站的时候，有一些网站经常用到单行文字滚动效果和一些滑动切换效果。
以下是早前常用的最简单的两个效果，在此小笔记记录一下。原理都是基于jquery的animate方法实现，关于animate方法，它是用于创建自定义动画的函数，该方法可以通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。本题的效果就是利用这个原理实现的。
js:
//单行文字滚动一
var lineAutoScroll = function(obj){
var scrollTimer,
$obj = obj,
liheight = $(this).find("a").eq(0).height();
$obj.hover(function(){
clearInterval(scrollTimer);
}, function(){
scrollTimer = setInterval(function(){
$obj.animate({
marginTop : "-" + liheight + "px"
}, 500, function(){
$(this).css({ marginTop : "0px"}).find("a:first").appendTo(this);
});
}, 3000);
}).trigger("mouseleave");
}
//单行文字滚动二
function AutoScroll(obj) {
obj.each(function() {
if ($(this).find("a").size() > 1) {
var liheight = $(this).find("a").eq(0).height();
$(this).animate( {
marginTop : "-" + liheight + "px"
}, 500, function() {
$(this).css( {
marginTop : "0px"
}).find("a:first").appendTo(this)
})
}
})
}
$(function(){
var obj=$("#link-first");
lineAutoScroll(obj);
})
//简单图片幻灯片
$(function(){
var p = 0;
$("#slide-img li").css({"z-index":2,"opacity":0});
$("#slide-img li").eq(0).css({"z-index":100,"opacity":2});
$(".slide-switch span").click(function(){
play($(".slide-switch span").index(this));
});
function play(p){
$(".slide-switch span").eq(p).addClass("cur").siblings().removeClass("cur");
$("#slide-img li").eq(p).animate({'opacity':2},800).css({'z-index':100}).siblings().animate({'opacity':0},800).css({'z-index':2});
}
function autoplay(){
p = (p>1)?0:(p+1);
play(p);
}
var auto = setInterval(function(){ autoplay(p)},3000);
$("#slide-img").mouseover(function(){clearInterval(auto);})
$("#slide-img").mouseout (function(){auto = setInterval(function(){ autoplay(p)},3000);})
})
单行文字滚动效果：
简单滑动效果：
