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

  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
  2.  <HTML>
  3.   <HEAD>
  4.    <title>test</title>
  5.    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  6.    <meta name="CODE_LANGUAGE" Content="C#">
  7.    <meta name="vs_defaultClientScript" content="JavaScript">
  8.    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  9.    <script language="JavaScript">
  10.  <!--
  11.  var smallX = 200; //缩略图宽度
  12.  var bigX = 600; //预览窗大小,可以任意设置
  13.  var bigY = 450;
  14.  var srcX = -1; //原图大小,可以任意设置. 如都为-1将使用图片原始大小
  15.  var srcY = -1;
  16.  var border = 5; //边框
  17.  var smallY,viewX,viewY,bl,isIE,vX,vY;
  18.  window.onload=function (){
  19.   head.innerHTML="图片已载入";
  20.   isIE=window.event?1:0;
  21.   if (srcX==-1 && srcY==-1){srcX=document.getElementByIdx('bigpic').width;srcY=document.getElementByIdx('bigpic').height;}
  22.   else{document.getElementByIdx('bigpic').width=srcX;document.getElementByIdx('bigpic').height=srcY;}
  23.   smallY=srcY*smallX/srcX;
  24.   viewX=bigX/srcX*smallX; //预览范围
  25.   viewY=bigY/srcY*smallY;
  26.   bl=srcX/smallX; //缩小比例
  27.   document.getElementByIdx('smallpic').width=smallX;
  28.   document.getElementByIdx('smallpic').height=smallY;
  29.   smallbox.style.borderWidth=border;
  30.   smallbox.style.width=document.getElementByIdx('smallpic').offsetWidth+border*2*isIE;
  31.   smallbox.style.height=document.getElementByIdx('smallpic').offsetHeight+border*2*isIE;
  32.   bigbox.style.borderWidth=border;
  33.   bigbox.style.width=bigX+border*2*isIE;
  34.   bigbox.style.height=bigY+border*2*isIE;
  35.   view.style.left=smallbox.offsetLeft + border;
  36.   view.style.top=smallbox.offsetTop + border;
  37.   view.style.width=viewX- !isIE*3+1;
  38.   view.style.height=viewY- !isIE*3+1;
  39.  }
  40.  function move(e){
  41.   var e = window.event?window.event:e;
  42.   if (!isIE){vX=e.pageX-border-smallbox.offsetLeft;
  43.   vY=e.pageY-border-smallbox.offsetTop}
  44.   else{vX=e.offsetX;vY=e.offsetY}
  45.   vX+=-viewX/2;
  46.   vY+=-viewY/2;
  47.   if (vX < 0) vX = 0;
  48.   if (vY < 0) vY = 0;
  49.   if (vX > smallX - viewX) vX = smallX - viewX;
  50.   if (vY > smallY - viewY) vY = smallY - viewY;
  51.   bigpico.style.marginLeft = - vX * bl;
  52.   bigpico.style.marginTop = - vY * bl;
  53.   view.style.left = vX + smallbox.offsetLeft + border;
  54.   view.style.top = vY + smallbox.offsetTop + border;
  55.  }
  56.  //-->
  57.  </script>
  58.  <style type="text/css">
  59.  <!--
  60.  *{padding:0;margin:0}
  61.  body{background:black}
  62.  img{display:block;}
  63.  #smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
  64.  #bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
  65.  #view{border:1px #ddd solid;width:0px;height:0px;position:absolute;font-size:0px}
  66.  #head{text-align:center;line-height:40px;font:bold 16px/40px;color:pink}
  67.  //-->
  68.  </style>
  69.   </HEAD>
  70.   <body MS_POSITIONING="GridLayout">
  71.    <form id="Form1" method="post" runat="server">
  72.     <div id="head">图片loading...</div>
  73.  <div id="smallbox"><img id="smallpic" src="Upimages/ShopImages/<%=simage%>" border="0" onmousemove="move(event)"></div>
  74.  <div id="bigbox"><div id="bigpico"><img id="bigpic" src="Upimages/ShopImages/<%=zimage%>" border="0"></div></div>
  75.  <div id="view" onmousemove="if (!isIE) move(event)"></div>
  76.    </form>
  77.   </body>
  78.  </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. java Math.random()随机数的产生

    Math.random()是java内置产生随机数的函数,Math.random()能够产生[0,1)的浮点数,当我们要产生特定范围的数时,可以采用如下办法: 1.Math.random()*(最大数 ...

  2. Xcode快捷键 ---- 提高效率

    Mac中主要有四个修饰键,分别是Command,Control,Option和Shift.     1. ⌘ + L 搜索行数,输入行数,调到指定行数   2.⌘ + shift + O 查询flie ...

  3. RegExp子模式- "()"

    读书笔记 把JavaScript权威指南拿出来瞅瞅,正巧看到了第十章 正则表达式的模式匹配 最初接触js的时候,基本上都是在做验证.什么数字验证.命名验证.身份证格式验证.电话号码验证.都是用正则表达 ...

  4. (搬运工)国内顺利使用Google的另类技巧

    在特殊的地方和特殊的时间,流畅顺利使用Google的方法也会变得很特殊.分享一些奇葩的Google使用方法,通过下列网址也可以使用Google来搜索:http://www.GoogleStable.c ...

  5. GDB调试一

    http://blog.csdn.net/haoel/article/details/2881 GDB主要调试的是C/C++的程序.要调试C/C++的程序,首先在编译时,我们必须要把调试信息加到可执行 ...

  6. CString与char *互转总结

    1 前言 今天在网上看论坛,发现大家对CString与Char *互转各说一词,其实我发现提问者所说的情况与回答问题的人完全不是同一情况,这里做一总结. 首先大家得清楚一件事,一般在网上提出问题的人大 ...

  7. js工厂模式

    设计工厂模式是为了创建对象.通常在类或者类的静态方法中实现,具有两个目标.其中一个是:当创建相似对象时执行重复操作: 另外一个目标是:编译时不知道具体类型(类)的情况下,为工厂客户提供一种创建对象的接 ...

  8. Maven基础教程

    更多内容请参考官方文档:http://maven.apache.org/guides/index.html 官方文档很详细,基本上可以查找到一切相关的内容. 另外,快速入门可参考视频:孔浩的maven ...

  9. Liqn基础

    Linq:语言集成查询 (LINQ) 是 Visual Studio 2008 中引入的一组功能,可为 C# 和 Visual Basic 语言语法提供强大的查询功能. LINQ 引入了标准易学的数据 ...

  10. 如何从数据库(实体提供者)读取安全用户(转自http://wiki.jikexueyuan.com/project/symfony-cookbook/entity-provider.html)

    Symfony 的安全系统可以通过活动目录或开放授权服务器像数据库一样从任何地方加载安全用户.这篇文章将告诉你如何通过一个 Doctrine entity 从数据库加载用户信息. 前言 在开始之前,您 ...