- 浏览: 260500 次
- 性别:
- 来自: 北京
最新评论
-
haixin3036:
jQuery是一套跨浏览器的JavaScript库,简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang:
非常感谢分享,正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369:
不错。。。
移动端webapp开发必备知识
新浪微博未登录首页有一个“大家正在说”的模块,动态滚动最新发布的微博。从需求上来说,这个功能需要实时调用最新的微博数据,单就前端开发来说,其需求可以拆分如下:
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>
js直接实现:
html代码
<div class="wp">
<ul id="slider" class="slider">
<li><a class="fl" href="javascript:;"><img src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50" alt="" /></a>
<p>入山又恐别倾城 世间安得双全 不负如来不负卿</p>
</li>
<li><a class="fl" href="javascript:;"><img src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50" alt="" /></a>
<p>第一最好不相见,如此便可不相恋。</p>
</li>
<li><a class="fl" href="javascript:;"><img src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50" alt="" /></a>
<p>那一天 闭目在经殿香雾</p>
</li>
<li><a class="fl" href="javascript:;"><img src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50" alt="" /></a>
<p> 你见 或者不见我 我就在那里 </p>
</li>
</ul>
</div>
<script type="text/javascript">
new slider({id:'slider'})
</script>
css代码
ul, li {margin:0;padding:0;list-style:none}
a{ color:#fff;}
body {margin:0;height:100%;background: #333;}
.wp {position: relative;width:800px;height:400px;overflow:hidden;margin:20px auto;border:4px solid #121212;background:#fff;}
.slider {position: absolute;width: 760px;padding:0 20px;left:0;top: 0;}
.fl {float:left}
.slider img {display:block; padding: 2px; border: 1px solid #ccc}
.slider li {padding: 20px 0; border-bottom: 1px dashed #ccc;overflow:hidden;width:100%}
.slider p {font-size: 12px;margin:0;padding-left:68px;color:#333;line-height:20px;}
js代码
function H$(i) {return document.getElementById(i)}
function H$$(c, p) {return p.getElementsByTagName(c)}
var slider = function () {
function inits (o) {
this.id = o.id;
this.at = o.auto ? o.auto : 3;
this.o = 0;
this.pos();
alert(o);
}
inits.prototype = {
pos : function () {
clearInterval(this.__b);
this.o = 0;
var el = H$(this.id), li = H$$('li', el), l = li.length;
var _t = li[l-1].offsetHeight;
var cl = li[l-1].cloneNode(true);
cl.style.opacity = 0; cl.style.filter = 'alpha(opacity=0)';
el.insertBefore(cl, el.firstChild);
el.style.top = -_t + 'px';
this.anim();
},
anim : function () {
var _this = this;
this.__a = setInterval(function(){_this.animH()}, 20);
},
animH : function () {
var _t = parseInt(H$(this.id).style.top), _this = this;
if (_t >= -1) {
clearInterval(this.__a);
H$(this.id).style.top = 0;
var list = H$$('li',H$(this.id));
H$(this.id).removeChild(list[list.length-1]);
this.__c = setInterval(function(){_this.animO()}, 20);
//this.auto();
}else {
var __t = Math.abs(_t) – Math.ceil(Math.abs(_t)*.07);
H$(this.id).style.top = -__t + 'px';
}
},
animO : function () {
this.o += 2;
if (this.o == 100) {
clearInterval(this.__c);
H$$('li',H$(this.id))[0].style.opacity = 1;
H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity=100)';
this.auto();
}else {
H$$('li',H$(this.id))[0].style.opacity = this.o/100;
H$$('li',H$(this.id))[0].style.filter = 'alpha(opacity='+this.o+')';
}
},
auto : function () {
var _this = this;
this.__b = setInterval(function(){_this.pos()}, this.at*1000);
}
}
return inits;
}();
- JS实现仿新浪微博大厅和腾讯微博首页滚动效果.rar (2.1 KB)
- 下载次数: 20
发表评论
-
Javascript类定义语法,私有成员、受保护成员、静态成员等
2014-05-29 10:59 726JS只是一门支持面向对象编程的语言,通过OO可以让我们的 ... -
Javascript 继承模式
2014-05-29 10:59 723在面向对象的JavaScript开发中使用继承可以提高代码 ... -
用JavaScript实现自己的DOM选择器
2014-05-28 14:27 680解释器模式(Interpreter):定义一种语法格式,通过 ... -
Javsript代码的注释和模块定义
2014-05-28 14:21 835可以这样定义模块: (function(ns, re ... -
在JavaScript中应用单例模式管理命名空间
2014-05-28 10:56 801单例模式确保一个类在整个应用程序中只有一个是实例对象,在J ... -
移动WEB开发中媒体查询里的width, device-width, resolution
2014-05-28 10:14 1010/*1、width: viewport的宽度,css像素,三星 ... -
前端性能优化
2014-05-27 15:16 8851. 请减少HTTP请求 基本原理: ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1214看了jquery的源码,jquery用的选择器的引擎是siz ... -
jQuery 1.8,1.9和2.0分别带来的新特性
2014-05-26 14:17 1336jQuery 1.8 可定制 在jQuery ... -
jquery点击div之外的地方div本身消失
2014-05-15 12:22 881<!DOCTYPE html PUBLIC " ... -
jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本
2014-05-14 16:31 652这个插件可以用来检测和恢复在jQuery1.9版本中已删除或 ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 639Codiqa,https://codiqa.com 简单试用 ... -
Android手机版浏览器DIV滚动条失效解决方案
2014-05-08 11:09 1214除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支 ... -
解耦HTML、CSS和JavaScript
2014-02-14 11:32 626当前在互联网上, ... -
使用console.table()调试javascript
2014-01-20 15:42 612或许你已经习惯了console.log()来调试js,非常好 ... -
JS对象复制
2014-01-17 16:18 607在JavaScript很多人复制 ... -
jQuery反向排序(倒序)子对象
2013-12-26 10:53 2281<!DOCTYPE html><html&g ... -
js object写法 参数传递jquery对象
2013-12-24 11:21 926<!DOCTYPE HTML PUBLIC &quo ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-12-24 11:08 588一、思路 1、单击元素时,使元素可以编辑,并获得焦点 2 ... -
ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性
2013-12-19 15:47 807IE6-IE8浏览器,按照现代浏览器的API来工作就好了!也 ...
相关推荐
最近看到朋友用JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果,朋友使用jquery实现的,在网上看到有用js制作的也比较好,于是把我的内容整理分享给大家,具体详解请看本
竞品分析报告腾讯微博VS新浪微博.ppt
一键分享到新浪微博,腾讯微博,人人网,QQ空间,微信好友圈
JS实现仿新浪微博大厅和腾讯微博首页滚动效果 返回顶部js另外一种也是非jquery jQuery-三级菜单2种 js随机生成滚动发货记录 js封装一个tab效果 图片循环滚动jquery 基于jQuery的弹出层 集合多种过渡效果幻灯片插件 ...
JS实现仿新浪微博大厅和腾讯微博首页滚动效果 返回顶部js另外一种也是非jquery jQuery-三级菜单2种 js随机生成滚动发货记录 js封装一个tab效果 图片循环滚动jquery 基于jQuery的弹出层 集合多种过渡效果幻灯...
3.新浪微博SDK和腾讯微博SDK 4.HMAC加密算法 5.SQLite数据库相关操作 6.字符串处理,表情识别 7.JSON解析,XML解析:超链接解析,时间解析等 8.Android UI:样式文件,布局 9.异步加载图片,异步处理数据,多...
新浪微博与腾讯微博 获取@当前用户的信息
将自己的网页URL地址分享到腾讯,网易,新浪微博
腾讯_新浪微博_织梦同步发送程序 安装介绍 http://blog.csdn.net/jackqn/article/details/8113567
Oauth 2.0 新浪微博 腾讯微博 实现2个微博的授权与发布一条微博。
仿腾讯新浪微博的文本向下滚动JS特效代码
android客户端接入新浪微博、腾讯微博和人人网demo源代码。对应的文章为:http://blog.csdn.net/yanbin1079415046/article/details/7858581。
本人自己实现的支持腾讯新浪微博分享,支持outh2.0
基于shareSDK实现了新浪微博、腾讯微博的分享,有需要的可以拿去参考下
asp.net 腾讯微博新浪微博帐号登录 授权
基于ThinkPHP框架的腾讯微博和新浪微博同步登陆代码
新浪微博、腾讯微博:mysql数据库主表设计猜想
自己的app绑定腾讯以及新浪微博的示例。
3./class/下,文件名中含有If的文件,定义的是接口.总计3个接口文件:各个网站的api访问路径...5.实例中2个网站(新浪微博和腾讯微博)的OAuth已经实现,并且通过验证。本例中的OAuth客户端来源于新浪微博OAuth认证SDK。
新浪微博,人人,腾讯微博分享信息例子,只需要导入就可以了 非常简单方便