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>
    

      

  • 相关阅读:
    css浮动
    css各种元素最原始的表现
    css3 unset属性
    js类式继承
    javascript编写Tab选项卡
    javaScript事件冒泡
    javascript中的&&与||的用法
    比较好的前端网站
    原生js开发tab选项卡之闭包
    冒泡排序(中级版)
  • 原文地址:https://www.cnblogs.com/Chendaqian/p/3660386.html
Copyright © 2011-2022 走看看