基于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 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
JavaScript Promise启示录
Aug 12 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
vue实现拖拽效果
Dec 23 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
Vue vee-validate插件的简单使用
Jun 22 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
es6数值的扩展方法
2019/03/11 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
Python二维码生成识别实例详解
2019/07/16 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
新闻专业个人求职信
2013/12/19 职场文书
材料员岗位职责
2014/03/13 职场文书
主持词开场白
2014/03/17 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
任命书范本大全
2014/06/06 职场文书
外贸业务员求职信
2014/06/16 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
实验心得体会范文
2016/01/25 职场文书
子女赡养老人协议书
2016/03/23 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
MySQL系列之十二 备份与恢复
2021/07/02 MySQL