JaveScript 之瀏覽商品

標簽：

Html/CSS JavaScript CSS3

模仿淘宝网网页中商品浏览模式,
即当鼠标放在图片上时,旁边会出现当前区域放大的图片
代码如下:(下面有福利哦)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #small{
                width: 478px;
                height: 665px;
                position: relative;
            }
            #small>img{
                width: 100%;
                height: 100%;
                border:5px solid black;
                /*display: block;*/
            }
            #area{
                width: 80px;
                height: 110px;
                background: rgba(80,100,120,0.6);
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }
            #smaller{
                width: 470px;
                height: 110px;
                margin-top: 20px;
                margin-left: 12px;
            }
            #smaller>img{
                width: 70px;
                height: 98px;
                margin: 0 6px;
                border:2px solid white;
            }
            #big{
                width: 478px;
                height: 665px;
                overflow: hidden;
                position: absolute;
                top: 8px;
                left: 500px;
                display: none;
            }
            #big>img{
                width: 2856px;
                height: 3973px;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <!-- 左侧图片 -->
            <div id="small">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/0.jpg" alt="" />
                <!-- 选中区域 -->
                <div id="area"></div>
            </div>
            <!-- 商品种类 -->
            <div id="smaller">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/0.jpg" alt="" />
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/1.jpg" alt="" />
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/2.jpg" alt="" />
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/3.jpg" alt="" />
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/4.jpg" alt="" />
            </div>
            <!-- 放大的图片 -->
            <div id="big">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/0.jpg" alt="" />
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var small = document.getElementById('small');
        var smallImg = document.querySelector('#small>img');
        var areaDiv = document.getElementById('area');
        var smaller = document.getElementById('smaller');
        var imgs = smaller.getElementsByTagName('img');
        var big = document.getElementById('big');
        var bigImg = document.querySelector('#big>img');
        for (var i = 0;i < imgs.length;i++) {
            imgs[i].index = i;
            //当鼠标放在商品上时,上方即出现其放大的图片
            imgs[i].onmouseenter = function () {
                this.style.border = '2px solid black';
                smallImg.src = '../img/' + this.index + '.jpg';
                bigImg.src =  '../img/' + this.index + '.jpg';
            }
            imgs[i].onmouseleave = function () {
                this.style.border = '2px solid white';
                big.removeChild(img);
            }
        }
        //给左侧图片添加鼠标移动时间
        small.onmousemove = function () {
            //定义选中区域页面左侧和上侧的距离,即定义选中区域的位置
            var xDistance = event.clientX - smallImg.offsetLeft - areaDiv.offsetWidth / 2;
            var yDistance = event.clientY - smallImg.offsetTop - areaDiv.offsetHeight / 2;
            //定义选中区域可移动的最大距离
            var maxX = smallImg.offsetWidth - areaDiv.offsetWidth;
            var maxY = smallImg.offsetHeight - areaDiv.offsetHeight;
            //左侧超出
            if (xDistance < 0) {
                xDistance = 0;
            }
            //右侧超出
            if (xDistance > maxX) {
                xDistance = maxX;
            }
            //上侧超出
            if (yDistance < 0) {
                yDistance = 0;
            }
            //下册超出
            if (yDistance > maxY) {
                yDistance = maxY;
            }
            //修改选中区域的位置
            areaDiv.style.left = xDistance + 'px';
            areaDiv.style.top = yDistance + 'px';
            //修改右侧大图的位置
            bigImg.style.left = - xDistance * bigImg.offsetWidth / smallImg.offsetWidth + 'px';
            bigImg.style.top = - yDistance * bigImg.offsetHeight / smallImg.offsetHeight + 'px';
        }
        //为左侧图片添加鼠标移入及移出事件
        small.onmouseenter = function() {
            areaDiv.style.display = 'block';
            big.style.display = 'block';
        }
        small.onmouseleave = function () {
            areaDiv.style.display = 'none';
            big.style.display = 'none';
        }
    </script>
</html>