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({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");

});

  • 第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。
    第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。
    作相思。



  • 第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。
    第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。
    第五最好不相爱, 不相对,如此便可不相会。
    第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。
    第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。
    但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。


  • 第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。
    第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。
    第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。
    第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。
    第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。
    但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。


  • 第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。
    第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。
    第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。
    第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。
    第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。
    但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。

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

这个是JavaScript:

tweets-slide

ul, li {margin:0; padding:0;list-style:none}
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;}

function H$(i) {return document.getElementById(i)}
function H$(c, p) {return p.getElementsByTagName(c)}
var slider = function () {
function init (o) {
this.id = o.id;
this.at = o.auto ? o.auto : 3;
this.o = 0;
this.pos();
}
init.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 init;
}();

  • 曾虑多情损梵行
      
    入山又恐别倾城
      
    世间安得双全法
      
    不负如来不负卿



  • 第一最好不相见,如此便可不相恋。
    第二最好不相知,如此便可不相思。

    第三最好不相伴,如此便可不相欠。
    第四最好不相惜,如此便可不相忆。

    第五最好不相爱,如此便可不相弃。
    第六最好不相对,如此便可不相会。

    第七最好不相误,如此便可不相负。
    第八最好不相许,如此便可不相续。

    第九最好不相依,如此便可不相偎。
    第十最好不相遇,如此便可不相聚。

    但曾相见便相知,相见何如不见时。
    安得与君相诀绝,免教生死作相思。



  • 那一天
    闭目在经殿香雾中
    蓦然听见你颂经中的真言
    那一月
    我摇动所有的转经筒
    不为超度
    只为触摸你的指尖
    那一年
    磕长头匍匐在山路
    不为觐见
    只为贴着你的温暖
    那一世
    转山转水转佛塔啊
    不为修来生
    只为途中与你相见
    只是
    就在那一夜
    我忘却了所有
    抛却了信仰
    舍弃了轮回
    只为那
    曾在佛前哭泣的玫瑰
    早已失去旧日的光泽


  • 班扎古鲁白玛的沉默
         你见 或者不见我
         我就在那里
         不悲不喜
        
         你念 或者不念我
         情就在那里
         不来不去
        
         你爱 或者不爱我
         爱就在那里
         不增不减
        
         你跟 或者不跟我
         我的手就在你手里
         不舍不弃
        
         来我的怀里
         或者
         让我住进你的心间
         默然 相爱
         寂静 欢喜

new slider({id:'slider'})

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

两种代码比较,很显然,Jquery的代码简单明了,强力推荐!

(0)

相关推荐

  • 走马灯效果代码js appendChild实现的无缝滚动

    *{border:1px solid blue} a{display:block;font-size:10px}; 1,河北, 2,辽宁 3,山东, 4,河南 var t=setInterval(myfunc,1000) function myfunc(){ d.appendChild(d.firstChild)} d.onmouseover=function(){clearInterval(t)} d.onmouseout=function(){t=setInterval(myfunc,100

  • js 实现无缝滚动 兼容IE和FF

    原理解析: 1.首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden: 2.容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果: 3.改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理): 4.到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间

  • js实现文字列表无缝滚动效果

    本文实例为大家分享了js文字列表无缝滚动的具体代码,供大家参考,具体内容如下 HTML代码: <div id="rule"> <div class="list" id="list"> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p

  • 彻底搞懂JS无缝滚动代码

    在做个东西要滚动代码 而且是无缝的 搞了半天还是不行  决心一定要把这个问题搞定 经过研究 也不难 代码如下: 程序代码 复制代码 代码如下: <div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600>  <table  align=top>  <tr>  <td id=demo1 valign=top> <p>aaaaaaaaaa

  • js实现图片无缝滚动特效

    首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter

  • div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

    div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo

  • js向上无缝滚动,网站公告效果 具体代码

    复制代码 代码如下: <!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/xhtml"><head>    <meta http-equiv=&q

  • Javascript 实现图片无缝滚动

    效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 复制代码 代码如下: <style type="text/css">             * {                 margin: 0;                 padding: 0;             }             #div1 {                 overflow: hidden;                 width: 71

  • jcarousellite.js 基于Jquery的图片无缝滚动插件

    1.引入JS库,jquery.js脚本和插件脚本jcarousellite.js. 复制代码 代码如下: <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jcarousellite.js"></script> 2

  • JS左右无缝滚动(一般方法+面向对象方法)

    复制代码 代码如下: <!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/xhtml"> <head> <meta http-equiv=&qu

随机推荐