关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。
话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#move {
float: left;
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
#shadow {
height: 40px;
width: 60px;
position: absolute;
top: 0;
left: 0;
background: rgba(200, 200, 200, 0.5);
cursor: pointer;
}
.container {
width: 600px;
height: 400px;
float: left;
overflow: hidden;
position: relative;
}
#big {
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<div id="move">
<img id="small" width="300" height="200" src="mouse.jpg">
<div id="shadow"></div>
</div>
<div class="container">
<img id="big" width="3000" height="2000" src="mouse.jpg">
</div>
<script src="iwenEvent.js"></script>
<script>
iwenEvent.event.on('move', 'mousemove', function (e) {
var e = iwenEvent.event.getEvent(e)
var x = e.clientX - 30;
var y = e.clientY - 20;
if (x < 0) {
x = 0;
} else if (x > 240) {
x = 240;
}
if (y < 0) {
y = 0;
} else if (y > 160) {
y = 160;
}
iwenEvent.dom.css("big","display","block");
iwenEvent.dom.css('shadow', 'left', x + 'px');
iwenEvent.dom.css('shadow', 'top', y + 'px');
iwenEvent.dom.css('big', 'left', -x * 10 + 'px');
iwenEvent.dom.css('big', 'top', -y * 10 + 'px');
})
iwenEvent.event.on("move","mouseout",function(e){
iwenEvent.dom.css("big","display","none");
})
</script>
</body>
</html>
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
