图片预览－放大镜效果

齐晓威_518

浏览: 619024 次
性别:
来自: 郑州

最近访客更多访客>>

huangsheng2012

cr135810

ws07

gaochunhu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JSP使用心得与体会

<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;" onmouseover="showZoom('xanadu-800x600.jpg','500','375');" onmouseout="hiddenZoom();" onmousemove="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'这个是放大镜的边框尺寸

分享到：

ORA-12514 TNS 监听程序当前无法识别连接描 ... | 网址-技术网站-jquery

2014-04-09 21:43
浏览 1162
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论