Jquery实现图片上下一张

时间：2020-12-24 09:52:35

注：调试的时候发现ff下有兼容性问题,把jquery换成4.4版本就没问题了,问题应该在e.offseX上ff不支持此属性,以图片中间宽度为界限,鼠标移动在左边点击跳转到一个链接,鼠标移动右边点击跳转到另一个链接.

完整代码

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $(".rootclass").mousemove(function (e) {

                var positionX = e.offsetX || e.layerX || 0;

                if (positionX <= $(this).width() / 2) {

                    this.style.cursor = 'url("pre.png"),auto';

                    $(this).attr('title', 'pre');

                    $(this).parent().attr('href', $(this).attr('left'));

                } else {

                    this.style.cursor = 'url("next.png"),auto';

                    $(this).attr('title', 'next');

                    $(this).parent().attr('href', $(this).attr('right'));

                }

            });

        });

    </script>

    <style type="text/css">

        .rootclass {

            border: none;

            position: relative;

        }

    </style>

</head>

<body>

    <a href="#">

        <img src="http://img1.gtimg.com/finance/pics/hv1/161/22/1562/101574821.jpg" class="rootclass" left="baicu.com" right="g.cn" />

    </a>

</body>

</html>

　　

相关文章