Js仿新浪微博首页内容滚动

然后在新浪微博首页仍然在使用哦,可能我写的代码还不是最佳优化状态,但是我觉得这已经不错了。

仿新浪微博首页内容滚动

body{background:#efc;}

-------------------------------------
---------------------------------------
---------------------------------------

/*--------------新鲜事滚动----------------*/
var _num=_n=0,
_autohidden,_arrObj,_oHeight;
function flilter(elem,i,t){
var o=document.getElementById("actDbList");
if(!o) return false;
var elem=o.getElementsByTagName("dl")[0];
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!_n===0) _n = parseInt(elem['style'][!-[1,]?'filter':'opacity']);
if(_n>=i){
return true;
}
if (_n i) {
var dist = Math.ceil((i - _n)/10);
_n = _n - dist;
}
elem['style'][!-[1,]?'filter':'opacity']=!-[1,]?'alpha(opacity='+_n+')':_n/100;
var repeat = "flilter('"+elem+"',"+i+","+t+")";
elem.movement = setTimeout(repeat,t);
}
function moveElement(elem,final_y,interval) {
var o=document.getElementById("actDbList");
if(!o) return false;
var elem=o.getElementsByTagName("dl")[0];
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.height) {
elem.style.height = "0";
}
var ypos = parseInt(elem.style.height);

if (ypos == final_y) {
flilter(o.getElementsByTagName("dl")[0],100,40);
return true;
}
if (ypos final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.height = ypos + "px";
var repeat = "moveElement('"+elem+"',"+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function step(obj){
var _arrO=document.getElementById("DB");
if(!_arrO) return false;
var _arr=_arrO.getElementsByTagName("dl");
if (_autohidden) {
clearInterval(_autohidden);
}
_n=0;
_arrObj=_arr[_num];
_max=_arr.length;
var o=document.getElementById(obj);
var newNode= document.createElement("dl");
o.insertBefore(newNode,o.getElementsByTagName("dl")[0]);
var s=o.getElementsByTagName("dl")[0];
s.style.cssText="height:0;opacity:0;filter:Alpha(opacity=0);overflow:hidden";
s.style.className="clear";
s.innerHTML=_arrObj.innerHTML;
_oHeight=_arrObj.offsetHeight;
moveElement(s,_oHeight,10);
var lastNode=o.getElementsByTagName("dl")[(o.getElementsByTagName("dl").length-1)];
var reLastNode=o.removeChild(lastNode);
_num++;
if(_num>=_max){
_num=0;
}
stopMove("actDbList");
_autohidden = setTimeout(function(){step(obj);},5000);
}
function stopMove(o){
var o=document.getElementById(o);
if(!o) return false;
o.onmouseover=function(){
if (_autohidden) {
clearTimeout(_autohidden);
}
}
o.onmouseout=function(){
_autohidden = setTimeout(function(){step("actDbList");},5000);
}
}
/*--------------新鲜事滚动结束----------------*/
_autohidden = setInterval(function(){step("actDbList");},1000);
stopMove("actDbList");

我记得我爱过(电视剧《泡沫之夏》主题曲)-何润东
#我最喜欢的书#绝对不是言情和校园谈恋爱的那种,就是无聊的,只有看那些书的时候,我也一个字看不进。其它的书还都蛮喜欢的,嘿嘿
等会儿又要飞了,好想死。旁边放把剪刀,实在写不出东西来,随时准备从天灵盖插下去……
有人质疑我"发福了,老了,唱不动了"。我早已不把这些话放在心上。
记录心情,记录生活点滴,欢迎走进腾讯微博。
欢乐无从,快乐从心!

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • JS+CSS实现仿新浪微博搜索框的方法

    本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码

    首先是Jquery 无标题文档 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $ul.animate({

  • nodejs开发微博实例

    之前一直执着于前端开发,最近几天,开始学起了nodejs.作为一名前端开发者,见到这样一门用javascript写的后台自然是很激动的.但是,后台毕竟不同于前端,在学习的过程中,还是会遇到不少问题. 为了开始学习nodejs,一开始选择了<深入浅出nodejs>这本书,看了几章之后,得出一个结论是:真是一本好书,但是还是不会写nodejs!然后选择了另外一本教材<nodejs开发指南>,由于看过了<深入浅出nodejs>,直接跳过了这本书的前几章,写起了该书第五章的微博

  • JS实现模仿微博发布效果实例代码

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;

  • js实现的仿新浪微博完美的时间组件升级版

    这个时间组件以前发过一次,上次那个很烂,这次有时间了,把这个升级了,性能更好,完美兼容所有浏览器,ie6下拉select档不住的问题 也解决了.总之,差不多也算一个完美的时间组件, 在线demo nothingDemo 突然发现下面的代码里面有个运行代码可以看在线demo,就再最下面 然后贴出源码,只有一点简单的说明 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

  • JS模拟的腾讯微博app撕纸效果的实例代码

    腾讯微博app撕纸效果 body{margin:0;padding:0;font-size:14px;line-height:22px;} .content,content_mack{width:300px;height:400px;overflow:hidden;font-size:12px;line-height:20px;background:#f2eee3;cursor:pointer;} .content_mack{position:absolute;top:0px;left:0;}

  • 基于js实现微信发送好友如何分享到朋友圈、微博

    微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友.分享到朋友圈.分享到微博等功能. <script> var imgUrl = "图片地址"; var lineLink = "当前网址"; var descContent = "描述"; var shareTitle = '标题'; var appid = ''; function shareFriend() { WeixinJSBridge

  • js控住DOM实现发布微博效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博消息效果</title> <style> *{margin:0;padding: 0;} .warp{ width: 600px; mar

  • 仿新浪微博登陆邮箱提示效果的js代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

  • JS 仿腾讯发表微博的效果代码

    最近2天研究了下 腾讯发表微博的效果 特此来分享下,效果如下: 在此分享前 来谈谈本人编写代码的习惯,很多人会问我既然用的是jquery框架 为什么写的组件不用Jquery那种形式?我当时回答的是:每个人编写代码有每个人的习惯.但是我更想表达的是:这种编码个人觉得 有一个很大的优点,我不是非常依赖于Jquery框架,因为不同的公司有不同的框架 比如在淘宝用的kissy框架 在支付宝用的是支付宝框架 在百度用的是百度框架 在腾讯有腾讯的前端js框架 假如我的编写代码太依赖于jquery 那假如其他

随机推荐