jquery单行文字向上滚动效果示例


Posted in Javascript onMarch 06, 2014
<body> 
<div id="title" style="width:100%;height:40px;">看看间断滚动文字</div> <div id="content" class="infocontent"> 
<div id="top" class="infolist"> 
<ul> 
<li>央视315曝光: 华润深陷“海砂门”回应澄而未清</li> 
<li>吉野家被曝餐具不消毒 波司登等羊绒衫不含羊绒</li> 
<li>无锡警方公布“待产女警突发不幸”事发经过</li> 
<li>中国人一天:最后的轮渡 视界:在家“搞定”</li> 
</ul> 
</div> 
<div id="bottom" class="infolist"></div> 
</div> 
<div id="foot"></div> 
</body>

.infolist{width:400px;matgin:0;} 
.infolist ul{margin:0;padding:0;} 
.infolist ul li{list-style:none;height:26px;line-height:26px;} 
.infocontent{width:400px;height:26px;overflow:hidden;border:1px solid #666666;}

var interval=1000;//两次滚动之间的时间间隔 
var stepsize=26;//滚动一次的长度,必须是行高的倍数,这样滚动的时候才不会断行 
var objInterval=null; $(document).ready( function(){ 
//用上部的内容填充下部 
$("#bottom").html($("#top").html()); 
//给显示的区域绑定鼠标事件 
$("#content").bind("mouseover",function(){StopScroll();}); 
$("#content").bind("mouseout",function(){StartScroll();}); 
//启动定时器 
StartScroll(); 
}); 
//启动定时器,开始滚动 
function StartScroll(){ 
objInterval=setInterval("verticalloop()",interval); 
} 
//清除定时器,停止滚动 
function StopScroll(){ 
window.clearInterval(objInterval); 
} 
//控制滚动 
function verticalloop(){ 
//判断是否上部内容全部移出显示区域 
//如果是,从新开始;否则,继续向上移动 
if($("#content").scrollTop()>=$("#top").outerHeight()){ 
$("#content").scrollTop($("#content").scrollTop()-$("#top").outerHeight()); 
} 
//使用jquery创建滚动时的动画效果 
$("#content").animate( 
{"scrollTop" : $("#content").scrollTop()+stepsize +"px"},600,function(){ 
//这里用于显示滚动区域的scrollTop,实际应用中请删除 
// $("#foot").html("scrollTop:"+$("#content").scrollTop()); 
}); 
}
Javascript 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 #Javascript
在Firefox下js select标签点击无法弹出
Mar 06 #Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 #Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 #Javascript
Jquery easyUI 更新行示例
Mar 06 #Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 #Javascript
button没写type=button会导致点击时提交
Mar 06 #Javascript
You might like
PHP中,文件上传
2006/12/06 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
js闭包的用途详解
2014/11/09 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python生成圆形图片的方法
2020/03/25 Python
python如何生成网页验证码
2018/07/28 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
flask开启多线程的具体方法
2020/08/02 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
秋季运动会活动方案
2014/02/05 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python