久久久久久久999_99精品久久精品一区二区爱城_成人欧美一区二区三区在线播放_国产精品日本一区二区不卡视频_国产午夜视频_欧美精品在线观看免费

立即注冊 登錄
返回首頁

uid:83710的個人空間

日志

JQuery實現京東商品鼠標懸停局部放大預覽

已有 2976 次閱讀2015-6-25 16:53 | 京東

   多么好的周末、又睡過去了半天。睜開眼睛的第一件事就是手機開機、平板開機、電腦開機、鬧鐘關機。。。多么痛的領悟。。。昨天晚上下載了一個JQuery插件，功能是仿京東商品局部放大預覽的效果。嗯、這個功能很強大，不過開源的人們很善良。隨便就可以下載到源碼。前端渣一樣的人很抵觸這些東西，況且審美還有問題。。。不過還是好奇這個東西是怎么寫的，邊查邊讀也算是勉強看明白了。那下面就在原作者代碼的基礎上加一些我自己的注視吧！（PS：如有侵權請告知、不過應該不會吧、我們不生產代碼我們只是代碼的搬運工�。�

    正文：首先看一下效果、好的網站沒有美工是做不到的，此Demo把相同的圖片分為small（�。�、mid（中）、big（大）三種分辨率。


    這種畫風對于那些正常上淘寶、京東的土豪們來說應該是相當的熟悉了。實現這個需要用到CSS樣式與JQuery腳本的結合使用。

    思路：
    
    1、首先要分圖層，不同的模塊需要建立對應的
    2、圖片分文三種分辨率分別用來：圖片菜單、預覽圖片、局部放大預覽圖片
    3、設置對應圖片的鼠標進入、鼠標懸停、鼠標離開、鼠標單擊事件。
    4、CSS修飾

    細節(jié)介紹：
        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優(yōu)先級可層疊顯示 */
            border: 1px solid #959595; /* 設置邊框樣式 */
            overflow: hidden; /* 隱藏滾動條 */
            z-index: 999; /* 圖層優(yōu)先級、值越大就優(yōu)先顯示在上層 */
        }

            #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');

                // 停止當前動畫直接調轉到動畫結束狀態(tài)并且執(zhí)行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);
                        //創(chuàng)建一個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后執(zhí)行此方法修改圖片路徑
                        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 個評論)

手機版|小黑屋|51黑電子論壇 |51黑電子論壇6群 QQ 管理員QQ:125739409;技術交流QQ群281945664

Powered by 單片機教程網

返回頂部
主站蜘蛛池模板： 久久99久久98精品免观看软件 | 久久国产一区二区 | 亚洲欧美日本在线 | 亚洲综合在线视频 | 国产视频一视频二 | 亚洲人成人一区二区在线观看 | 久久久精品综合 | 91久久夜色 | 日韩国产在线 | 精品国产乱码久久久久久中文 | 欧美一区二区小视频 | 欧美激情久久久 | 毛片免费视频 | 国产精品久久久久影院色老大 | 欧美第一区 | www日本在线播放 | www.4虎影院 国产999精品久久久影片官网 | 日本免费视频在线观看 | 精品视频免费 | 欧美精品在欧美一区二区 | 久久九九色 | 在线成人| 色婷婷一区二区三区四区 | 欧美男人的天堂 | 成人久久18免费网站麻豆 | 综合国产第二页 | 久久久久久久久久久成人 | 99久久精品免费看国产四区 | 婷婷五月色综合香五月 | 91久久久久久久久 | 精品国产乱码久久久久久蜜臀 | 亚洲精品美女 | 99视频在线播放 | 日日综合 | 在线一区二区国产 | 精品国产一区二区三区久久 | 香蕉久久久 | 999免费网站 | 日本一区二区在线视频 | 成人精品视频在线 | www.se91|