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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
理解javascript回调函数
Dec 28 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
Vuex实现购物车小功能
Aug 17 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
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
跟我学Laravel之请求与输入
2014/10/15 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
vue中appear的用法
2017/08/17 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
签约仪式主持词
2014/03/19 职场文书
《海底世界》教学反思
2014/04/16 职场文书
庆祝儿童节标语
2014/10/09 职场文书
英语教师个人总结
2015/02/09 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS