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 相关文章推荐
javascript函数中的arguments参数
Aug 01 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
Javascript高级技巧分享
Feb 25 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
javascript arguments使用示例
Dec 16 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
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/10/09 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php安装swoole扩展的方法
2015/03/19 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
安全演讲稿开场白
2014/08/25 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
维稳工作情况汇报
2014/10/27 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
导游词之任弼时故居
2020/01/07 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers