基于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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
JS数组的赋值介绍
Mar 10 Javascript
node.js中watch机制详解
Nov 17 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
javascript实现的listview效果
2007/04/28 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
JavaScript Split()方法
2015/12/18 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python 字典dict使用介绍
2014/11/30 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
zookeeper python接口实例详解
2018/01/18 Python
详解python多线程之间的同步(一)
2019/04/03 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
餐饮业的创业计划书范文
2013/12/26 职场文书
运动会广播稿20字
2014/02/18 职场文书
迎新生标语大全
2014/10/06 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
出生证明范本
2015/06/15 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
Python基于Opencv识别两张相似图片
2021/04/25 Python
Nginx实现负载均衡的项目实践
2022/03/18 Servers