Jquery實現圖片上下一張

時間 2019-12-13

原文原文鏈接

注：調試的時候發現ff下有兼容性問題,把jquery換成4.4版本就沒問題了,問題應該在e.offseX上ff不支持此屬性,以圖片中間寬度爲界限,鼠標移動在左邊點擊跳轉到一個連接,鼠標移動右邊點擊跳轉到另外一個連接.javascript

完整代碼css

<!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>

相關標籤/搜索