Maison > Article > interface Web > Utilisez jQuery pour implémenter le défilement publicitaire, les fondus d'entrée et de sortie

Utilisez jQuery pour implémenter le défilement publicitaire, les fondus d'entrée et de sortie

php中世界最好的语言original: 2018-04-19 13:54:201979parcourir

Cette fois, je vais vous présenter l'utilisation de jQuery pour implémenter le défilement publicitaire, les fondus d'entrée et de sortie. Quelles sont les précautions concernant l'utilisation de jQuery pour implémenter le défilement publicitaire, les fondus d'entrée et de sortie. out. Ce qui suit est un cas pratique, jetons un coup d'œil.

Vous trouverez ci-dessous le code source pour faire défiler de haut en bas

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

Voici le code source du plug-in jq

/*
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);

Publiez également une autre copie, le script supprimé

/*
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);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication graphique détaillée de la déduplication de tableau JS

Traversée de chaîne JS, interception, sortie, opérations de calcul

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez JS pour renvoyer le code de vérification après 60 secondesArticle suivant：Utilisez JS pour renvoyer le code de vérification après 60 secondes

Articles Liés

Voir plus