recherche

Maison >interface Web >js tutoriel >jQuery implémente une étiquette de sélection simulée effect_jquery

jQuery implémente une étiquette de sélection simulée effect_jquery

WBOY
WBOYoriginal
2016-05-16 15:50:201220parcourir

Chapiteau

Imitez l'effet de sélection sous IE, déplacez la souris vers le haut pour mettre en pause. Le principe principal de la formation d'un anneau est qu'une fois que chaque image est jugée comme étant en dehors de la fenêtre d'affichage, elle est ajoutée à la fin, et l'ajout et le pré-pend sont utilisés pour simuler le push() et le shift() du tableau.

Le code est le suivant :

HTML

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>模拟marquee标签效果的简单实现</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.codetker.marquee.js"></script>
</head>

<body>
  <div class="wrap">
    <div class="marquee">
      <ul>
        <li>
          <a href="" title="">1
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">2
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">3
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">4
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">5
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">6
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">7
            <img src="images/test.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="" title="">8
            <img src="images/test.jpg" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>
<script type="text/javascript">
  $(document).ready(function(){
    $(".marquee").marquee();
  });
</script>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body{
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%;
}
.wrap{
  font-family:"微软雅黑","宋体", Times, "Times New Roman", serif;
  font-size:14px;
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%;
  overflow:hidden;
}
.marquee{
  margin: 0 auto;
  width: 960px;
  height: 300px;
  overflow: hidden;
}
.marquee ul{
  width: 10000px;
}
.marquee ul li{
  float: left;
  width: 500px;
  text-align: center;
}
.marquee ul li a{

}
.marquee ul li a:hover{
  color: red;
}

JavaScript

/*
 * boxScroll 0.1
 * 兼容IE8,FF,Chrome等常见浏览器
 */
 ;(function($,window,document,undefined){
   //定义构造函数
   var BoxObj=function(ele,opt){
     this.$element=ele; //最外层对象
     this.defaults={
       'style': 0 ,//滚动样式选择,默认为普通效果
       'speed': 1 ,//默认为1s
       'direction': 'left'//默认为向左边滚动
     },
   
     this.options=$.extend({},this.defaults,opt );
     //这里可以添加一些通用方法  
   }

   //给构造函数添加方法
   BoxObj.prototype={

     commonScroll:function(){
       //接收对象属性
       var obj=this.$element;
       var boxWindow=$(this.$element).children('ul');
       var speed=this.defaults.speed;
       var style=this.defaults.style;
       var direction=(this.defaults.direction=='left')&#63; 1 : -1;
       var lists=$(boxWindow).children('li');
       var len=$(lists).length;
       var boxWidth=$(lists[0]).width();
       var timer;
       var step=(this.defaults.direction=='left')&#63; 0 : boxWidth;

       function move(style,speed,direction){
         if (style==0) {
           if (direction==1) {
             step+=1;
             if(step>boxWidth){
               step-=boxWidth;
               $(boxWindow).append($(boxWindow).children().eq(0));//将第一项放在最后，相当于push(0),shift()
             }else{
               $(obj).scrollLeft(step);
             }
           }else if (direction== -1) {
             step-=1;
             if(step<0){
               step+=boxWidth;
               $(boxWindow).prepend($(boxWindow).children().eq(len-1));//将最后一项放在最前，相当于pop(last),unshift()
             }else{
               $(obj).scrollLeft(step);
             }
           }else{//不执行之外的数值

           }
         }else{//留待扩展,多了改switch

         }
       }

       timer=setInterval(function(){
         move(style,speed,direction);
       },10*speed); //由于时间取得小，肉眼就看不出来

      $(lists).each(function() {//鼠标移上暂停
        $(this).hover(function() {
          clearInterval(timer);
        }, function() {
          clearInterval(timer);
          timer=setInterval(function(){
             move(style,speed,direction);
           },10*speed);
        });
      });
     }
       
   }

   $.fn.marquee=function(options){
     //创建实体
     var boxObj=new BoxObj(this,options);
     //用尾调的形式调用对象方法
     return boxObj.commonScroll();
   }
 })(jQuery,window,document);

Pour un téléchargement détaillé, veuillez consulter https://github.com/codetker/myMarquee

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

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：Explication détaillée de la méthode bind() de jQuery_jqueryArticle suivant：Explication détaillée de la méthode bind() de jQuery_jquery

Articles Liés

Voir plus