现仅已.NET为例，HTML代码如下

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

 <HTML>

  <HEAD>

   <title>test</title>

   <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">

   <meta name="CODE_LANGUAGE" Content="C#">

   <meta name="vs_defaultClientScript" content="JavaScript">

   <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

   <script language="JavaScript">

 <!--

 var smallX = 200; //缩略图宽度

 var bigX = 600; //预览窗大小,可以任意设置

 var bigY = 450;

 var srcX = -1; //原图大小,可以任意设置. 如都为-1将使用图片原始大小

 var srcY = -1;

 var border = 5; //边框

 var smallY,viewX,viewY,bl,isIE,vX,vY;

 window.onload=function (){

  head.innerHTML="图片已载入";

  isIE=window.event?1:0;

  if (srcX==-1 && srcY==-1){srcX=document.getElementByIdx('bigpic').width;srcY=document.getElementByIdx('bigpic').height;}

  else{document.getElementByIdx('bigpic').width=srcX;document.getElementByIdx('bigpic').height=srcY;}

  smallY=srcY*smallX/srcX;

  viewX=bigX/srcX*smallX; //预览范围

  viewY=bigY/srcY*smallY;

  bl=srcX/smallX; //缩小比例

  document.getElementByIdx('smallpic').width=smallX;

  document.getElementByIdx('smallpic').height=smallY;

  smallbox.style.borderWidth=border;

  smallbox.style.width=document.getElementByIdx('smallpic').offsetWidth+border*2*isIE;

  smallbox.style.height=document.getElementByIdx('smallpic').offsetHeight+border*2*isIE;

  bigbox.style.borderWidth=border;

  bigbox.style.width=bigX+border*2*isIE;

  bigbox.style.height=bigY+border*2*isIE;

  view.style.left=smallbox.offsetLeft + border;

  view.style.top=smallbox.offsetTop + border;

  view.style.width=viewX- !isIE*3+1;

  view.style.height=viewY- !isIE*3+1;

 }

 function move(e){

  var e = window.event?window.event:e;

  if (!isIE){vX=e.pageX-border-smallbox.offsetLeft;

  vY=e.pageY-border-smallbox.offsetTop}

  else{vX=e.offsetX;vY=e.offsetY}

  vX+=-viewX/2;

  vY+=-viewY/2;

  if (vX < 0) vX = 0;

  if (vY < 0) vY = 0;

  if (vX > smallX - viewX) vX = smallX - viewX;

  if (vY > smallY - viewY) vY = smallY - viewY;

  bigpico.style.marginLeft = - vX * bl;

  bigpico.style.marginTop = - vY * bl;

  view.style.left = vX + smallbox.offsetLeft + border;

  view.style.top = vY + smallbox.offsetTop + border;

 }

 //-->

 </script>

 <style type="text/css">

 <!--

 *{padding:0;margin:0}

 body{background:black}

 img{display:block;}

 #smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}

 #bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}

 #view{border:1px #ddd solid;width:0px;height:0px;position:absolute;font-size:0px}

 #head{text-align:center;line-height:40px;font:bold 16px/40px;color:pink}

 //-->

 </style>

  </HEAD>

  <body MS_POSITIONING="GridLayout">

   <form id="Form1" method="post" runat="server">

    <div id="head">图片loading...</div>

 <div id="smallbox"><img id="smallpic" src="Upimages/ShopImages/<%=simage%>" border="0" onmousemove="move(event)"></div>

 <div id="bigbox"><div id="bigpico"><img id="bigpic" src="Upimages/ShopImages/<%=zimage%>" border="0"></div></div>

 <div id="view" onmousemove="if (!isIE) move(event)"></div>

   </form>

  </body>

 </HTML>

其中的<%=simage%>,<%=zimage%>都是程序调用的。预览效果如下：

js图片放大镜 可动态更换图片的更多相关文章

  1. JQuery图片延迟加载插件,动态获取图片长宽尺寸

    以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...

  2. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

  3. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  4. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  5. [js开源组件开发]图片放大镜

    图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...

  6. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

  7. JS 图片放大镜

    今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...

  8. UGUI动态更换精灵图片

    //动态更换精灵图片 m_headimage.overrideSprite = Resources.Load("texture/"+info.HeadPortrait,typeof ...

  9. JS实现图片放大镜

    将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容.需要实现的效果如下: 基本实现思路为:右侧大盒子为一个可视 ...

随机推荐

  1. Oracle11.2.0.4 RAC安装文档

    1 环境配置 参考官方文档<Grid Infrastructure Installation Guide for Linux> 1.1 软件环境 操作系统: [root@howe1 ~]# ...

  2. mysql和mysqli的区别

    看书.看视频的时候一直没有搞懂mysqli和mysql到底有什么区别.于是今晚“谷歌”一番,整理一下.需要的朋友可以参考下.   一: PHP-MySQL 是 PHP 操作 MySQL 数据库最原始的 ...

  3. 用python随机生成数据，再插入到postgresql中

    用python随机生成学生姓名,三科成绩和班级数据,再插入到postgresql中. 模块用psycopg2 random import random import psycopg2 fname=[' ...

  4. 关于HTML在手机端自适应的一个问题

    在写页面的时候 一直以为是自己调节的大小,结果页面跳出来的效果完全不适应手机的尺寸和宽度 其实主要是因为head头中没有放自适应标签导致:下面就让我们来认识一下这款神器吧! 其实主要就是改掉HTML页 ...

  5. 在JasperReport中填充JavaBean（4）

    使用Parameters参数对象传递字符串的示例,本节将演示打印List接口中Userinfo.java实体类的示例,打印的数据源不是来自于Parameters对象,而是JRBeanCollectio ...

  6. LoadRunner利用ODBC编写MySql脚本

    最近做了几周的LoadRunner测试,有一些心得,记录下来,以便以后查找. LoadRunner测试数据库是模拟客户端去连接数据库服务器,因此,需要协议(或者说驱动的支持).LoadRunner本身 ...

  7. Android DrawerLayout 点击事情穿透

    今天使用DrawerLayout做网易4.4版本侧边栏发现点击DrawerLayout空白部分,下面部分content会获得点击事件.解决方法是在<!-- The navigation draw ...

  8. 转:关于rename命令ubuntu下的用法

    下面是我的遭遇:上午想批量改几个文件的名字,觉得mv在批量方面不够方便,百度到了rename这个命令,原谅我吧,我总是在百度不到结果时才去看google,以后还是少去百度的好国内很多贴子都在说linu ...

  9. 编译型/解释型语言,什么时候用shell

    编译型语言 很多传统的程序设计语言,例如Fortran.Ada.Pascal.C.C++和Java,都是编译型语言.这类语言需要预先将我们写好的源代码(source code)转换成目标代码(obje ...

  10. 【转】win32，win64编程永恒;语言编程需要注意的64位和32机器的区别

    原文网址:http://www.cnblogs.com/kex1n/archive/2010/10/06/1844737.html 一.数据类型特别是int相关的类型在不同位数机器的平台下长度不同.C ...