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 数组的 uniq 方法
Jan 23 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
js实现列表按字母排序
Aug 11 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
在线增减.htpasswd内的用户
2006/10/09 PHP
php中的strpos使用示例
2014/02/27 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
用于table内容排序
2006/07/21 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
利用python爬取有道词典的方法
2020/12/08 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
广播体操比赛口号
2014/06/10 职场文书
会计试用期自我评价
2014/09/19 职场文书
死亡证明书样本说明
2014/10/18 职场文书
苏州园林导游词
2015/02/03 职场文书
就业证明函
2015/06/17 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL