zoukankan html css js c++ java

jquery放大镜

效果体验：http://runjs.cn/detail/dvygyp5t

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
</head>

<body>

<div id="div1">

    <div class="small_pic">
        <span class="mark"></span>
        <span class="float_layer"></span>
        <img src="http://www.helloweba.com/demo/cloud-zoom/images/smallimage.jpg" />
    </div>

    <div class="big_pic">
        <img src="http://www.helloweba.com/demo/cloud-zoom/images/bigimage00.jpg"/>
    </div>
<script type="text/javascript">
$(function(){
    $(".mark").hover(function(){
        $(".float_layer,.big_pic").show();
    },function(){
        $(".float_layer,.big_pic").hide();
    })
    
    $(".mark").mousemove(function(ev){
        var e = ev || event;
        
        var left = e.clientX - $("#div1").offset().left-$(".small_pic").offset().left-$(".float_layer").width()/2;
        var top = e.clientY - $("#div1").offset().top-$(".small_pic").offset().top-$(".float_layer").height()/2;
        
        var sDistanceX = $(".mark").outerWidth()-$(".float_layer").outerWidth();
        var sDistanceY = $(".mark").outerHeight()-$(".float_layer").outerHeight();

        if(left<0){
            left = 0;
        }
        else if(left > sDistanceX){
            left = sDistanceX ;
        }
        if(top<0){
            top=0;
        }
        else if(top > sDistanceY){
            top = sDistanceY;
        }

        $(".float_layer").css({'left':left,"top":top});

        var scoreX = left/sDistanceX;
        var scoreY = top/sDistanceY;
        
        var  bDistanceX = $(".big_pic img").outerWidth() - $(".big_pic").outerWidth();
        var  bDistanceY = $(".big_pic img").outerHeight() - $(".big_pic").outerHeight();

        $(".big_pic img").css({left:(-scoreX*bDistanceX),top:(-scoreY*bDistanceY)});
    })
})
</script>
</body>
</html>

查看全文

相关阅读:
Linux0.12内存寻址
 Linux0.12任务调度与进程切换
 Mapreduce实例——倒排索引
 解决echart警告：Can't get dom width or height
Mapreduce实例——MapReduce自定义输入格式
 Mapreduce实例——ChainMapReduce
Mapreduce实例——二次排序
 设计模式中介者模式
 设计模式七大原则
 Mapreduce实例——MapReduce自定义输出格式

原文地址：https://www.cnblogs.com/wanliyuan/p/4278560.html