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 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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生成静态html文件的三种方法
2013/06/18 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Python跳出多重循环的方法示例
2019/07/03 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
运动会广播稿400字
2014/01/25 职场文书
超市活动计划书
2014/04/24 职场文书
考核评语大全
2014/04/29 职场文书
甘南现象心得体会
2014/09/11 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript