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模块化和命名空间管理的问题说明
Dec 06 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
js实现登录验证码
Dec 22 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
vue 中的动态传参和query传参操作
Nov 09 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
文章推荐系统(三)
2006/10/09 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
python购物车程序简单代码
2018/04/18 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
恐龙的灭绝教学反思
2014/02/12 职场文书
晚会主持词开场白
2014/03/17 职场文书
优秀员工演讲稿
2014/05/19 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
Python matplotlib绘制雷达图
2022/04/13 Python
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript