基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)


Posted in Javascript onMarch 28, 2011

从需求上来说,这个功能需要实时调用最新的微博数据,单就前端开发来说,其需求可以拆分如下:
1 内容持续滚动;
2 新微博将下面的微博先推下去,然后淡入进来;
3 鼠标经过内容暂停滚动;
4 容器底部渐变消失在背景色下。
上述4个需求之中,需求1-3为js技术实现,需求4为css技术实现,下面逐个需求来讲。
需求1和需求2:内容持续滚动的需求有些类似前一篇文章《小模块:公告滚动并暂停》中介绍的功能,在那篇文章中,此功能使用css的position定位来控制整个ul列表的移动动画。结合需求2,我们可以写得更简单一些,让最后的li元素定时插入第一个li元素的上方,然后采用animate方法来改变li的高度和透明效果。而不停顿的滚动依然要用到setTimeout方法。在没有新数据加载的情况下,要实现有限内容循环滚动。
需求3:鼠标经过暂停的需求可以当鼠标hover经过的时候在某元素上加上某属性的值,这里采用name属性——判断此值是否存在,如果存在则不执行代码。
需求4:可以通过在内容上覆盖渐变的png24图片来实现,IE6对png24支持不好,如果需要顾及性能的话,在此容器上加display:none的IE6hack。接下来的问题是解决图片覆盖到文字之上,文字如何可以点击或选中的问题,这时候需要一个特殊的css属性“pointer-events”,此属性的值设为none之后,鼠标就可以透过绝对定位在文字上的图片选中下面的文字。
综合代码如下:
HTML

<div class="messagewrap"> 
<ul> 
<li><!--多个li,请自行复制或者设置重复区域--></li> 
</ul> 
<div class="bottomcover"> 
<!--为了符合w3c要求不能有空标签的要求,此处可选择写一个 --> 
</div> 
</div>

CSS
.messagewrap{overflow:hidden;position:relative;width:500px;height:300px} 
li{height:50px;} 
.bottomcover{width:500px;height:45px;position:absolute;bottom:0;left:0; 
pointer-events:none;background:url(halftransp.png) left bottom no-repeat; 
/*某从背景色向上渐变透明图片*/ _display:none;/*针对IE6体验降级*/}

JS
<script> 
$(function(){ 
msgmove(); 
$("ul").hover(function(){ 
$(this).attr("name","hovered"); //鼠标经过设置ul的name值为"hovered" 
},function(){ 
$(this).removeAttr("name"); 
}); 
}); 
function msgmove(){ 
var isIE=!!window.ActiveXObject; 
var isIE6=isIE&&!window.XMLHttpRequest; 
if($("ul").attr("name") != "hovered"){ 
//判断ul的name属性是否为"hovered",决定下面代码块是否运行,以实现鼠标经过暂停滚动。 
var height = $("li:last").height(); 
if(isIE6){ 
//判断IE6,jQuery的animate动画和opacity透明在一起使用在IE6中会出现中文重影现象, 
//所以在ie6中实行透明的禁用。 
$("li:last").css({"height":0}); 
}else{ 
$("li:last").css({"opacity":0,"height":0}); 
//列表最后的li透明和高度设置为0 
} 
$("li:first").before($("li:last")); 
//把列表最后的li提升到顶部,实现有限列表项无限循环滚动显示 
$("li:first").animate({"height":height},300); 
//列表顶部的li高度逐渐变高以把下面的li推下去 
if(!isIE6){ 
$("li:first").animate({"opacity":"1"},300); 
//在非IE6浏览器中设置透明淡入效果 
} 
} 
setTimeout("msgmove()",5000); 
//设置5秒滚动一次 
} 
</script>
Javascript 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jQuery聚合函数实例
May 21 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
vue配置多页面的实现方法
May 22 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
正则表达式基础与常用验证表达式
Jun 16 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 #Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 #Javascript
jQuery中调用WebService方法小结
Mar 28 #Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 #Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 #Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 #Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 #Javascript
You might like
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
解决vue跨域axios异步通信问题
2019/04/17 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python3中sys.argv的实例用法
2020/04/24 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
特色冷饮店创业计划书
2014/01/28 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
python Tkinter模块使用方法详解
2022/04/07 Python