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 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
新手简单了解vue
2019/05/29 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
python对字典进行排序实例
2014/09/25 Python
Python中格式化format()方法详解
2017/04/01 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
花卉与景观设计系大学生求职信
2013/10/01 职场文书
个人实习生的自我评价
2014/02/16 职场文书
高三励志标语
2014/06/05 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js