//jquery請不要用遠程引入的//動畫效果在谷歌瀏覽器中 無效 其他瀏覽器都實現了<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>test</title>? ? <style type="text/css">? ? * {? ? ? ? padding: 0px;? ? ? ? margin: 0px;? ? }? ??? ? .wrap {? ? ? ? width: 100px;? ? ? ? height: 100px;? ? ? ? overflow: hidden;? ? ? ? margin: 0 auto;? ? ? ? position: relative;? ? }? ??? ? ul {? ? ? ? overflow: hidden;? ? ? ? position: absolute;? ? ? ? left: 0;? ? ? ? top: 0;? ? }? ??? ? li {? ? ? ? float: left;? ? ? ? width: 100px;? ? ? ? height: 100px;? ? ? ? list-style: none;? ? ? ? font-size: 30px;? ? ? ? font-weight: bolder;? ? }? ??? ? .item1 {? ? ? ? background: red;? ? }? ??? ? .item2 {? ? ? ? background: green;? ? }? ??? ? .item3 {? ? ? ? background: orange;? ? }? ??? ? .item4 {? ? ? ? background: blue;? ? }? ??? ? .item5 {? ? ? ? background: black;? ? }? ? </style></head><body>? ? <div>? ? ? ? <ul>? ? ? ? ? ? <li>1</li>? ? ? ? ? ? <li>2</li>? ? ? ? ? ? <li>3</li>? ? ? ? ? ? <li>4</li>? ? ? ? ? ? <li>5</li>? ? ? ? </ul>? ? </div>? ? <script src="jquery.js"></script>? ? <script type="text/javascript" src="js.js">? ? </script></body></html>//以下是js可以直接粘貼運行$(function() {? ? /*為什么我這樣寫，在谷歌里面只會移動一個畫面*/? ? /* li的寬度*/? ? var liw = $('li').width();? ? /* li的個數*/? ? var lin = $('li').length;? ? var index = 0;? ? /* 定時器*/? ? var timer = null;? ? /*給ul設置寬度*/? ? $('ul').css({? ? ? ? width: liw * lin + 'px'? ? });? ? /*每2秒移動一次*/?$('ul').hover(function() {? ? ? ? clearInterval(timer);? ? }, function() {? ? ? ? timer = setInterval(move, 2000);? ? }).trigger('mouseleave');function move() {? ? ? ? index++;? ? ? ? left = index * liw;? ? ? ? if (index == 5) {? ? ? ? ? ? index = 0;? ? ? ? } else {? ? ? ? ? ? $('ul').stop(true, false).animate({? ? ? ? ? ? ? ? /*每次移動的距離*/? ? ? ? ? ? ? ? left: -left? ? ? ? ? ? }, 300);? ? ? ? }? ? };})
jquery動畫在谷歌瀏覽器無效，其他瀏覽器都沒有問題
我家在玉堆
2015-07-30 21:12:29