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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
js实现抽奖效果
Mar 27 Javascript
vue移动端路由切换实例分析
May 14 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
Javascript中window.name属性详解
Nov 19 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加密解密实用类分享
2014/01/07 PHP
php中explode函数用法分析
2014/11/15 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
简单谈谈json跨域
2016/03/13 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python图算法实例分析
2016/08/13 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python实现文本界面网络聊天室
2018/12/12 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
一些PHP的面试题
2015/05/06 面试题
岗位职责的构建方法
2014/02/01 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
领导干部考核评语
2015/01/04 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
中学教师教学工作总结
2015/08/13 职场文书
导游词之湖北武当山
2019/09/23 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