abstract：本文詳細(xì)介紹了jquery實(shí)現(xiàn)單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧通過jquery的animate實(shí)現(xiàn)上下單行自動(dòng)跳轉(zhuǎn)<script type="text/javascript" src="__ROOT__/Style/H/js/jquery-1.7.2.min.js"><

本文詳細(xì)介紹了jquery實(shí)現(xiàn)單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧

通過jquery的animate實(shí)現(xiàn)上下單行自動(dòng)跳轉(zhuǎn)

<script type="text/javascript" src="__ROOT__/Style/H/js/jquery-1.7.2.min.js"></script>
<style>
  .rool-div{
    height:50px;
    width:700px;
    margin:0 auto;
    position: relative;
    overflow: hidden;
    border:2px solid red;
  }
  .roll{
    height:50px;
    width:700px;
    margin:0 auto;
  }
  .roll span{
    display:block;
    height:50px;
    width:700px;
    line-height:50px;
  }
  a {
    text-decoration:none;
　　　　　display:inline-block;
 }
</style>
<div class="rool-div">
 <div class="roll" id="roll">
   <span><a href="#">1. Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></span>
   <span><a href="#">2. It is a long established fact that a reader will be distracted</a></span>
   <span><a href="#">3. Many desktop publishing packages</a></span>
   <span><a href="#">4. All the Lorem Ipsum generators on the Internet tend to repeat predefined</a></span>
   <span><a href="#">5. The standard chunk of Lorem Ipsum used</a></span>
   <span><a href="#">6. English versions from the 1914 translation by H. Rackham.</a></span>
   <span><a href="#">7. Bu metin deneme ama?l?d?r the standard chunk of Lorem Ipsum used</a></span>
 </div>
</div>
<script>
  (function($){
    $.fn.extend({
      Roll:function(){
        return this.each(function(){
          var n=0;
          $('#roll span a').hover(function(){
            $(this).css('color','red');
          },function(){
            $(this).css('color','green');
          });
          var timername=setInterval(function(){Play()},1000);
          $("#roll").hover(
              function()
              {
                clearInterval(timername);
              },
              function()
              {
              timername=setInterval(function(){Play()},1000);
              });
          function Play(){
            if($("#roll>span").length>n)
              n++;
            else
              n=1;
            $("#roll").animate({'marginTop':-($("#roll span" ).height())*(n-1)});
          }
        });
      }
    })
  })(jQuery);
</script>

二  通過scrollLeft函數(shù)實(shí)現(xiàn)自動(dòng)左右移動(dòng)（谷歌瀏覽器偶爾不能移動(dòng)）

<style type="text/css">
#demo {overflow:hidden;width:740px; }
#indemo { float: left; width: 800%;}
#demo1 { float: left; }
#demo2 { float: left;margin-left:7px;}
</style>
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
<div id="demo">
  <div id="indemo">
    <div id="demo1">
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
    </div>
    <div id="demo2"></div>
  </div>
</div>
<script>
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
$("#demo2").text($("#demo1").clone());
$("#demo2").clone();
function Marquee(){
  if(tab2.offsetWidth-tab.scrollLeft<=0)
  tab.scrollLeft-=tab1.offsetWidth
  else{
  tab.scrollLeft++;
  }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>

更多關(guān)于jquery實(shí)現(xiàn)文字單行橫移或翻轉(zhuǎn)請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）其他文章！