JS 做的鼠标放大镜（初级）

这今天我们学习鼠标的各种事件，我给大家分享一下鼠标放大镜的效果。

希望有兴趣的朋友可以一块交流。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜效果</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
#wrap {
width: 400px;
height: 400px;
border: 1px solid black ;
position: absolute;
}
#image {
width: 100%;
height: 100%;
position: absolute;

}
#slider {
width: 150px;
height: 150px;
border: 1px solid gray ;
position: absolute;
/*top: 0;*/
background: rgba(255, 235, 0, 0.3);
display: none;
}
#wrap_max {
width: 700px;
height: 700px;
border: 1px solid gray ;
position: absolute;
left: 400px;
display: none;
overflow: hidden;

}
#image_max {
width: 1000px;
height: 1000px;
/*display: block;*/
}
</style>
</head>
<body>
<div id="wrap">
<img id="image"src="01.jpg" alt="" /> // 放置图片
<div id="slider">

</div>
</div>
<div id="wrap_max">
<img id="image_max" src="01.jpg" alt="" /> //放置和上面一样的图片
</div>
</body>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
var image = document.getElementById('image');
var slider = document.getElementById('slider');
var wrapMax = document.getElementById('wrap_max');
var imageMax = document.getElementById('image_max');

wrap.onmousemove = function(event){
event = event || window.event;
slider.style.display = 'block'; //当鼠标移入wrap时，slider显示。
wrapMax.style.display = 'inline-block';
var disX = event.clientX - slider.offsetWidth / 2 ; // slider .offsetWidth/ 2 是让鼠标在slider的底部在中间显示
var disY = event.clientY - slider.offsetHeight / 2; // slider .offsetHeight/2 是让鼠标在slider的高在中间显示
var disMaxX = wrap.offsetWidth - slider.offsetWidth ; // slider在wrap移动的最大横向距离
var disMaxY = wrap.offsetHeight - slider.offsetHeight ; // slider 在wrap中移动的最大纵向距离
if (disX < 0) {
disX = 0
}else if (disX > disMaxX) {
disX = disMaxX ;
}
if (disY < 0) {
disY = 0
}else if (disY > disMaxY) {
disY = disMaxY ;
}
slider.style.left = disX +'px';
slider.style.top = disY + 'px';
var sealeX = disX / disMaxX ; // slider在wrap x轴的移动比例
var sealeY = disY / disMaxY ; // slider 在 wrap y轴的移动比例
wrapMax.scrollLeft = (imageMax.offsetWidth - wrapMax.offsetWidth) * sealeX ; //wrapMax 在imageMax x 轴中的移动值
wrapMax.scrollTop = (imageMax.offsetHeight - wrapMax.offsetHeight) *sealeY ;

wrap.onmouseleave = function(){
slider.style.display = 'none';
wrapMax.style.display = 'none';
}
}

</script>
</html>

转载于:https://www.cnblogs.com/Sabo-dudu/p/5765962.html

JS 做的鼠标放大镜（初级）相关推荐

用js做一个鼠标惯性动画
用js做一个简单的鼠标惯性动画 <style type="text/css">#div1{width: 50px;height: 50px;background: re ...
如何用原生jS做购物车
如何用原生jS做购物车今天给大家分享如何用原生js做购物车,我们都逛过淘宝.京东这样购物网站,像这种购物网站,购物车是肯定少不了的 ,我们在天猫上购物,一开始一个页面有很多种商品,然后你在这里面看中 ...
js+css+html实现放大镜效果
js+css+html实现放大镜效果 1 案例描述 2 编写HTML代码 3 编写CSS代码 4 编写JavaScript代码 5 总代码 1 案例描述在很多网页中,我们都能看到一个类似于放大镜的效 ...
详情页html特效,js实现详情页放大镜效果
本文实例为大家分享了js实现详情页放大镜的具体代码,供大家参考,具体内容如下 1.html 2.css *{ margin:0;padding:0; } #small{ width:400px; he ...
用Three.js做一个简单的3D场景
Three.js是什么 Three.js 是一款运行在浏览器中的 3D 引擎,我们可以用它来创造我们所需要的一系列3D动画场景,简而言之就是建在网页上的3D模型.利用Three.js可以制作出很多酷炫 ...
使用js做简易轮播图，可自动
[作者注]:第一次使用js做简易轮播图首先在body里div个容器 div class="box"> <p id="p" ></p&g ...
JS制作跟随鼠标移动的图片
JS制作跟随鼠标移动的图片有趣的小案例池子: JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息 JS点击切换 ...
react.js做小程序_如何使用React.js构建现代的聊天应用程序
react.js做小程序 In this tutorial, I will guide you to build your own group chat application using React ...
用 JS 做一个数独游戏（二）
用 JS 做一个数独游戏(二) 在上一篇博客中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

JS 做的鼠标放大镜（初级）

JS 做的鼠标放大镜（初级）相关推荐

最新文章

热门文章