jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码


Posted in Javascript onJanuary 23, 2013

html 文件
gundong-0.1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>多行滚动jQuery循环新闻列表代码</title> 
<style type="text/css"> 
ul,li{margin:0;padding:0} 
img{border:0px;} 
a{text-decoration:none;border:0px;} 
/* 横向滚动 */ 
#scrollDiv2{border:#ccc 1px solid;} 
#scrollDiv3{border:#ccc 1px solid;} 
</style> 
<script src="../jquery-1.8.0.min.js" type="text/javascript"></script> 
<script src="wordscroll-0.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ $.wordScroll({ 
objId:"scrollDiv2" 
}); 
$.wordScroll({ 
objId:"scrollDiv3", 
isHorizontal:true 
}); 
}); 
</script> 
</head> 
<body> 
<div id="scrollDiv2"> 
<ul> 
<li>这是公告标题的第一行</li> 
<li>这是公告标题的第二行</li> 
<li>这是公告标题的第三行</li> 
<li>这是公告标题的第四行</li> 
<li>这是公告标题的第五行</li> 
<li>这是公告标题的第六行</li> 
<li>这是公告标题的第七行</li> 
<li>这是公告标题的第八行</li> 
<li>这是公告标题的第九行</li> 
</ul> 
</div> 
<div id="scrollDiv3"> 
<ul> 
<li>这是公告标题的第一行</li> 
<li>这是公告标题的第二行</li> 
<li>这是公告标题的第三行</li> 
<li>这是公告标题的第四行</li> 
<li>这是公告标题的第五行</li> 
<li>这是公告标题的第六行</li> 
<li>这是公告标题的第七行</li> 
<li>这是公告标题的第八行</li> 
<li>这是公告标题的第九行</li> 
</ul> 
</div> 
</body> 
</html>

js文件
wordscroll-0.1.js

<P>/** 
* 多行文字滚动,可以实现向左和向上两种滚动 
* 
**/ 
$.extend({ 
wordScroll:function(opt,callback){ 
//alert("suc"); 
this.defaults = { 
objId:"", 
width:300, // 每行的宽度 
height:100, // div的高度 
liHeight:25, // 每行高度 
lines:2, // 每次滚动的行数 
speed:1000, // 动作时间 
interval:2000, // 滚动间隔 
picTimer:0, // 间隔句柄,不需要设置,只是作为标识使用 
isHorizontal:false // 是否横向滚动 
} 
//参数初始化 
var opts = $.extend(this.defaults,opt); 
// 纵向横向通用 
$("#"+opts.objId).css({ 
width:opts.width, 
height:opts.height, 
"min-height":opts.liHeight, 
"line-height":opts.liHeight+"px", 
overflow:"hidden" 
}); 
$("#"+opts.objId+" li").css({ 
height:opts.liHeight 
}); 
if(opts.lines==0) 
opts.lines=1; 
// 横向滚动 
if(opts.isHorizontal){ 
$("#"+opts.objId).css({ 
width:opts.width*opts.lines + "px" 
}); 
$("#"+opts.objId+" li").css({ 
"display":"block", 
"float":"left", 
"width":opts.width + "px" 
}); 
$("#"+opts.objId+" ul").css({ 
width:$("#"+opts.objId).find("li").size()*opts.width + "px" 
});</P><P> // 横向使用,不够一屏则不滚动 
if($("#"+opts.objId).find("li").size()<=opts.lines) 
return; 
var scrollWidth = 0 - opts.lines*opts.width; 
}else{ 
//如果不够一屏内容 则不滚动 
if($("#"+opts.objId).find("li").size()<=parseInt($("#"+opts.objId).height()/opts.liHeight,10)) 
return; 
var upHeight=0-opts.lines*opts.liHeight; 
} 
// 横向滚动 
function scrollLeft(){ 
$("#"+opts.objId).find("ul:first").animate({ 
marginLeft:scrollWidth 
},opts.speed,function(){ 
for(i=1;i<=opts.lines;i++){ 
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").css({marginLeft:0}); 
}); 
}; 
// 纵向滚动 
function scrollUp(){ 
$("#"+opts.objId).find("ul:first").animate({ 
marginTop:upHeight 
},opts.speed,function(){ 
for(i=1;i<=opts.lines;i++){ 
$("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); 
} 
$("#"+opts.objId).find("ul:first").css({marginTop:0}); 
}); 
}; 
//鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 
$("#"+opts.objId).hover(function() { 
clearInterval(opts.picTimer); 
},function() { 
opts.picTimer = setInterval(function() { 
// 判断执行横向或纵向滚动 
if(opts.isHorizontal) 
scrollLeft(); 
else 
scrollUp(); 
},opts.interval); // 自动播放的间隔,单位:毫秒 
}).trigger("mouseleave"); 
} 
}) 
</P>
Javascript 相关文章推荐
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
javascript 节点排序 2
Jan 31 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
js尾调用优化的实现
May 23 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 #Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 #Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 #Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 #Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 #Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 #Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 #Javascript
You might like
PHP脚本中include文件出错解决方法
2008/11/20 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
php实现session共享的实例方法
2019/09/19 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
基于input动态模糊查询的实现方法
2017/12/12 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
python 链接和操作 memcache方法
2017/03/04 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Django如何将URL映射到视图
2019/07/29 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
解决方案设计综合面试题
2015/08/31 面试题
数控技术专科生自我评价
2014/01/08 职场文书
品牌服务方案
2014/06/03 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
门市房租房协议书
2014/12/04 职场文书
公司经营目标责任书
2015/01/29 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python