- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <title>Document</title>
- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
- <style type="text/CSS">
- *{
- margin: 0;
- padding: 0;
- }
- .imgBox{
- width: 1000px;
- margin: auto;
- text-align: center;
- }
- .small,.large{
- font-size: 0;
- outline: 1px solid burlywood;
- margin: auto;
- }
- .small{
- margin: 20px auto;
- }
- .large{
- /*display: none;*/
- }
- .small,.small img,.large{
- width: 300px;
- height: 200px;
- overflow: hidden;
- }
- .large img{
- width: 900px;
- height: 600px;
- }
- .small,.large{
- position: relative;
- }
- .mark{
- opacity: 0.5;
- background-color: #DEB887;
- z-index: 55;
- width: 100px;
- height: 66.666666666px;
- display: none;
- }
- .mark,.large img{
- position: absolute;
- left: 0;
- top: 0;
- }
- </style>
- </head>
- <body>
- <div class="imgBox">
- <div class="small">
- <img src="img/img_14.jpg"/>
- <div class="mark"></div>
- </div>
- <div class="large">
- <img src="img/img_14.jpg"/>
- </div>
- </div>
- <script type="text/javascript">
- $(function(){
- var $small = $(".small"),
- $mark = $(".mark"),
- $large = $(".large");
- $small.on("mousemove",function(e){
- // 在鼠标移到小图片中显示出mark
- $mark.css("display","block");
- // $large.css("display","block");
- // 获取mark的一半宽度高度
- var hw = $mark.width()/2,
- hh = $mark.height()/2;
- // 获取鼠标在当前图片中的位置
- var lf = e.pageX-$small.offset().left-hw,
- tt = e.pageY-$small.offset().top-hh;
- // 获取mark的想x,y轴偏移率
- var ix = lf/$small.width(),
- iy = tt/$small.height();
- // 获取边缘线
- var lb = 1-hw/$small.width()*2,
- tb = 1-hh/$small.height()*2;
- // 计算和边缘的关系
- var ix = ix<lb?ix>0?ix:0:lb,
- iy = iy<tb?iy>0?iy:0:tb;
- // 进行大图和小图百分比计算
- $mark.css("left",ix*100+"%").css("top",iy*100+"%");
- $large.children().css("left",-ix*300+"%").css("top",-iy*300+"%");
- }).on("mouseout",function(){
- // 鼠标移出后mark隐藏
- $mark.css("display","none");
- // $large.css("display","none");
- })
- })
- </script>
- </body>
- </html>
来源: http://www.jb51.net/article/113938.htm