JavaScript点小图弹出放大图片的代码

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 332 次

代码简介：类似于点击小图预览图片的功能，在淘宝网可以见到这种图片展示技巧，当用鼠标点击小图的时候，大图会从小图的位置突然弹出来，而且慢慢放大，至于这么大到什么程序，这个需要由您来设定，实际上本特效还

代码简介：

类似于点击小图预览图片的功能，在淘宝网可以见到这种图片展示技巧，当用鼠标点击小图的时候，大图会从小图的位置突然弹出来，而且慢慢放大，至于这么大到什么程序，这个需要由您来设定，实际上本特效还是非常有用的。

代码内容：

View Code

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;  &lt;head&gt;  &lt;title&gt;JavaScript点小图弹出放大图片的代码 - www.webdm.cn&lt;/title&gt;  &lt;meta http-equiv="content-type" content="text/html;charset=gb2312"&gt;  &lt;style type="text/css"&gt;  *{margin:0;padding:0;}  img{border:0;border:1px #ccc solid;}  body{font-size:12px;background:#fff;}  a{color:#333;text-decoration:none;}  a:hover{text-decoration:none;}  .main{position:relative;width:640px;margin:20px auto;}  .left{float:left;width:220px;}  /*www.webdm.cn*/  .left li{float:left;margin-right:8px;list-style:none;}  .right{float:right;width:400px;}  .right a{float:left;margin-right:10px;padding:5px 10px;}  .right a:hover{background:#ff9000;color:#fff;}  .left a:hover{position:relative;top:1px;left:1px;}  #imglink{float:none;margin:0;padding:0;}  #links,#more{margin-top:400px;}  .fxImg{position:absolute;left:0;top:0;background:#fff;display:none;cursor:pointer;padding:5px;}  &lt;/style&gt;  &lt;script type="text/javascript"&gt;  ldh={      $:function(o){return typeof o=="string"?document.getElementById(o):o},      $$:function (o,p){return (p==undefined?document:this.$(p)).getElementsByTagName(o)},      on:function(o,type,fn){o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false);return this},  css:function(who,key){  if(who.style[key]!='')return who.style[key];  if(!!window.ActiveXObject)return who.currentStyle[key];  return document.defaultView.getComputedStyle(who,"")  .getPropertyValue(key.replace(/([A-Z])/g,"-$1").toLowerCase());       },      pos:function(who){          var p=ldh.$(who),x=0,y=0;          while(p&amp;&amp;!(/html|body/i.test(p.tagName))){x+=p.offsetLeft;y+=p.offsetTop;p=p.offsetParent;};          return {'x':x,'y':y};      },      move:function(who,attr,val,s,fn){          who=this.$(who);          var isbg=/backgroundPosition/i.test(attr)              ,fm=parseInt(this.css(who,attr))||0              ,by=isbg?((who.getAttribute('bg_y')||0)+'px'):'';          if(this.css(who,attr)==undefined&amp;&amp;isbg)fm=200;          var iFx=this.fx(fm,val,s);          clearInterval(who['timer_'+attr]);          who['timer_'+attr]=setInterval(function (){              var v=iFx();              who.style[attr]=v+'px '+by;                          if(v==val){    fn&amp;&amp;fn();clearInterval(who['timer_'+attr]);};          },18);return this;      },      fx:function(form,to,s){          var m=Math[form&lt;to?'ceil':'floor'];          return function (){return form+=m((to-form)*(s||0.4))};      }  };  ldh.on(window,'load',function (){      var fxImg=document.createElement('IMG');      fxImg.className='fxImg';      document.body.appendChild(fxImg);      var pos=ldh.pos('preview');      var links=ldh.$$('A',ldh.$('menuPic'));      for (var i=0;i&lt;links.length;++i ) {          var $=links[i],$p=ldh.$$('IMG',$)[0],mypos=ldh.pos($p),url=$.href          ,attr={href:'javascript:void(0);',imgsrc:$p.src,x:mypos.x,y:mypos.y,'url':url};          for (var Id in attr){$[Id]=attr[Id]}          ldh.on($,'click',function (){              fxImg.src=this.imgsrc;              var $$=fxImg.style,This=this;              $$.left=this.x+'px';              $$.top=this.y+'px';              $$.display='block';                  $$.height='140px';              fxImg.onclick=function (){location=This.url};              ldh.move(fxImg,'left',pos.x).move(fxImg,'top',pos.y,0.4,function(){ldh.move(fxImg,'height',400)});          });      }  })  &lt;/script&gt;  &lt;/head&gt;  &lt;body&gt;  &lt;div class="main"&gt;      &lt;div class="left" id="menuPic"&gt;          &lt;ul&gt;              &lt;li&gt;&lt;a href="http://www.webdm.cn" &gt;&lt;img src="http://www.webdm.cn/images/wall1_s.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;              &lt;li&gt;&lt;a href="http://www.webdm.cn"&gt;&lt;img src="http://www.webdm.cn/images/wall2_s.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;              &lt;li&gt;&lt;a href="http://www.webdm.cn"&gt;&lt;img src="http://www.webdm.cn/images/wall3_s.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;          &lt;/ul&gt;      &lt;/div&gt;      &lt;/div&gt;  &lt;/body&gt;  &lt;/html&gt;  &lt;br /&gt;  &lt;p&gt;&lt;a href="http://www.webdm.cn"&gt;网页代码站&lt;/a&gt; - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！&lt;/p&gt;

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。