• 选项卡放大镜(淘宝购物效果)


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                 350px;
                height: 350px;
                border: 1px solid #000;
                margin: 200px;
                position: relative;
            }
            #big{
                 400px;
                height: 400px;
                border: 1px solid #000;
                overflow: hidden;
                position: absolute;
                top:0;
                left : 360px;
                display: none;
            }
            #mask{
                 175.5px;
                height: 175.5px;
                position: absolute;
                left:0;
                top: 0;
                background: url(images/1m.jpg);
                /*opacity: 0.3;*/
                display: none;
                cursor: move;
            }
            #small{
                350px;
                height:50px;
            }
            #small img{
                margin-right:20px;
            }
            #middle{
                position: relative;
            }
            
            #bigImg{
                position: absolute;
                left: 0;
                top: 0;
            }
            #center{
                 350px;
                height: 350px;
                position: absolute;
                left: 0;
                top: 0;
                background: #0000FF;
                opacity: .3;
            }
        </style>
        <body>
            <div id="box" >
                <div id="middle"><!--小图区-->
                    <img src="images/1m.jpg" alt="" id="m"/>                
                    <div id="center"></div>             
                    <div id="mask"></div><!--遮罩层-->
                </div>
                
                <div id="small">
                    <img src="images/1s.jpg" alt="" />
                    <img src="images/2s.jpg" alt="" />
                    <img src="images/3s.jpg" alt="" />
                    <img src="images/4s.jpg" alt="" />
                </div>
                
                <div id="big"><!--大图区-->
                    <img src="images/1b.jpg" alt="" id="bigImg"/>
                </div>
            </div>
        </body>
    </html>
    <script src="public.js"> </script>
    <script type="text/javascript">
        var box = $id("box");
        var middle = $id("middle");
        var big = $id("big");
        var mask = $id("mask");
        var bigImg = $id("bigImg");
        //鼠标移入到middle区域 操作mask和big的显示
        middle.onmouseover = function(){
            mask.style.display = "block";
            big.style.display = "block";
        }
        //鼠标移入到middle区域 操作mask和big的隐藏
        middle.onmouseout = function(){
            mask.style.display = "none";
            big.style.display = "none";
        }
        
        
        
        var smallImg = $id("small").children;
       for(var i = 0 ; i < smallImg.length;i++){
           //smallImg[i].index = (i+1);
           smallImg[i].index=i;
           console.log(i)
           smallImg[i].onclick = function(){
               $id("m").src = "images/"+(this.index+1)+"m.jpg"
               $id("bigImg").src = "images/"+(this.index+1)+"b.jpg"    ;   
               
           }
        }
       
       
       
       

        //鼠标在小图区移动 操作mask的移动
        middle.onmousemove = function(e){
            var e = e || event;
            var x = e.pageX - box.offsetLeft - mask.offsetWidth/2;
            var y = e.pageY - box.offsetTop - mask.offsetHeight/2;
            //获取mask的最大的left和top值
            var maxL = box.offsetWidth - mask.offsetWidth-2;
            var maxT = box.offsetHeight - mask.offsetHeight-2;
            //边界处理
            x = x < 0 ? 0 : (x > maxL ? maxL : x);
            y = y < 0 ? 0 : (y > maxT ? maxT : y);
            
            mask.style.left = x + "px";
            mask.style.top = y + "px";
            mask.style.background = "url("+$id("m").src+")" ;
            mask.style.backgroundPosition = -x + "px -" + y + "px";
            
            var bigImgLeft = x*bigImg.offsetWidth/middle.offsetWidth;
            var bigImgTop = y*bigImg.offsetHeight/middle.offsetHeight;
            //设置大图的移动
            bigImg.style.left = -bigImgLeft + "px";
            bigImg.style.top = -bigImgTop + "px";
        }
        // 800/350 = 400 / 175
    </script>
  • 相关阅读:
    [笔记]流行数据库SQL差异分析之“不从实体表中取得数据”
    如何评价架构的优劣(转)
    Entity Framework 学习总结之一:ADO.NET 实体框架概述
    [笔记]流行数据库SQL差异分析之“自动增长字段”
    Entity Framework 学习总结之十:加载相关对象
    Entity Framework 学习总结之九:LinqToEntities
    Entity Framework 学习总结之二:数据访问区别
    3、网站前端优化11条笔记汇总
    Entity Framework 学习总结之八:EntitySQL 复杂查询及函数
    Entity Framework 学习总结之七:EntitySQL 基本查询
  • 原文地址:https://www.cnblogs.com/tis100204/p/10328804.html
Copyright © 2020-2023  润新知