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>

 

 

你可能感兴趣的:(js特效)