jquery实现放大镜效果

来源：互联网发布：孙燕姿好听的歌知乎编辑：程序博客网时间：2024/05/07 14:15

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Jquery实现放大镜 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">


<style type="text/css">
*{margin:0px; padding:0px;}
.box{width:900px; height:500px; margin:60px auto;}
.small{width:400px; height:400px;float:left; position:relative;}
.big{width:400px; height:400px;float:left; overflow:hidden; margin-left:20px; margin-top:20px; position:relative; display:none;}
/*透明度*/ /*滤镜*/
.small b{width:100px; height:100px; background:pink; opacity: 0.4; filter:alpha(opacity=40); position:absolute; top:0px; left:0px; display:none;}
.big img{position:absolute; top:0px; left:0px;}
</style>


<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){

//mousemove 事件通过鼠标在元素上移动来触发
$('.small').mousemove(function(e){
$('b').show();
$('.big').show();
var L = e.pageX; //鼠标在页面中x轴上的位置
var l = $(this).offset().left;
var left = L-l-50;

var T = e.pageY; //鼠标在页面中y轴上的位置
var t = $(this).offset().top;
var top = T-t-50;

/*限制滤镜的范围*/
left = left < 0 ? 0 : left;
top = top < 0 ? 0: top;
left = left > 300 ? 300 : left;
top = top > 300 ? 300: top;

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

/*放大镜效果*/
//显示放大镜的范围
var imgLeft = -left * 2;
var imgTop = -top * 2;
imgLeft = imgLeft <-400 ? -400 : imgLeft;
imgTop = imgTop < -400 ? -400 : imgTop;
$('.big img').css({left:imgLeft, top:imgTop});

});

//mouseout事件在鼠标从元素上离开后会触发
$('.small').mouseout(function(){
$('.small b').hide();
$('.big').hide();
});

});
</script>

</head>

<body>

/*读者可以任意改变自己所需要的图片(注意：我现在所使用的两张图片的大小分别为400*400、800*800)*/

0 0