/*
*知识点预备
clientX,clientY 鼠标相对于可视区的位置
offsetX,offsetY layerX layerY 鼠标相对于事件源的位置
screenX，screenY 鼠标相对于屏幕的位置
pageX , pageY IE(不支持)鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。
在有滚动条的情况下就需要做这种额外的处理
兼容性的处理如下
var docE = document.documentElement,docBody=document.body;
pageX = clientX + Math.max(docE .scrollLeft,docBody.scrollLeft);
pageY = clientY + Math.max(docE .scrollTop,docBody.scrollTop);**/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>放大镜</title>
<link rel="stylesheet" href="">
<style type="text/css">
media="all"
html, body, div ,img {
margin: 0;
padding: 0;
}
#small{
border: 1px solid #dddddd;
width: 352px;
height: 352px;
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
}
#small img{
width: 350px;
height: 350px;
}
.zoomUp{
visibility:hidden;
cursor: move;
border: 1px solid #ddd;
background: #FEDE4F 50% top no-repeat;
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
filter: alpha(Opacity=50);
position: absolute;
left: 0;
top:0;
}
#big{
width: 402px;
height: 402px;
position: absolute;
left: 362px;
top: 0px;
border: 1px solid #dddddd;
overflow: hidden;
visibility: hidden;
}
#big img{
width: 800px;
height: 800px;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var small = document.getElementById("small");
var zoomUp = small.getElementsByTagName("div")[0];
var big = document.getElementById("big");
var bigImg = big.getElementsByTagName("img")[0];
//类似于自定义滚动条
// 小图中--移动方块的最大top，和最大left
var sT = small.offsetHeight-zoomUp.offsetHeight;
var sL = small.offsetWidth-zoomUp.offsetWidth;
//大图的最大top和最大left
var bT = bigImg.offsetHeight-big.offsetHeight;
var bL = bigImg.offsetWidth-big.offsetWidth;
small.onmouseover = function(e){
var e = e || window.event;
//计算鼠标进入的时候的位置，定位移动块的位置
zoomUp.style.visibility = "visible";
big.style.visibility = "visible";
// zoomUp.style.top = small.offsetLeft - cx +"px";
// zoomUp.style.left = small.offsetTop - cy +"px";
small.onmousemove = function(e){
console.log("move");
var e = e || window.event;
var ex = e.clientX;
var ey = e.clientY;
//为了保证鼠标在移动块的中央，所以移动快的位置要特殊处理
var l = ex-small.offsetLeft-zoomUp.offsetWidth/2;
var t = ey-small.offsetTop-zoomUp.offsetHeight/2;
//判断左右边位置
if(l<0)
{
l = 0;
}
if(l>sL){
l = sL;
}
//判断上下位置
if(t<0)
{
t = 0;
}
if(t>sT){
t = sT;
}
zoomUp.style.top = t+"px";
zoomUp.style.left = l +"px";
//右边的大图片移动比例计算。是等比例的为：左边小块移动的距离/左边小块移动的最大距离 = 右边图片移动的距离/右边图片移动的最大距离
//已经知道的是移动的最大距离，鼠标移动的时候，可以得到左边小块移动的距离，通过等比例可以计算出右边图片的移动距离
var pt = t/sT;
var pl = l/sL;
bigImg.style.top = -pt*bT+"px";
bigImg.style.left = -pl*bL+"px";
}
small.onmouseout = function(e){
console.log("out");
zoomUp.style.visibility = "hidden";
big.style.visibility = "hidden";
}
return false;
}
}
</script>
</head>
<body>
<div id="small">
<img src="img/small.jpg" />
<div class="zoomUp" style="width: 175px; height: 175px;"> </div>
</div>
<div id="big">
<img src="img/big.jpg">
</div>
</body>
</html>
分享到：
相关推荐
- 可以添加平滑过渡效果，使放大镜移动更加流畅。 6. **图片预加载**： 图片预加载技术可以确保图片在用户需要时已经加载完毕，避免出现延迟或闪烁的现象。 在`images`目录下，我们可以找到用于测试的图片资源，...
【JavaScript 面向对象实现放大镜案例】 在JavaScript中，面向对象编程是一种常见的编程范式，用于组织和管理代码。在这个案例中，我们将利用面向对象的方法来实现一个动态的放大镜效果，常用于电商网站的产品展示...
JavaScript实现的放大镜效果是一种常见的网页交互功能，它允许用户在鼠标悬停在小图上时，通过一个浮动的放大窗口预览图像的细节。这种效果常见于电子商务网站的产品图片展示，增强了用户体验，使得用户无需点击就能...
在本文中，我们将探讨如何使用JavaScript实现一个动态的多张图片放大镜效果，该效果不受图片尺寸限制，并且使用了`rem`单位进行响应式布局。这种方法允许用户在查看图片列表时，通过鼠标悬停来观察图片的细节部分，...
为了实现放大镜效果，我们还需要一个小的透明黑色方块（`slide_box`），用于跟随鼠标移动并显示放大部分。 CSS样式对这两个面板和小方块进行了定义。`leftcon`设置了阴影效果，使其看起来像一个带有阴影的框。`...
`.mousemove()`事件监听鼠标的移动，`.css()`方法实时更新放大镜的位置和大小。 ### 4. **WebOS风格** WebOS是一种模仿操作系统界面的网页设计趋势，通常包括动态图标和滑动效果。jQuery可以帮助实现这些效果，如...
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型（源代码...
10.3 利用websocket实现简单的聊天室 / 283 10.4 做一款多人在线的坦克大战 / 293 10.4.1 服务器 / 293 10.4.2 客户端 / 293 10.5 小结 / 307 第四部分 技能提高篇 第11章 提高效率的分析 / 310 11.1 绘图时...
Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件，EJB... Java实现的放大...
Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件，EJB... Java实现的放大...
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型（源...
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型（源...
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型（源...