JS特效之美女放大镜效果

 

效果如下：

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>屌丝的寂寞之美女的放大镜效果</title>
<style type="text/css">

#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }

#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .small_pic img{width:200px;height:200px;}
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; width:450px;height:450px}
</style>
</head>
<body>
<h2>屌丝的寂寞之美女的放大镜效果</h2>
<div id="div1">
    <div class="small_pic">
        <span class="mark"></span>
        <span class="float_layer"></span>
        <img src="images/test.jpg" />
    </div>
    <div class="big_pic">
        <img src="images/test.jpg"  />
    </div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(function(){
        var obj_div1=$('#div1');
        var obj_mark=$('.mark');
        var obj_float_layer=$('.float_layer');
        var obj_small=$('.small_pic');
        var obj_big=$('.big_pic');
        var obj_img=obj_big.find('img');
        obj_mark.mouseover(function(){
            obj_float_layer.css('display','block');
            obj_big.css('display','block');
        });
        obj_mark.mouseout(function(){
            obj_float_layer.css('display','none');
            obj_big.css('display','none');
        });
        obj_mark.mousemove(function(ev){
            var obj_event=ev||event;        //触发事件
            var left=obj_event.clientX-obj_div1[0].offsetLeft-obj_small[0].offsetLeft-obj_float_layer[0].offsetWidth/2;
            var top=obj_event.clientY-obj_div1[0].offsetTop-obj_small[0].offsetTop-obj_float_layer[0].offsetHeight/2;
            //解决mark溢出到图片的问题
            if(left<0){
                //左边溢出
                left=0;
            }else if(left>obj_mark[0].offsetWidth-obj_float_layer[0].offsetWidth){
                //右边溢出
                left=obj_mark[0].offsetWidth-obj_float_layer[0].offsetWidth;
            }
            if(top<0){
                //上边溢出
                top=0;
            }else if(top>obj_mark[0].offsetHeight-obj_float_layer[0].offsetHeight){
                //下边溢出
                top=obj_mark[0].offsetHeight-obj_float_layer[0].offsetHeight;
            }
            obj_float_layer[0].style.left=left+'px';
            obj_float_layer[0].style.top=top+'px';
            //左边鼠标移动时，右边可视区也跟着移动显示
            var percentX=left/(obj_mark[0].offsetWidth-obj_float_layer[0].offsetWidth);        //得到移动的X轴的比例
            var percentY=top/(obj_mark[0].offsetHeight-obj_float_layer[0].offsetHeight);    //得到移动的Y轴的比例
            obj_img[0].style.left=-percentX*(obj_img[0].offsetWidth-obj_big[0].offsetWidth)+'px';
            obj_img[0].style.top=-percentY*(obj_img[0].offsetHeight-obj_big[0].offsetHeight)+'px';
        });
        
    })
</script>
</body>
</html>

 

 

posted @ 2014-01-07 09:46  罗导  阅读(184)  评论(0)  编辑  收藏  举报