jquery单行文字向上滚动效果的实现代码


Posted in Javascript onSeptember 05, 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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
js实现菜单跳转效果
Dec 11 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 #Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 #Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 #Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 #Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 #Javascript
window.location的重写及判断location是否被重写
Sep 04 #Javascript
js怎么覆盖原有方法实现重写
Sep 04 #Javascript
You might like
ThinkPHP的URL重写问题
2014/06/22 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python中关于使用模块的基础知识
2015/05/24 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
解决DataFrame排序sort的问题
2018/06/07 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
Python处理session的方法整理
2019/08/29 Python
python time.strptime格式化实例详解
2021/02/03 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
实习医生自我评价
2013/09/22 职场文书
自考生毕业自我鉴定
2013/10/10 职场文书
汉语言文学职业规划
2014/02/14 职场文书
租赁意向书范本
2014/04/01 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
环保建议书600字
2014/05/14 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
react合成事件与原生事件的相关理解
2021/05/13 Javascript
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python