仿淘宝图片划过放大

来源：互联网发布：mac版英雄无敌3全屏编辑：程序博客网时间：2024/04/30 02:48

学生请教的一个简单demo，仿淘宝的图片细节展示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="jquery-2.1.1.min.js"></script>    <style>        * {            margin: 0px;            padding: 0px;        }        #div2{        }    </style>    <script>        $(document).ready(function(){        })        function move(e){            var xx= e.pageX;            var yy= e.pageY;            if(xx<282&&xx>32){                $("#pic1").css("left",(32-xx)*2);                $("#div2").css("left",xx-32);            }else{}            if(yy<94&&yy>32) {                $("#div2").css("top", yy - 32);                $("#pic1").css("top", (32 - yy) * 2);            }else{}        }        function xianshi(){            $("#div2,img").show();        }        function yincang(){            $("#div2,img").hide();        }    </script></head><body><div id="div1" style="width:314px;height:126px;background: url(1.png) no-repeat " onmousemove="move(event)" onmouseover="xianshi()" onmouseout="yincang()" >    <div id="div2" style="width:63px;height: 63px;opacity:0.5;background-color: black;position: absolute;display: none"></div></div><div id="div3" style="position:relative;bottom: 126px; left: 320px; width:126px; height:126px;overflow: hidden">    <img src="1.png" width="628px" style="position:absolute;display: none" id="pic1"></div></body></html>

效果如下

0 0