为了账号安全,请及时绑定邮箱和手机立即绑定

jquery动画在谷歌浏览器无效,其他浏览器都没有问题

/ 猿问

jquery动画在谷歌浏览器无效,其他浏览器都没有问题

我家在玉堆 2015-07-30 21:12:29

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

        }

    };

})




查看完整描述

目前暂无任何回答

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信