首页> 基础笔记 >JS/JQ基础学习 >经典案例 经典案例
jQuery实例: 图片放大镜效果
作者：小萝卜 2023-03-24 【 jquery 】 浏览 474
简介jQuery实例: 图片放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery实例</title>
<style>
div{margin:0px;padding:0px;}
#did{
width:300px;
height:300px;
position:absolute;
overflow:hidden;
display:none;
}
</style>
</head>
<body>
<h2>jQuery实例: 图片放大镜效果</h2>
<img id="mid" src="./images/Meinv073.jpg" width="384"/>
<div id="did">
<img src="./images/Meinv073.jpg"/>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//获取mid图片并添加鼠标移入和移出事件
$("#mid").mouseover(function(){
//获取当前图片的位置和宽度
var position = $(this).position();
var w = $(this).width();
//定位放大镜位置
$("#did").css({top:position.top,left:(position.left+w+5)}).show();
}).mouseout(function(){
$("#did").hide();
}).mousemove(function(e){
//获取当前图片的位置
var position = $(this).position();
//设置放大镜的滚动位置
$("#did").scrollTop((e.pageY-position.top)*5-150);
$("#did").scrollLeft((e.pageX-position.left)*5-150);
});
</script>
</body>
</html>
很赞哦！ (0)
