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

最新推荐文章于 2021-08-24 15:47:16 发布
最新推荐文章于 2021-08-24 15:47:16 发布
阅读量171 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/websjy/archive/2010/11/14/1877120.html
版权

首先是Jquery

 

<!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>
<script src="http://common.cnblogs.com/script/jquery.json-2.2.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</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: }
#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="http://www.websjy.com"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
        <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。
          第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。
          作相思。 </p>
    </li>
    <li> <a href="http://www.websjy.com"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
        <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。
          第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。
          第五最好不相爱，              不相对，如此便可不相会。 
          第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。
          第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。
          但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 </p>
    </li>
    <li> <a href="http://www.websjy.com"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
        <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。
          第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。
          第五最好不相爱，如此便可不相弃。 第六最好不相对，如此便可不相会。 
          第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。
          第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。
          但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 </p>
    </li>
    <li> <a href="http://www.websjy.com"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
        <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。
          第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。
          第五最好不相爱，如此便可不相弃。 第六最好不相对，如此便可不相会。 
          第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。
          第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。
          但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 </p>
    </li>
  </ul>
</div>
</body>
</html>

演示

 

这个是JavaScript：

 

<!doctype html>
<html>
<head>
<title>tweets-slide</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
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;}
</style>
<script type="text/javascript">
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;
}();
</script>
</head>
<body>
<div class="wp">
        <ul id="slider" class="slider">
                <li><a class="fl" href="http://www.websjy.com"><img src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a>
                        <p>曾虑多情损梵行
　　
   入山又恐别倾城
　　
   世间安得双全法
　　
   不负如来不负卿</p>
                </li>
                <li><a class="fl" href="http://www.websjy.com"><img src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a>
                        <p>第一最好不相见，如此便可不相恋。
第二最好不相知，如此便可不相思。<br/> 
第三最好不相伴，如此便可不相欠。
第四最好不相惜，如此便可不相忆。<br/> 
第五最好不相爱，如此便可不相弃。 
第六最好不相对，如此便可不相会。 <br/> 
第七最好不相误，如此便可不相负。
第八最好不相许，如此便可不相续。<br/>
第九最好不相依，如此便可不相偎。
第十最好不相遇，如此便可不相聚。<br/> 
但曾相见便相知，相见何如不见时。
安得与君相诀绝，免教生死作相思。</p>
                </li>
                <li><a class="fl" href="http://www.websjy.com"><img src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a>
                        <p>那一天
闭目在经殿香雾中
蓦然听见你颂经中的真言
那一月
我摇动所有的转经筒
不为超度
只为触摸你的指尖
那一年
磕长头匍匐在山路
不为觐见
只为贴着你的温暖
那一世
转山转水转佛塔啊
不为修来生
只为途中与你相见
只是
就在那一夜
我忘却了所有
抛却了信仰
舍弃了轮回
只为那
曾在佛前哭泣的玫瑰
早已失去旧日的光泽
</p>
                </li>
                <li><a class="fl" href="http://www.websjy.com"><img src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a>
                        <p>班扎古鲁白玛的沉默
　　　　 你见 或者不见我 
　　　　 我就在那里 
　　　　 不悲不喜 
　　　　 
　　　　 你念 或者不念我 
　　　　 情就在那里 
　　　　 不来不去 
　　　　 
　　　　 你爱 或者不爱我 
　　　　 爱就在那里 
　　　　 不增不减 
　　　　 
　　　　 你跟 或者不跟我 
　　　　 我的手就在你手里 
　　　　 不舍不弃 
　　　　 
　　　　 来我的怀里 
　　　　 或者 
　　　　 让我住进你的心间 
　　　　 默然 相爱 
　　　　 寂静 欢喜
</p>
                </li>
        </ul>
</div>
<script type="text/javascript">
new slider({id:'slider'})
</script>
</body>
</html>

演示

 

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

转载于:https://www.cnblogs.com/websjy/archive/2010/11/14/1877120.html

