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 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
vue之debounce属性被移除及处理详解
Nov 13 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 8小时时间差的解决方法小结
2009/12/22 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python守护进程用法实例分析
2015/06/04 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
深入理解python try异常处理机制
2016/06/01 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
Python 字符串换行的多种方式
2018/09/06 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
幼师求职自荐信范文
2014/01/26 职场文书
演讲稿的写法
2014/05/19 职场文书
社区工作者演讲稿
2014/05/23 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript
利用Python实时获取steam特惠游戏数据
2022/06/25 Python