JS达成模拟今日头条腾讯网大厅和Tencent乐乎首页

作者:杏彩彩票app下载

新浪博客园大厅和Tencent微博首页的网易音信一条一条的向下滚动作效果应是非常优越的,给人的认为到是以此网页名气非常旺的那意气风发种,于是闲来无事也就钻研了风度翩翩番。用 jquery 也效法达成了和讯搜狐和Tencent搜狐音信滚动的成效。效果如下图:

和讯腾讯网大厅和Tencent新浪首页的和讯新闻渐显渐隐的向下滚动作效果应依旧挺不错的,淡静又不展现花哨,个人认为极其实用。于是乎用 javascript 也效仿实现了今日头条和讯和Tencent今日头条这种信息滚动的效果与利益。现将代码贴在底下,感兴趣的爱侣能够尝试。

本条案例是行使jquery实现的三个相比宽泛的倒计时间效益果,现实中大家平日会在购物网站上来看某商品准时开抢或某移动始于等,基本都是如此达成的,上边首先看一下那个倒计时效果图!

图片 1

<!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>

图片 2

本文由杏彩发布,转载请注明来源

关键词: