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 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
php生成与读取excel文件
2016/10/14 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
javascript 动态创建表格
2015/01/08 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
金融事务专业毕业生求职信
2014/02/23 职场文书
高中学生评语大全
2014/04/25 职场文书
学习方法演讲稿
2014/05/10 职场文书
摩登时代观后感
2015/06/03 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
Python中itertools库的四个函数介绍
2022/04/06 Python