图片预览－放大镜效果

最新推荐文章于 2024-02-24 11:11:47 发布

临海听风_518

最新推荐文章于 2024-02-24 11:11:47 发布

阅读量262

点赞数

分类专栏： JSP使用心得与体会文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/qixiaowei_888/article/details/84547134

版权

JSP使用心得与体会专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>My JSP 'index.jsp' starting page</title>
    <script type="text/javascript">
    var iX; //ZOOM的页面定位X
   var iY; //ZOOM的页面定位Y
   var icoWidth;//ico显示的宽
   var icoHeight;//ico显示的高
   var zoomW;//zoom实际的大小X
   var zoomH;//zoom实际的大小Y
   var zoomWidth;//zoom显示的大小X
   var zoomHeight;//zoom显示的大小Y
   var sX=0;//zoom的移动量X
   var sY=0;//zoom的移动量Y
   var zoomImg;

   //初始化放大镜
   function initZoom(src,ww,hh){
    zoomImg=src;
    zoomWidth=ww;
    zoomHeight=hh;
    //parseInt函数，将px值换算成int类型
    icoWidth = parseInt(document.getElementById("icoImg").style.width);
    icoHeight = parseInt(document.getElementById("icoImg").style.height);
    //获取网络图片实际尺寸的方法
    imgObj = new Image();
    imgObj.src = zoomImg;
    zoomW=imgObj.width;
    zoomH=imgObj.height;
   }

   //关于放大镜在页面上的定位（显示于原来图象的右侧）
   function zoomPos(){
    var ico = document.getElementById("ico");
   var icoX = ico.offsetLeft; //触发javascript的元素X定位
var icoY = ico.offsetTop; //触发javascript的元素Y定位
iX = icoX + icoWidth;//显示于右侧1
   iY = icoY;//显示于右侧2
   }

   //关于放大镜放大部分的定位（鼠标定位的算法）
   function mousePos(){
    var ico = document.getElementById("ico");
   var icoX = ico.offsetLeft; //触发javascript的元素X定位
var icoY = ico.offsetTop; //触发javascript的元素Y定位
//获取鼠标的定位
   var mouseX = window.event.clientX;
   var mouseY = window.event.clientY;
   //鼠标从小图到大图的定位的算发
   sX = (mouseX-icoX)*zoomW/icoWidth-zoomWidth/2;
   sY = (mouseY-icoY)*zoomH/icoHeight-zoomHeight/2;
   if(sX<0)(sX=0);
   if(sY<0)(sY=0);
   if(sX>(zoomW-zoomWidth))(sX=(zoomW-zoomWidth));
   if(sY>(zoomH-zoomHeight))(sY=(zoomH-zoomHeight));

   }

   //创建放大镜的空白DIV块
   function creatzoomDiv(){
    document.body.innerHTML =
    document.body.innerHTML +
    "<div id=\"zoomDiv\" style=\"position:absolute;display:block;" +
    "top:" + iY + "px;" +
    "left:" + iX + "px;" +
    "width: "+zoomWidth+"px;"+
    "height: "+zoomHeight+"px; "+
    "overflow: hidden;" +
    "\">" +
    "<img id=\"zoomIn\" src="+zoomImg+
    " style=\"position:relative;right:"+sX+"px;bottom:"+sY+"px;\" />"+
    "</div>";
   }

   //显示放大镜（显示的图象，图象宽度，图象高度）
   function showZoom(src,ww,hh){
    initZoom(src,ww,hh);
    zoomPos();
    var zoomDiv = document.getElementById("zoomDiv");
    if(zoomDiv==null){
     creatzoomDiv();
    }else{
     zoomDiv.style.display='block';
    }
   }

   //隐藏放大镜
   function hiddenZoom(){
    var zoomDiv = document.getElementById("zoomDiv");
    if(zoomDiv!=null){
     zoomDiv.style.display='none';
    }
   }

   //移动放大镜
   function moveZoom(){
    mousePos();
    var zoomIn = document.getElementById("zoomIn");
    if(zoomIn!=null){
     zoomIn.style.right=sX;
     zoomIn.style.bottom=sY;
    }
   }

    </script>
</head>

<body>

<div id="ico" style="float:left;" >
<img id="icoImg" src="xanadu-200x150.jpg" style="width: 100px;height: 75px;" οnmοuseοver="showZoom('xanadu-800x600.jpg','500','375');" οnmοuseοut="hiddenZoom();" οnmοusemοve="moveZoom();" />
</div>

<div id="desc" style="float:left;">
XANADU NEXT<br />
</div>

</body>
</html>

说明：
1.xanadu-200x150.jpg 和 xanadu-800x600.jpg 是指内容相同，尺寸不同的2图片。当然都加载800*600象素的也可以，但就影响加载速度了。
2.width: 100px;height: 75px; 这个尺寸是缩略图的尺寸
3.'500','375'这个是放大镜的边框尺寸

临海听风_518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片预览－放大镜效果

&lt;html&gt;&lt;head&gt; &lt;title&gt;My JSP 'index.jsp' starting page&lt;/title&gt; &lt;script type="text/javascript"&gt; var iX; //ZOOM的页面定位X var iY; //ZOOM的页面定位Y var icoWidth;//ico显示...
复制链接

扫一扫

专栏目录