suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie jQuery, um das Scrollen und Ein- und Ausblenden von Werbung zu implementieren

Verwenden Sie jQuery, um das Scrollen und Ein- und Ausblenden von Werbung zu implementieren

php中世界最好的语言
php中世界最好的语言Original
2018-04-19 13:54:202014Durchsuche

Dieses Mal werde ich Ihnen die Verwendung von jQuery zum Implementieren des Scrollens und Ein- und Ausblendens von Werbung vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von jQuery zum Implementieren des Scrollens und Ein- und Ausblendens von Werbung? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Unten finden Sie den Quellcode zum Auf- und Abscrollen 

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net 向上滚动代码带上下翻按钮滚动特效</title>
<style type="text/css">
body{ color:#333; font-size:13px;}
h3,ul,li{margin:0;padding:0; list-style:none;}
.scrollbox{ width: 340px; margin: 0 auto; overflow: hidden; border: 1px solid #CFCFCF; padding: 10px; }
#scrollp{width:340px;height:359px; overflow:hidden;}/*这里的高度和超出隐藏是必须的*/
#scrollp li{max-height:90px; width:300px; padding:0 20px;background:url(ico-4.gif) no-repeat 10px 23px; overflow:hidden; vertical-align:bottom; zoom:1; border-bottom:#B7B7B7 dashed 1px;}
#scrollp li h3{ height:24px; padding-top:13px; font-size:14px; color:#353535; line-height:24px; width:300px;}
#scrollp li h3 a{color:#353535; text-decoration:none}#scrollp li h3 a:hover{ color:#F00}
#scrollp li p{ height:36px; width:300px; color:#416A7F; line-height:18px; overflow:hidden}
#scrollp li p a{ color:#416A7F; text-decoration:none}
.scroltit{ height:26px; line-height:26px; padding-bottom:4px; margin-bottom:4px;}
.scroltit h3{ width:100px; float:left;}
.scroltit .updown{float:right; width:32px; height:22px; margin-left:4px}
#but_up{ background:url(up.gif) no-repeat 0 0; text-indent:-9999px}
#but_down{ background:url(down.gif) no-repeat 0 0; text-indent:-9999px}
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}
.test{
  margin-top: 50px;
  background: #CCCCCC;
  border: .5px solid #ddd;
  overflow: hidden;
  height: 44px;
  width: 100px;
}
.test li{
  height: 44px;
  width: 100%;
  float: left;
  line-height: 44px;
  font-size: 18px;
  border-top: .5px solid #ddd;
}
</style>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jq_scroll.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#scrollp").Scroll({line:1,speed:500,timer:2000,up:"but_up",down:"but_down"});
  (function(){
    var lineH = $(".test").find("li:first").height();
    var appendTo = function(){
      $(".test").find("li:first").appendTo($(".test"));
      $(".test ul").css("marginTop", 0);
    };
    var animate = function(){
      $(".test ul").eq(0).animate({
        marginTop: -lineH
      },500,appendTo)
    };
    var delayer = setInterval(animate, 2000);
  })()
});
</script>
</head>
<body>
<p align="center"><strong>特效效果如下：</strong></p>
<p> </p>
<p class="scrollbox">
  <p id="scrollp">
    <ul>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">移动娱乐业务突飞</a></h3></li>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">不停转动向上滚动可控制向上向下滚动特效</a></h3> <p>p CSS JS自动不断向上一个一个滚动可控制向上向下滚动特效... </p></li>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">全国涂料总产量呈现直线下滑态势</a></h3> <p>我国涂料工业将面临涂料消费税征收全面铺开，环保压力持续增加，2015年的形势不容乐观... </p></li>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">镂空渔网超吸睛</a></h3> <p>镂空罩衫，短短的版型穿起来显高又俏皮，内搭长款连衣裙，非常大方哦... </p></li>
      <li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">主题创业街亮相</a></h3> <p>目前已有包括咖啡厅、酒吧、餐厅、瑜伽室在内的8家商铺入驻该火车... </p></li>
    </ul>
  </p>
  <p class="scroltit"><p class="updown" id="but_down">向上</p><p class="updown" id="but_up">向下</p></p>
</p>
<p class="test">
  <ul>
    <li>sections1</li>
    <li>sections2</li>
    <li>sections3</li>
    <li>sections4</li>
  </ul>
</p>
</body>
</html>

Das Folgende ist der Quellcode des JQ-Plug-Ins 

/*
jQ向上滚动带上下翻页按钮
*/
(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({
              //当滚动的元素height为max-height时，实时获取元素height
                marginTop:-_this.find("li:first").height()
            },speed,function(){
                // for(i=1;i<=line;i++){
                //     _this.find("li:first").appendTo(_this);
                // }
                _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:-_this.find("li:first").height()});
            _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);

Veröffentlichen Sie auch eine weitere Kopie, das gelöschte Skript 

/*
jQ向上滚动带上下翻页按钮
*/
(function($){
$.fn.extend({
    txtScroll: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");
            speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）
            timer=opt.timer?parseInt(opt.timer,10):2000; //滚动的时间间隔（毫秒）
        //滚动函数
        var scrollUp=function(){
            _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
            _this.animate({
                //当滚动的元素height为max-height时，实时获取元素height
                marginTop: -_this.find("li:first").height()
            },speed,function(){
                _this.find("li:first").appendTo(_this);
                _this.css({"marginTop":0});
                _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
            });
        }
        //Shawphy:向下翻页函数
        var scrollDown=function(){
            _btnDown.unbind("click",scrollDown);
            _this.find("li:last").show().prependTo(_this);
            _this.css({marginTop:-_this.find("li:first").height()});
            _this.animate({
                marginTop:0
            },speed,function(){
                _btnDown.bind("click",scrollDown);
            });
        }
        //Shawphy:自动播放
        var autoPlay = function(){
            if(timer) setIntervalT = window.setInterval(scrollUp,timer);
        };
        var autoStop = function(){
            if(timer)window.clearInterval(setIntervalT);
        };
         //鼠标事件绑定
        _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);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte grafische Erklärung der JS-Array-Deduplizierung

JS-String-Traversal, Abfangen, Ausgabe, Berechnungsoperationen

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um das Scrollen und Ein- und Ausblenden von Werbung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie JS, um den Bestätigungscode nach 60 Sekunden erneut zu sendenNächster Artikel：Verwenden Sie JS, um den Bestätigungscode nach 60 Sekunden erneut zu senden

In Verbindung stehende Artikel

Mehr sehen