zoukankan      html  css  js  c++  java
  • Jquery实现图片上下一张

    注:调试的时候发现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>
    

      

  • 相关阅读:
    正则表达式和re模块
    面向对象基础
    面向对象高级
    网络编程
    collectiontimeossysjson模块
    继承
    封装
    我在吃饭
    111
    关于羽毛球拍
  • 原文地址:https://www.cnblogs.com/Chendaqian/p/3660386.html
Copyright © 2011-2022 走看看