图片 3

JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果,jquery实现模拟新浪微博大厅和腾讯微博首页滚动效果

新浪微博大厅和腾讯微博首页的微博消息渐显渐隐的向下滚动效果还是挺不错的,淡静又不显得花哨,个人感觉非常实用。于是乎用
javascript
也模拟实现了新浪微博和腾讯微博那种消息滚动的效果。现将代码贴在下面,感兴趣的朋友可以试试。

新浪微博大厅和腾讯微博首页的微博信息一条一条的向下滚动效果是非常漂亮的,给人的感觉是这个网页人气特别旺的那一种,于是闲来无事也就研究了一番。用
jquery 也模拟实现了新浪微博和腾讯微博消息滚动的效果。效果如下图:

js滑动门效果,效果示例图如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset="utf-8" /> 
<title>JS实现模拟新浪微博和腾讯微博首页滚动效果_www.phpernote.com</title> 
<style type="text/css"> 
*{ margin:0;padding:0;}
body{ font:12px/1.8 Arial;color:#666;margin:0;height:100%;background:#333;}
.wrapper{padding:50px;}
ul,li{margin:0;padding:0;list-style:none}
.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;}
.slider li{padding:20px 0;border-bottom:1px dashed #ccc;overflow:hidden;width:100%}
</style> 
<script type="text/javascript">
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()}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)}else{var __t=Math.abs(_t)-Math.ceil(Math.abs(_t)*0.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}();
</script>

<body>
<h1 class="tit-h1">JS实现模拟新浪微博大厅和腾讯微博首页滚动效果 www.phpernote.com</h1>
<div class="wrapper">
    <div class="wp">
        <ul id="slider" class="slider">
            <li>入山又恐别倾城  世间安得双全 不负如来不负卿 </li>
            <li>第一最好不相见,如此便可不相恋。 </li>
            <li>那一天 闭目在经殿香雾</li>
            <li>你见 或者不见我  我就在那里</li>
        </ul>
    </div>
</div>
<script type="text/javascript">new slider({id:'slider'});</script>
</body> 
</html>

图片 1

图片 2

以上代码复制保存为 html 文档即可看到效果,效果如下图:

具体代码如下:

具体代码如下:

图片 3

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现模拟新浪微博和腾讯微博首页滚动效果_www.phpernote.com</title>
<script language="javascript">
$(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({marginTop : liHeight+40 +"px"},1000,function(){   
                $ul.find("li:last").prependTo($ul);
                $ul.find("li:first").hide();
                $ul.css({marginTop:0});
                $ul.find("li:first").fadeIn(1000);
                });        
        },3000);
        }).trigger("mouseleave");
});
</script>
<style type="text/css">
*{ margin:0; padding:0;}
ul,li{ list-style-type:none;}
body{ font-size:13px; background-color:#999999;}
#con{ width:700px; height:400px; margin:10px auto; position:relative; border:1px #666 solid; background-color:#FFFFFF; 
overflow:hidden;}
#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;}
#con ul li{ width:100%;  border-bottom:1px #333333 dotted; padding:20px 0; overflow:hidden; }
#con ul li a{ float:left;  border:1px #333333 solid; padding:2px;}
#con ul li p{ margin-left:68px;line-height:1.5;  padding:10px;}
</style>
<body>
<div id="con">
  <ul>
    <li> <a href="#"><img src="http://www.phpernote.com/uploadfiles/editor/201209301006568507.jpg" width="120" height="120" /></a>
        <p class="vright">使用jquery模拟新浪微博和腾讯微博首页滚动效果,就是这么简单实用!</p>
    </li>
    <li> <a href="#"><img src="http://www.phpernote.com/uploadfiles/editor/201209301006568507.jpg" width="120" height="120" /></a>
        <p class="vright">www.phpernote.com是一个php程序员的工作生活笔记,本站包含了php网络编程,数据库(主要是MySQL和Access数据库),javascript,jquery,div+css,html,windows系统,linux系统以及健康养生方面的学习笔记和生活经验积累!
         </p>
    </li>
    <li> <a href="#"><img src="http://www.phpernote.com/uploadfiles/editor/201209301006568507.jpg" width="120" height="120" /></a>
        <p class="vright">javascript模拟新浪微博和腾讯微博首页滚动效果</p>
    </li>
    <li> <a href="#"><img src="http://www.phpernote.com/uploadfiles/editor/201209301006568507.jpg" width="120" height="120" /></a>
        <p class="vright">新浪微博和腾讯微博首页滚动效果</p>
    </li>
  </ul>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动门效果</title>
