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 相关文章推荐
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
Three.js学习之几何形状
Aug 01 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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中Session的概念
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
javascript学习网址备忘
2007/05/29 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
jQuery的学习步骤
2011/02/23 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
python 回调函数和回调方法的实现分析
2016/03/23 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
《纸船和风筝》教学反思
2014/02/15 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python