[js放大镜]使用js放大图片的特效-JS特效-爱易网页

[js放大镜]使用js放大图片的特效

日期：2014-05-18　浏览次数：20101 次

以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Images zoom-out view sample. Brought to you by 斩梦人.天天 
QQ:22062019</title>
<script language="JavaScript">
<!--
var dshowW=450; //默认预览图宽度(可由小图的showW,showH动态指定)
var dshowH=300; //默认预览图高度
var bborder=1; //大图边框
var sborder=1; //小图边框
var vborder=1; //小预览图边框
var bigW,bigH,smallW,smallH,showW,showH,viewW,viewH;//大图,小图,预览窗,小预览窗
var nview,nflag,picstatus,tempo,abox,zoomX,zoomY;
//初始化
window.onload=function init(){
 isIE=window.event?1:0;
 picshow.style.borderWidth=bborder;
 picshow.style.width=dshowW;
 picshow.style.height=dshowH;
 bpic.style.display="";
 abox=document.body.getElementsByTagName("div"); //初始化所有小图
 for (n=0;n<abox.length;n++)
  if (abox[n].className=="picbox"){
   var o=abox[n];
   var view=getview(o);
   var img=getimg(o);
   view.style.borderWidth=vborder;
   o.style.borderWidth=sborder;
   o.style.width=img.width+sborder*2*isIE;
   o.style.height=img.height+sborder*2*isIE;
   o.setAttribute("pid",n); //小图标记,主键唯一
   if (o.getAttribute("show")=="show") loadpic(o);
   o.onmouseout=function (){setTimeout(nview.style.visibility='hidden');}
  }
}
//载入图片
function loadpic(o){ 
 var view=getview(o);
 var img=getimg(o);
 bpic.style.display="none";
 nview=view; //标记活动小预览窗
 nflag=o.getAttribute("pid"); //当前图片标记,用来判断切换图片
 //改变预览窗大小
 if (img.getAttribute("showW")!=null) showW=parseInt(img.getAttribute("showW"));
 else showW=dshowW;
 if (img.getAttribute("showH")!=null) showH=parseInt(img.getAttribute("showH"));
 else showH=dshowH;
 picshow.style.width=showW+isIE*bborder*2;
 picshow.style.height=showH+isIE*bborder*2;
 loading.style.marginTop=(showH-loading.offsetHeight)/2;
 if (img.getAttribute("dLeft")) bpic.style.marginLeft=-parseInt(img.getAttribute("dLeft"));
 if (img.getAttribute("dTop")) bpic.style.marginTop=-parseInt(img.getAttribute("dTop"));
 picstatus="loading";
 tempo=o;
 bpic.src=img.lowsrc;
}
//图片载入完成
function loaddone(o){
 bpic.style.display="block";
 var view=getview(o);
 var img=getimg(o);
 smallW=img.width; //改变小图,小预览窗大小
 smallH=img.height;
 bigW=bpic.width;
 bigH=bpic.height;
 if (showW>bigW){//如果预览图比大图大,则等于大图
  showW=bigW;
  picshow.style.width=showW+isIE*bborder*2;
 }
 if (showH>bigH){
  showH=bigH;
  picshow.style.height=showH+isIE*bborder*2;
 }
 zoomX=bigW/smallW;
 zoomY=bigH/smallH;
 viewW=showW*smallW/bigW;
 viewH=showH*smallH/bigH;
 nview.style.width=viewW-vborder*2*!isIE;
 nview.style.height=viewH-vborder*2*!isIE;
 nview.style.display="block"; 
 img.style.top=-nview.offsetHeight;
 if (!nview.style.left) nview.style.left=0;
 if (!nview.style.top) nview.style.top=0;
 picstatus="done"
}
//移动事件
function move(e,o,flag){ //flag,对象来源标记,FF下view的定位需要
 o=isIE?o.parentElement:o.parentNode;
 if (o.getAttribute("pid")!=nflag){ //判断是否切换了图片
  nview.style.visibility="hidden"; 
  loadpic(o); //载入新图片
 }
 if (picstatus="done"){ //如果大图载入完毕
  if (nview.style.visibility="hidden") nview.style.visibility="visible";
  var e=isIE?window.event:e;
  if (isIE==0){ //分别获取FF或IE的view位置
   if (flag==1){ //由于o的来源不同,使用不同的算法定位
    vX=e.layerX+parseInt(nview.style.left)-nview.offsetWidth/2-vborder;
    vY=e.layerY+parseInt(nview.style.top)-nview.offsetHeight/2-vborder;
   }else{
    vX=e.layerX-nview.offsetWidth/2-vborder;
    vY=e.layerY-nview.offsetHeight/2-vborder;
   }
  }
  else{
   vX=e.offsetX-nview.offsetWidth/2;
   vY=e.offsetY-nview.offsetHeight/2;
  } 
  if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
  if (vY < 0) vY = 0;
  if (vX > smallW-viewW) {vX=smallW-viewW;mX=bigW-showW&#</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="1599">下一篇：简单的js图片拉伸效果特效</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34280' title='途牛旅游网今晚挂牌纳斯达克 融资1亿美元' target="_blank">
                        途牛旅游网今晚挂牌纳斯达克 融资1亿美元</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/439' title='工商下月将整治手机市场' target="_blank">
                        工商下月将整治手机市场</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6865' title='王建宙解构OTT效劳 中移动重塑飞信平台' target="_blank">
                        王建宙解构OTT效劳 中移动重塑飞信平台</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34278' title='揭秘：阿里巴巴“无人认领”的三成股权都归谁' target="_blank">
                        揭秘：阿里巴巴“无人认领”的三成股权都归谁</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34267' title='华为变阵:任正非调整三大业务布局' target="_blank">
                        华为变阵:任正非调整三大业务布局</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34139' title='iOS7拖累iPad 5、iPad mini2发布 传十月份推出' target="_blank">
                        iOS7拖累iPad 5、iPad mini2发布 传十月份推出</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34235' title='国内云服务商存在尴尬：“远程机房+移动大硬盘”模式' target="_blank">
                        国内云服务商存在尴尬：“远程机房+移动大硬盘”模式</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34390' title='微信企业号必须搬走四座大山，否则只能铩羽而归！' target="_blank">
                        微信企业号必须搬走四座大山，否则只能铩羽而归！</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34335' title='杨元庆去年总薪酬1.33亿元' target="_blank">
                        杨元庆去年总薪酬1.33亿元</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2025 爱易网页 当前在线：307人　
        网站在13时9分16秒内访问总人数：135970人
    当前 18.35%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>