/*
*知识点预备
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>
分享到：
相关推荐
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型（源代码...
简单聊天软件CS模式 2个目标文件 一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 ...
10.3 利用websocket实现简单的聊天室 / 283 10.4 做一款多人在线的坦克大战 / 293 10.4.1 服务器 / 293 10.4.2 客户端 / 293 10.5 小结 / 307 第四部分 技能提高篇 第11章 提高效率的分析 / 310 11.1 绘图时...
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型（源代码...
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的真实世界模型（源...