第六章动画图片效果--放大镜1_summer第六章怎么过图解-CSDN博客

本文介绍了一种使用JavaScript实现的图片放大镜效果。通过监听鼠标移动事件调整放大镜位置，并根据鼠标位置计算背景图片的偏移量，实现缩略图跟随鼠标移动并放大显示的效果。

效果演示：

--JS放大镜显示-- 单击“放大镜”开始浏览，再次单击停止。

JavaScript代码：

var viewer_bgcolor="#F9F9F9";
var bigmap="../images/6-2-6.JPG";
document.all.myviewer.style.backgroundImage='url('+bigmap+')';
document.all.myviewer.style.backgroundColor=viewer_bgcolor;
document.write('<img id="getsize" style="position:absolute; left:-2000px; top:-2000px;" src="'+bigmap+'">');
var moveme=false;
function viewit(obj){
　if (moveme){
　　obj.style.left=event.x+parseInt(document.body.scrollLeft)-parseInt(obj.width)/2;
　　obj.style.top=event.y+parseInt(document.body.scrollTop)-parseInt(obj.height)/2;
　　Nx=parseInt(document.all.getsize.width)/parseInt(document.all.bgLayer.width);
　　bgx=(-1)*(Nx-1)*(event.x-parseInt(document.all.bgLayer.style.left)+parseInt(document.body.scrollLeft))-parseInt(obj.style.left)+parseInt(document.all.bgLayer.style.left);
　　Ny=parseInt(document.all.getsize.height)/parseInt(document.all.bgLayer.height);
　　bgy=(-1)*(Ny-1)*(event.y-parseInt(document.all.bgLayer.style.top)+parseInt(document.body.scrollTop))-parseInt(obj.style.top)+parseInt(document.all.bgLayer.style.top);
　　obj.style.backgroundPosition=bgx+" "+bgy;
　}
}

缩略图和放大镜图：

JavaScript代码讲解：

var viewer_bgcolor="#F9F9F9";	放大镜的背景色，建议设成和网页背景色相同
var bigmap="../images/6-2-6.JPG";	大图路径
document.all.myviewer.style.backgroundImage='url('+bigmap+')'; document.all.myviewer.style.backgroundColor=viewer_bgcolor;	设置放大镜元素myview经过时的背景图片与背景颜色 document.all返回对象所包含的元素集合的引用
var moveme=false;	定义变量moveme为布尔型变量，值为false
function viewit(obj){	定义一个函数，名为viewit.
if (moveme){ 　　obj.style.left=event.x+parseInt(document.body.scrollLeft)-parseInt(obj.width)/2; 　　obj.style.top=event.y+parseInt(document.body.scrollTop)-parseInt(obj.height)/2;	设置或获取对象相对于文档层次中下个定位对象的左边界、上边界的位置
Nx=parseInt(document.all.getsize.width)/parseInt(document.all.bgLayer.width);	计算Nx的值
bgx=(-1)(Nx-1)(event.x-parseInt(document.all.bgLayer.style.left)+parseInt(document.body.scrollLeft))-parseInt(obj.style.left)+parseInt(document.all.bgLayer.style.left);	计算bgx的值 scrollLeft:对象的最左边到对象在当前窗口显示的范围内的左边的距离．即是在出现了横向滚动条的情况下，滚动条拉动的距离．
Ny=parseInt(document.all.getsize.height)/parseInt(document.all.bgLayer.height); 　　bgy=(-1)(Ny-1)(event.y-parseInt(document.all.bgLayer.style.top)+parseInt(document.body.scrollTop))-parseInt(obj.style.top)+parseInt(document.all.bgLayer.style.top);	计算Ny和bgy的值 scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
obj.style.backgroundPosition=bgx+" "+bgy; 　} }	定义背景图片的位置