dhmit18316199
关注
仿新浪微博高度自适应无缝滚动
12-06
仿新浪微博高度自适应无缝滚动 方式很简单，new slider({id:'**',auto:4});其中id为要滚动的ul的id，auto可选，表示滚动间隙时间，默认3秒。
Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
12-11
首先是Jquery 无标题文档 第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 作相思。 第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱， 不相对，如此便可不相会。 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 第一最好不相见，如
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
10-24
主要介绍了jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效,效果非常的棒，而且兼容性也很好，推荐给小伙伴们
jQuery仿新浪微博高度自适应滚动代码.zip
最新发布
11-20
这个名为"jQuery仿新浪微博高度自适应滚动代码.zip"的压缩包文件显然提供了实现一个特定功能的代码示例，即使用jQuery来创建一个类似于新浪微博的高度自适应滚动效果。这个效果可能是指页面内容随着窗口大小改变而...
jquery无缝滚动
04-10
jquery无缝滚动 jquery 图片滚动 图片无缝滚动效果 兼容所有主浏览器 简单方便 直接套进去就可以了
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
10-26
marquee无缝滚动想必大家都有见过，本文利用div+css+javascript也实现下类似的滚动且兼容firefox，喜欢的朋友可以参考下
CSS3无缝滚动（去除多余滚动条，解决自动换行，百分比布局）
qq_41619567的博客
12-05 1492
html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;throttle&lt;/title&gt; &lt;link rel="stylesheet" href=&
仿 twitter头像上传组件（vue2）
进击的你的博客
08-24 187
头像上传组件（此组件为仿twitter版） 组件需求和思路分析 ``` 需求： 1.需允许上传gif|jpg|jpeg|png|bmp|GIF|JPG|PNG等比较通用的图片格式 2.鼠标滚轮可以缩放，并且获取缩放的百分比 3.截图框不能拖动，上传的图片可以拖动，但是图片的拖动不能离开截图框 扩展： 1.是否做上传图片大小限制 2.是否截图框和上传图片都能拖动 3.上传图片是否按比例变大或缩小，填满截图框 针对需求的优化： 1.参考vue-Cropp...
图片无缝循环滚动
07-23
http://blog.csdn.net/folish_audi/article/details/38059281 看讲解
响应式图片无缝切换代码
10-25
响应式图片无缝切换代码
ae图片无缝循环滚动_HTML图片滚动
weixin_29166013的博客
12-27 1921
HTML图片无缝滚动鼠标悬停<!DOCTYPE html> <html> <head> <title>无缝滚动</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} #div1{position: relative;border:1px...
php文字左右平滑滚动代码,javascript实现的左右无缝滚动效果
weixin_35853254的博客
03-22 193
本文实例讲述了javascript实现的左右无缝滚动效果。分享给大家供大家参考，具体如下：前面介绍过图片左右滚动，不过图片是间歇性的一张一张滚动，今天介绍的是几张图片一起进行无缝滚动，这是一个常用的 js 效果。无缝滚动——左右#scroll{width:698px;height:108px;margin:50px auto 0;position:relative;overflow:hidden;...
bootstrap响应式兼容PC和移动端图片无缝滚动效果demo
CodingNoob
09-15 6119
效果如图所示： js代码部分：/** * Created by Administrator on 2017/9/15. */(function(){ var firstDom = $("#zzScroll .item:last"); var scrollWidth = $("#zzScroll .item").innerWidth()+1; var scrollObj
css简单实现横排自适应元素滚动
风烟
08-02 1737
父盒子设置display: flex布局， overflow-x: scroll; 然后子元素设置 flex-shrink: 0; 让他不要变小，就按照父元素窗口元素元素百分比进行， width: 32.4%; padding-right: .1rem;然后设置相应的边距 ...
简单html无缝向上滚动,原生js 一个简单的无缝向上滚动
weixin_42303955的博客
06-03 916
一、需求：1.一个列表，一页显示四条，表格头部固定，自动向上轮播，每次轮播四条即一页。2.鼠标上移停止滚动3.鼠标移走恢复滚动二、原理：1、css：通过position和relative配合，通过改变滚动部分的top值来确定显示当前可见部分盒子的高度写死，为4条列表加起来的高度，overflow设为hidden让溢出部分隐藏掉滚动部分高度自适应，等于所有列表高度(包括添加的虚拟列表)即可注意：滚动...
CSS3实现无缝滚动
热门推荐
努力，追梦的博客
05-03 1万+
无标题文档 @-webkit-keyframes move { 0%{ left:0; } 100% { left:-500px; } } #wrap{ width:500px;height:100px;border:1px solid #000; position:relative;margin:100px auto; overflow:hidden;} #list{ po
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值