基于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取模(求余数)隔行变色
May 15 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
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 mkdir()无写权限的问题解决方法
2014/06/19 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
详细分析JS函数去抖和节流
2017/12/05 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python实用代码片段收集贴
2015/06/03 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
车辆转让协议书
2014/04/15 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2014国庆节标语口号
2014/09/19 职场文书
安全生产月宣传标语
2014/10/06 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
会计求职信怎么写
2015/03/20 职场文书
道歉信范文
2015/05/12 职场文书
标准发言稿结尾
2019/07/18 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP