一个jquery实现的不错的多行文字图片滚动效果


Posted in Javascript onSeptember 28, 2014

今儿分享一个jquery实现多行滚动效果。

我看一些论坛网站上面,公告处用的较多。

代码如下

// 多行滚动
(function($){
$.fn.extend({
Scroll:function(opt,callback){
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(),
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度,数值越大,速度越慢(毫秒)
timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔(毫秒)
if(line==0) line=1;
var upHeight=0-line*lineH;
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i

实例演示

代码如下

<div id="scrollDiv">
<ul>
<li>我是jquery多行滚动条一</li>
<li>我是jquery多行滚动条二</li>
<li>我是jquery多行滚动条三</li>
<li>我是jquery多行滚动条四</li>
<li>我是jquery多行滚动条五</li>
<li>我是jquery多行滚动条六</li>
<li>我是jquery多行滚动条七</li>
<li>我是jquery多行滚动条八</li>
</ul>
</div>
<script type="text/javascript" src="http:/(3water.com)/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// 多行滚动
(function($){
$.fn.extend({
Scroll:function(opt,callback){
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(),
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度,数值越大,速度越慢(毫秒)
timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔(毫秒)
if(line==0) line=1;
var upHeight=0-line*lineH;
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:4,speed:1000,timer:2000});
});
</script>
Javascript 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
js获取form的方法
May 06 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 #Javascript
js propertychange和oninput事件
Sep 28 #Javascript
javascript检测是否联网的实现代码
Sep 28 #Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 #Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 #Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 #Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
网页javascript精华代码集
2007/01/24 Javascript
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
Open and Print a Word Document
2007/06/15 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python实现直播推流效果
2019/11/26 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
什么是数据抽象
2016/11/26 面试题
求职简历中个人的自我评价
2013/12/25 职场文书
大学班长的职责
2014/01/27 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
大型会议策划方案
2014/05/17 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
签约仪式致辞
2015/07/30 职场文书
React配置子路由的实现
2021/06/03 Javascript