javascript实现滚动效果代码整理_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:48:01

javascript实现滚动效果代码整理_javascript技巧

javascript实现滚动效果代码整理_javascript技巧:1.先写两个最常用最简洁的滚动代码代码如下：水平滚动：水平滚动字幕内容垂直滚动：垂直滚动字内容 2.平稳不间断滚动代码如下: var tm=null function newsScroll() { var scrollimg=document.getElementById(scroll

推荐度：

点击下载本文 文档为doc格式

导读javascript实现滚动效果代码整理_javascript技巧:1.先写两个最常用最简洁的滚动代码代码如下：水平滚动：水平滚动字幕内容垂直滚动：垂直滚动字内容 2.平稳不间断滚动代码如下: var tm=null function newsScroll() { var scrollimg=document.getElementById(scroll

1.先写两个最常用最简洁的滚动代码
代码如下：
水平滚动：
水平滚动字幕内容
垂直滚动：
垂直滚动字内容
2.平稳不间断滚动
代码如下:

var tm=null
function newsScroll() {
var scrollimg=document.getElementById("scroll")
if(scrollimg.parentNode.scrollTop!=(scrollimg.clientHeight/2))
scrollimg.parentNode.scrollTop++;
else
scrollimg.parentNode.scrollTop=0
}
window.onload=function() {
tm=setInterval('newsScroll()',25)
}
function stop()
{
clearInterval(tm)
}
function start()
{
tm=setInterval('newsScroll()',25)
}

/* stop() start() 不能和调用ID在同一个容器内，如容器没默认高度要制定高度*/

3 有停留滚动
代码示例：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;} 
</style> 
</ script> 
 
(function($){ 
$.fn.extend({ 
Scroll:function(opt,callback){ 
//参数初始化 
if(!opt) var opt={}; 
var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮 
var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮 
var timerID; 
var _this=this.eq(0).find("ul:first"); 
var lineH=_this.find("li:first").height(), //获取行高 
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度 
speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒） 
timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒） 
if(line==0) line=1; 
var upHeight=0-line*lineH; 
//滚动函数 
var scrollUp=function(){ 
_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定 
_this.animate({ 
marginTop:upHeight 
},speed,function(){ 
for(i=1;i<=line;i++){ 
_this.find("li:first").appendTo(_this); 
} 
_this.css({marginTop:0}); 
_btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件 
}); 
} 
//Shawphy:向下翻页函数 
var scrollDown=function(){ 
_btnDown.unbind("click",scrollDown); 
for(i=1;i<=line;i++){ 
_this.find("li:last").show().prependTo(_this); 
} 
_this.css({marginTop:upHeight}); 
_this.animate({ 
marginTop:0 
},speed,function(){ 
_btnDown.bind("click",scrollDown); 
}); 
} 
//Shawphy:自动播放 
var autoPlay = function(){ 
if(timer)timerID = window.setInterval(scrollUp,timer); 
}; 
var autoStop = function(){ 
if(timer)window.clearInterval(timerID); 
}; 
//鼠标事件绑定 
_this.hover(autoStop,autoPlay).mouseout(); 
_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定 
_btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); 
} 
}) 
})(jQuery); 
$(document).ready(function(){ 
$("#scrollDiv").Scroll({line:1,speed:500,timer:1000,up:"btn1",down:"btn2"}); 
}); 
</ script> 
</head> 
<body> 
<p>多行滚动演示：</p> 
 
 
<li>这是公告标题的第一行</li> 
<li>这是公告标题的第二行</li> 
<li>这是公告标题的第三行</li> 
<li>这是公告标题的第四行</li> 
<li>这是公告标题的第五行</li> 
<li>这是公告标题的第六行</li> 
<li>这是公告标题的第七行</li> 
<li>这是公告标题的第八行</li> 
 
 
向前 向后 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
4:一个简单的滚动代码学习制作示例

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无间断循环滚动效果</title> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 
<style type="text/css"> 
.scroll{ 
height:20px; 
overflow:hidden; 
font-size:12px; 
line-height:20px; 
border:#A5A5A5 1px dotted; 
width:120px; 
margin:0px auto; 
text-align:center; 
} 
</style> 
</pre>输出滚动内容 <BR>s.innerHTML+=slen[0]; <BR>timer2=setInterval(scrollstart,3000); //开始滚动 <BR>s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} //鼠标经过，停止滚动，改变样式 <BR>s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} //鼠标移开，恢复滚动 <BR>} <BR>//开启滚动效果 <BR>function scrollstart(){ <BR>if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} //滚动内容到底时，重置内容位置 <BR>timer=setInterval(scrollexec,30); //执行滚动动画效果 <BR>} <BR>//滚动动画效果 <BR>function scrollexec(){ <BR>if(sn<20){ <BR>sn++; <BR>s.scrollTop++; <BR>}else{ <BR>sn=0; <BR>clearInterval(timer); <BR>} <BR>} <BR>//通过ID获取对象 <BR>function getid(id){return document.getElementById(id);} <BR>//网页加载后，执行初始化 <BR>window.onload=scrollInit; <BR> <BR>原理解析： <BR>1、首先给容器设定高度或宽度，比如div，设置div高20px;overflow:hidden； <BR>2、容器高度设定后，内容的高度超出20px，超过部分溢出，被隐藏，scrollTop属性可用，这一点可以用overflow:scroll来看效果； <BR>3、改变容器的scrollTop（上下滚动）或scrollLeft（左右滚动）属性的值，让内容移动位置（滚动的原理）； <BR>4、到滚动的高度scrollTop大于或等于内容的高度时，设置scrollTop=0，让内容返回原来的位置，重新开始滚动，无间断循环滚动效果就出现了。

</p><p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div>    
<div class="downbox clearfix">
    <div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div>
    <div class="txt">
        <h4>javascript实现滚动效果代码整理_javascript技巧</h4>
        <div class="co">javascript实现滚动效果代码整理_javascript技巧:1.先写两个最常用最简洁的滚动代码 代码如下： 水平滚动： 水平滚动字幕内容 垂直滚动： 垂直滚动字内容 2.平稳不间断滚动  代码如下:  var tm=null function newsScroll() { var scrollimg=document.getElementById(scroll</div>
        <div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div>
    </div>
    <div class="btn">
        <a href="javascript:;"  class="html2word" data-model="article" data-id="abeddg" title="文档下载">
            <b>点击下载本文</b>
            <span>文档为doc格式</span>
        </a>
    </div>
</div>
              
       <script>keji_detail_ga('article_content_bottom');</script> 
                <div class="tvideo_tag">
            标签：
                        <a href="/tlist-139/">设置</a>
                        <a href="/tlist-9472/">技巧</a>
                        <a href="/tlist-57953/">实现</a>
                    </div>
                
            
            <div class="tvideo_box tvideo_box_tab"> 
                    <div class="hd">
                        <ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul>
                    </div>
                    <div class="bd">
                        <ul class="ult_jpic clearfix">
                            <script>get_hot_jiaodian_content('wz_hot_jiaodian',33,'hot',1);</script>
                            
                            
                        </ul>
                        
                    </div>
            </div>
            
        </div>
        
        
        <div class="ult_zt">
            <script>keji_detail_ga('article_right_top');</script>
            <div class="ult_ztbox">
                <h4>最新推荐</h4>
                <ul class="tvideo_r_a clearfix">
                    <script>get_detail_right('wz_right_new',33,'')</script>
                
                
                
            </ul>
            </div>
            <script>keji_detail_ga('article_right_middle');</script>
            
            <div class="ult_ztbox">
                <h4>猜你喜欢</h4>
                <ul class="telist_rb clearfix">
                    <script>get_detail_right('wz_right_love',33,'')</script>
                    
                   
                    
                </ul>
            </div>
           
            <script>keji_detail_ga('article_right_new_bottom');</script>
            
           
            <div class="ult_ztbox">
                <h4>热门推荐</h4>
                <ul class="tvideo_r_b clearfix">
                    <script>get_detail_right('wz_right_hot',33,'')</script>
                    
                </ul>
            </div>
           
            <script>keji_detail_ga('article_right_bottom');</script>
        </div>
        
        <div style="display:none"><a href="https://www.51dongshi.net/wzztf/ab/abeddg/">专题</a>
</div>
    </div>

</div>
<script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script>
<script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script>
<style>
#qrcode{padding: 15px;background: #fff;}
</style>
<div id="qrcode" style="display: none"></div>
<script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfabeddg.html");</script>
<iframe src="https://hits.51dongshi.net/?biao=ho_article&id=960224" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe>
<script src="https://js.51dongshi.net/js/shHighlighter.js"></script>
<link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css">
<script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script>
<script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script>
<div style="display:none"><script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
    </div>

<div class="footer">
    <div class="m_box">
        <div class="footer_in"> 
            <a href="#" target="_blank">产品服务</a>
            <a href="#" target="_blank">发展历程</a>
            <a href="#" target="_blank">企业资讯</a>
            <a href="#" target="_blank">企业文化</a>
            <a href="#" target="_blank">关于我们</a>
            <a href="#" target="_blank">加入我们</a>
            <a href="#" target="_blank">联系我们</a>
            <a href="#" target="_blank">网站导航</a>
            <a href="#" target="_blank">网站律师</a>
        </div>
        <ul class="ftrlist">
            <li>
                 <a rel="nofollow" href="https://www.itrust.org.cn" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a>
             </li>
             <li>
                 <a rel="nofollow" href="https://www.12377.cn/" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a>
             </li>
             <li>
                 <a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a>
             </li>
             <li>
                 <a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a>
             </li>
             <li class="last">
                 <a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p>
                 </a>
             </li>
        </ul>
        <div class="footer_co"> 
            <a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo.png" alt="动视"></a>
            <p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p>
            <p>
                <a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a>
            </p>
            <p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p>
            
        </div>
    </div>
</div>

</script>
<script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script>

</body>
</html>