<style type="text/css">
*{margin:0 auto;padding:0;}
body{font:12px "宋体";text-align:center;}
a:link,a:visited{color:#999;text-decoration:none;}
a:hover{color:#666;text-decoration:underline;}
ul{list-style:none;}
li{color:#999;height:22px;line-height:22px;border-bottom:#eee 1px dashed;}
.main{clear:both;padding:8px;text-align:center;}
#tabs1{text-align:left;width:300px;margin:20px auto;}
.menu1box{overflow:hidden;height:26px;text-align:left;border:0 solid #E4E4E4;border-width:1px 1px 0 1px;background-color:#ffc;}
#menu1 li{float:left;display:block;cursor:pointer;width:80px;text-align:center;line-height:24px;height:24px;padding-top:2px;border-bottom:none;}
#menu1 li.hover{color:#0DA5E6;font-weight:bold;background:none no-repeat scroll center top #FFFFFF;border:0 solid #E4E4E4;border-width:0 1px 0 1px;}
.main1box{clear:both;margin-top:-1px;border:1px solid #E4E4E4;}
#main1 ul{display:none;text-align:left;}
#main1 ul.block{display:block;}
</style>
<script type="text/javascript">
function setTab(m, n) {
    var tli=document.getElementById("menu"+m).getElementsByTagName("li");
    var mli=document.getElementById("main"+m).getElementsByTagName("ul");
    for (i=0;i<tli.length;i++) {
        tli[i].className=i==n?"hover":"";
        mli[i].style.display=i==n?"block":"none";
    }
}
</script>
</head>
<body>
<div id="tabs1">
<div class="menu1box">
   <ul id="menu1">
    <li class="hover" onMouseOver="setTab(1,0)">php笔记</li>
    <li onMouseOver="setTab(1,1)">数据库教程</li>
    <li onMouseOver="setTab(1,2)">javascript教程</li>
   </ul>
   <div style="clear:both;"></div>
</div>
<div class="main1box">
   <div class="main" id="main1">
    <ul class="block">
        <li><a href="#">PHP的echo输出内容过多会很慢</a></li>
        <li><a href="#">如何知道服务器是否支持Gzip压缩</a></li>
        <li><a href="#">php获取QQ头像的两种方法</a></li>
     </ul>
    <ul>
      <li><a href="#">truncate的用法</a></li>
         <li><a href="http://www.phpernote.com/mysql/998.html">mysql存储过程详解</a></li>
         <li><a href="#">mysql服务器主从数据库同步配置</a></li>
         <li><a href="#">修改xampp mysql默认空密码的方法</a></li>
    </ul>
    <ul>
      <li><a href="#">js tab滑动门效果</a></li>
         <li><a href="#">jquery动画删除效果</a></li>
         <li><a href="http://www.phpernote.com/jquery/960.html">Jquery动画效果简单总结</a></li>
         <li><a href="#">jquery QQ 表情插件分享</a></li>
         <li><a href="#">JQuery中阻止事件冒泡方式及其区别</a></li>
    </ul>
   </div>
</div>
</div>
</body>
</html>

JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果下载

您可能感兴趣的文章

  • JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果
  • JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
  • jquery特效两边固定的对联广告效果
  • js如何判断鼠标滚轮是向下还是向上滚动
  • jquery模拟select下拉框效果
  • JQuery实现倒计时按钮的效果
  • 禁止网页右键、复制、另存为、查看源文件等功能实现网页源代码保护
  • 在php中分别使用curl的post提交数据的方法和get获取网页数据的方法总结

您可能感兴趣的文章

  • jquery实现模拟新浪微博大厅和腾讯微博首页滚动效果
  • jquery动画删除效果
  • JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果
  • 鼠标移动到文字上出现浮层提示特效(兼容IE,火狐等所有浏览器)
  • jquery实现随滚动条滚动而加载数据的功能
  • jQuery动画效果总结
  • jquery特效两边固定的对联广告效果
  • jquery下拉菜单效果(超简洁实用,兼容IE和firefox等主流浏览器)

具体代码如下:
htmlheadmeta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ /titlejs滑动门效果/titlestyle type…

您可能感兴趣的文章

  • jquery实现模拟新浪微博大厅和腾讯微博首页滚动效果
  • php根据日期或时间戳获取干支纪年,生肖和星座信息的方法
  • js如何判断鼠标滚轮是向下还是向上滚动
  • JQuery实现倒计时按钮的效果
  • php获取汉字拼音首字母的函数(真正可以使用的)
  • 兼容IE和firefox的设置首页和加入收藏的JavaScript代码
  • 新晋亿万富翁的十大成功准则:远离舒适地带
  • 室内装修风水学 – 厨房风水

javas…