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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
js控制table合并具体实现
Feb 20 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
vue跨域解决方法
Oct 15 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
php下统计用户在线时间的一种尝试
2010/08/26 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP7.0版本备注
2015/07/23 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
javascript 函数使用说明
2010/04/07 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
搭建vue开发环境
2018/07/19 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
Django 实现下载文件功能的示例
2018/03/06 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Django设置Postgresql的操作
2020/05/14 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
高中的自我鉴定
2013/12/16 职场文书
养殖项目策划书范文
2014/01/13 职场文书
加拿大留学自荐信
2014/01/28 职场文书
三项教育活动实施方案
2014/03/30 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
2014企业年终工作总结
2014/12/23 职场文书
加薪通知
2015/04/25 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js