本文介绍了两种不同的滚动方式,第一种演示是自己写的简单的滚动,第二、三种引入了滚动插件。
文章滚动ul列表
<div class="scrollDiv" id="s1">
<ul>
<li>
<a href="http://www.sucaihuo.com/">
jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式
</a>
</li>
<li>
<a href="http://www.sucaihuo.com/">
jquery 图片切换 switchable 带左右按钮控制分页索引图片切换
</a>
</li>
<li>
<a href="http://www.sucaihuo.com/">
jquery powerFloat万能浮动框提示插件 支持图片、文字、ajax异步加载、表单验证等
</a>
</li>
<li>
<a href="http://www.sucaihuo.com/">
jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等
</a>
</li>
<li>
<a href="http://www.sucaihuo.com/">
jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框
</a>
</li>
<li>
<a href="http://www.sucaihuo.com/">
jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果
</a>
</li>
<li>
<a href="http://www.sucaihuo.com/">
jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图
</a>
</li>
<li>
<a href="http://www.sucaihuo.com/">
jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放
</a>
</li>
</ul>
</div>
演示一:单行滚动(不使用插件定时自动滚动)
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-25px"
},
500,
function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
});
}
setInterval('AutoScroll("#s1")', 3000);
后面两种滚动效果,须引入滚动插件
<script type="text/javascript" src="scroll.js"></script>
演示二:多行滚动
$("#s2").Scroll({line: 4, speed: 500, timer: 4000});
可控制向前向后的多行滚动
$("#s3").Scroll({line: 4, speed: 500, timer: 2000, up: "btn1", down: "btn2"});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791