您的位置：首页 > Web前端 > JQuery

jquery实现放大镜效果

2016-06-22 10:29 477 查看

<!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>

<div class="box">

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

<div class="small"><img src="./img/400.jpg" alt=""/><b></b></div>
<div class="big"><img src="./img/800.jpg" alt=""/></div>
</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航