立即注册 登录
返回首页

uid:83710的个人空间

日志

JQuery实现京东商品鼠标悬停局部放大预览

已有 2841 次阅读2015-6-25 16:53 | 京东

   多么好的周末、又睡过去了半天。睁开眼睛的第一件事就是手机开机、平板开机、电脑开机、闹钟关机。。。多么痛的领悟。。。昨天晚上下载了一个JQuery插件，功能是仿京东商品局部放大预览的效果。嗯、这个功能很强大，不过开源的人们很善良。随便就可以下载到源码。前端渣一样的人很抵触这些东西，况且审美还有问题。。。不过还是好奇这个东西是怎么写的，边查边读也算是勉强看明白了。那下面就在原作者代码的基础上加一些我自己的注视吧！（PS：如有侵权请告知、不过应该不会吧、我们不生产代码我们只是代码的搬运工！）。

    正文：首先看一下效果、好的网站没有美工是做不到的，此Demo把相同的图片分为small（小）、mid（中）、big（大）三种分辨率。


    这种画风对于那些正常上淘宝、京东的土豪们来说应该是相当的熟悉了。实现这个需要用到CSS样式与JQuery脚本的结合使用。

    思路：
    
    1、首先要分图层，不同的模块需要建立对应的
    2、图片分文三种分辨率分别用来：图片菜单、预览图片、局部放大预览图片
    3、设置对应图片的鼠标进入、鼠标悬停、鼠标离开、鼠标单击事件。
    4、CSS修饰

    细节介绍：
        1、首先来说一下文件结构、一张图片分为三种分辨率分别放到small、mid、big文件夹中并且图片的名称需要一一对应。（PS：图片名称一致会使small、mid、big切换时简便），页面中引入JQuery脚本。image文件夹中放置上翻、下翻按钮的图片样式。


        2、然后用HTML中的、<ul><li></li></ul>、<img></img>、<a></a>等标签把图层结构搭起来

        <div class="preview">
            /* hid图片预览图层 */ 
            <div id="vertical" class="bigImg">
                /* 预览图 */ 
                <img src="mid/05.jpg" width="400" height="400" alt="" id="midimg" />
                /* 图片选择器 */  
                <div style="display:none;" id="winSelector">
           

            /* 图片菜单图层 */  
            <div class="smallImg">
                /* 上翻按钮 */      
                <div class="scrollbutton smallImgUp disabled">
                /* 全部的图片缩略图 */  
                <div id="imageMenu">
                    <ul>
                        <li id="onlickImg"><img src="small/05.jpg" width="68" height="68" alt="美女" /></li>
                        <li><img src="small/02.jpg" width="68" height="68" alt="美女" /></li>
                        <li><img src="small/03.jpg" width="68" height="68" alt="美女" /></li>
                        <li><img src="small/04.jpg" width="68" height="68" alt="美女" /></li>
                        <li><img src="small/01.jpg" width="68" height="68" alt="美女" /></li>
                        <li><img src="small/06.jpg" width="68" height="68" alt="美女" /></li>
                        <li><img src="small/04.jpg" width="68" height="68" alt="美女" /></li>
                    </ul>
               
                /* 下翻按钮 */  
                <div class="scrollbutton smallImgDown">
           
            /* big局部预览图层 */  
            <div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="" />
       
 
        
        以上就是全部HTML结构了 、没有什么好说的。

        3、CSS样式
            这是一个很重要的部分、删除了一些没用的代码后，光样式就有126行，不过用到的属性都差不多，下面贴出全部的CSS样式并添加了对应样式的说明 。

        <style type="text/css">
        body, div, p, span, form, iframe, table, td, th, input, textarea, button, label, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6 {
            margin: 0;
            padding: 0;
        }

        ul, ol, li, dl {
            list-style-type: none; /*ul隐藏头符号*/
        }

        img {
            border: 0; /* 设置边框宽度为0px */
        }

        fieldset, button, input, select, option {
            vertical-align: middle; /*垂直居中*/
            font: 12px/18px "宋体",arial,sans-serif;
        }

        /* 设置预览图与菜单图的大小边距 */
        .preview {
            width: 400px;
            height: 465px;
            margin: 50px 0px 0px 150px;
        }
        /* smallImg、设置图片菜单的大小以及边距，浮动方向 */
        .smallImg {
            position: relative;
            height: 52px;
            margin-top: 1px;
            background-color: #F1F0F0;
            padding: 6px 5px;
            width: 390px;
            overflow: hidden;
            float: left;
        }

        .scrollbutton {
            width: 14px;
            height: 50px;
            overflow: hidden; /* 隐藏滚动条 */
            position: relative; /* 图层不可重叠、以float方向流动 */
            float: left; /* 向左流动 */
            cursor: pointer; /* 鼠标指针变成手的样式 */
        }

            /* 根据类选择器设置滚动按钮图片样式 */
            .scrollbutton.smallImgUp, .scrollbutton.smallImgUp.disabled {
                background: url(images/d_08.png) no-repeat;
            }

            .scrollbutton.smallImgDown, .scrollbutton.smallImgDown.disabled {
                background: url(images/d_09.png) no-repeat;
                margin-left: 375px; /* 距离左边距375像素 */
                margin-top: -50px;
            }

        #imageMenu {
            height: 50px;
            width: 360px;
            overflow: hidden;
            margin-left: 0;
            float: left;
        }

            #imageMenu li {
                height: 50px;
                width: 60px;
                overflow: hidden;
                float: left;
                text-align: center;
            }

                #imageMenu li img {
                    width: 50px;
                    height: 50px;
                    cursor: pointer;
                }

                /* 当鼠标悬停时加载此样式，鼠标离开后取消样式 */
                #imageMenu li#onlickImg img, #imageMenu li:hover img {
                    width: 44px;
                    height: 44px;
                    border: 3px solid #959595; /* 菜单选中的样式 */
                }
        /* bigImg */
        .bigImg {
            position: relative;
            float: left;
            width: 400px;
            height: 400px;
            overflow: hidden;
        }

            .bigImg #midimg {
                width: 400px;
                height: 400px;
            }

            .bigImg #winSelector {
                width: 235px;
                height: 210px;
            }

        #winSelector {
            position: absolute;
            cursor: crosshair; /* 鼠标样式为交叉十字 */
            filter: alpha(opacity=15); /* IE浏览器中的透明度 */
            -moz-opacity: 0.15; /* 火狐浏览器中透明度 */
            opacity: 0.15; /* 透明度 */
            background-color: #000; /* 设置透背景颜色 */
            border: 1px solid #fff;
        }
        /* bigView */
        #bigView {
            position: absolute; /* 图层绝对定位，根据z-index优先级可层叠显示 */
            border: 1px solid #959595; /* 设置边框样式 */
            overflow: hidden; /* 隐藏滚动条 */
            z-index: 999; /* 图层优先级、值越大就优先显示在上层 */
        }

            #bigView img {
                position: absolute;
            }
    </style> 

    4、下面是JQuery来填写事件

    <script type="text/javascript">
        $(document).ready(function () {
            // 图片菜单上下滚动
            var count = $("#imageMenu li").length - 5; /* 显示 6 个 li标签内容 */
            var interval = $("#imageMenu li:first").width();
            var curIndex = 0;
            
            /* 注册单击事件 */
            $('.scrollbutton').click(function () {
                if ($(this).hasClass('disabled')) return false;    // 如果有disabled样式则返回false

                if ($(this).hasClass('smallImgUp'))--curIndex;
                else ++curIndex;

                $('.scrollbutton').removeClass('disabled');    // 移除样式
                if (curIndex == 0) $('.smallImgUp').addClass('disabled');
                if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');

                // 停止当前动画直接调转到动画结束状态并且执行600毫秒内动画向左移动 （-curIndex * interval）像素
                $("#imageMenu ul").stop(false, true).animate({ "marginLeft": -curIndex * interval + "px" }, 600);
            });
            /* 这一段代码是为了兼容IE6浏览器，如果不在IE6上使用则没有这一段代码亦无妨
            // 解决 ie6 select框 问题
            $.fn.decorateIframe = function (options) {
                if ($.browser.msie && $.browser.version < 7) {
                    var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
                    $(this).each(function () {
                        var $myThis = $(this);
                        //创建一个IFRAME
                        var divIframe = $("<iframe />");
                        divIframe.attr("id", opts.iframeId);
                        divIframe.css("position", "absolute");
                        divIframe.css("display", "none");
                        divIframe.css("display", "block");
                        divIframe.css("z-index", opts.iframeZIndex);
                        divIframe.css("border");
                        divIframe.css("top", "0");
                        divIframe.css("left", "0");
                        if (opts.width == 0) {
                            divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                        }
                        if (opts.height == 0) {
                            divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                        }
                        divIframe.css("filter", "mask(color=#fff)");
                        $myThis.append(divIframe);
                    });
                }
            }
            $.fn.decorateIframe.defaults = {
                iframeId: "decorateIframe1",
                iframeZIndex: -1,
                width: 0,
                height: 0
            }


            //放大镜视窗
            $("#bigView").decorateIframe();*/
            //点击到中图
            var midChangeHandler = null;

            /* 给图片菜单绑定单击事件 */
            $("#imageMenu li img").bind("click", function () {
                if ($(this).attr("id") != "onlickImg") {    // 如果事件源的Id属性不是"onlickImg"
                    midChange($(this).attr("src").replace("small", "mid")); // 参数：其实是改变了图片的路径，把小图的路径活成了mid中图的路径
                    $("#imageMenu li").removeAttr("id");    // 移除id属性、为了设置中图显示的图片
                    $(this).parent().attr("id", "onlickImg");   // 设置事件源父级id属性为"onlickImg"
                }
            }).bind("mouseover", function () {  //  绑定鼠标悬停事件
                if ($(this).attr("id") != "onlickImg") {
                    window.clearTimeout(midChangeHandler);  // 清除window.setTimeout事件
                    midChange($(this).attr("src").replace("small", "mid")); // 当鼠标悬停与菜单图片上时把预览的中图修改为悬停的图片
                    $(this).css({ "border": "3px solid #959595" }); // 修改边框的样式为选中
                }
            }).bind("mouseout", function () {   // 鼠标离开事件
                if ($(this).attr("id") != "onlickImg") {
                    $(this).removeAttr("style");    // 移除样式
                    midChangeHandler = window.setTimeout(function () {  // 1s后执行此方法修改图片路径
                        midChange($("#onlickImg img").attr("src").replace("small", "mid"));
                    }, 1000);
                }
            });
            function midChange(src) {
                $("#midimg").attr("src", src).load(function () {
                    changeViewImg();
                });
            }
            //大视窗看图
            function mouseover(e) {
                if ($("#winSelector").css("display") == "none") {   // 如果是隐藏则显示该图层
                    $("#winSelector,#bigView").show();
                }
                $("#winSelector").css(fixedPosition(e));
                e.stopPropagation();    // 组织事件冒泡
            }
            function mouseOut(e) {
                if ($("#winSelector").css("display") != "none") {
                    $("#winSelector,#bigView").hide();
                }
                e.stopPropagation();
            }
            $("#midimg").mouseover(mouseover); //中图事件
            $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件

            var $divWidth = $("#winSelector").width(); //选择器宽度
            var $divHeight = $("#winSelector").height(); //选择器高度
            var $imgWidth = $("#midimg").width(); //中图宽度
            var $imgHeight = $("#midimg").height(); //中图高度
            var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

            function changeViewImg() {
                $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));    // 替换文字
            }
            changeViewImg();
            $("#bigView").scrollLeft(0).scrollTop(0);
            function fixedPosition(e) {
                if (e == null) {
                    return;
                }
                var $imgLeft = $("#midimg").offset().left; //中图左边距
                var $imgTop = $("#midimg").offset().top; //中图上边距
                X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
                Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
                X = X < 0 ? 0 : X;
                Y = Y < 0 ? 0 : Y;
                X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
                Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;

                if ($viewImgWidth == null) {
                    $viewImgWidth = $("#bigView img").outerWidth();
                    $viewImgHeight = $("#bigView img").height();
                    if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                        $viewImgWidth = $viewImgHeight = 800;
                    }
                    $height = $divHeight * $viewImgHeight / $imgHeight;
                    $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
                    $("#bigView").height($height);
                }
                var scrollX = X * $viewImgWidth / $imgWidth;
                var scrollY = Y * $viewImgHeight / $imgHeight;
                $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
                $("#bigView").css({ "top": 75, "left": $(".preview").offset().left + $(".preview").width() + 15 });

                return { left: X, top: Y };
            }
        });
    </script>         

PS：以上就是该功能的全部代码。实现的方法有千万种，如果有更好的方法欢迎交流！

路过
鸡蛋
鲜花
握手
雷人
收藏 邀请 举报

全部作者的其他最新日志

评论 (0 个评论)

uid:83710

手机版|小黑屋|51黑电子论坛 |51黑电子论坛6群 QQ 管理员QQ:125739409;技术交流QQ群281945664

Powered by 单片机教程网

返回顶部