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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
javascript parseInt 大改造
Sep 27 Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
Express.JS使用详解
Jul 17 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
JavaScript中的相等操作符使用详解
Dec 21 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
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
jquery密码强度校验
2015/12/02 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
python发腾讯微博代码分享
2014/01/10 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python接入支付宝的实例操作
2020/07/20 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
合作意向协议书范本
2014/03/31 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
cf战队宣传语
2015/07/13 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