dw如何点击图片放大的代码_JavaScript点小图弹出放大图片的代码

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">JavaScript点小图弹出放大图片的代码 - www.webdm.cn*{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;}ldh={

$:function(o){returntypeofo=="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);returnthis},

css:function(who,key){if(who.style[key]!='')returnwho.style[key];if(!!window.ActiveXObject)returnwho.currentStyle[key];returndocument.defaultView.getComputedStyle(who,"")

.getPropertyValue(key.replace(/([A-Z])/g,"-$1").toLowerCase());

},

pos:function(who){varp=ldh.$(who),x=0,y=0;while(p&&!(/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);varisbg=/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&&isbg)fm=200;variFx=this.fx(fm,val,s);

clearInterval(who['timer_'+attr]);

who['timer_'+attr]=setInterval(function(){varv=iFx();

who.style[attr]=v+'px'+by;if(v==val){    fn&&fn();clearInterval(who['timer_'+attr]);};

},18);returnthis;

},

fx:function(form,to,s){varm=Math[form

}

};

ldh.on(window,'load',function(){varfxImg=document.createElement('IMG');

fxImg.className='fxImg';

document.body.appendChild(fxImg);varpos=ldh.pos('preview');varlinks=ldh.$$('A',ldh.$('menuPic'));for(vari=0;i

,attr={href:'javascript:void(0);',imgsrc:$p.src,x:mypos.x,y:mypos.y,'url':url};for(varIdinattr){$[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.οnclick=function(){location=This.url};

ldh.move(fxImg,'left',pos.x).move(fxImg,'top',pos.y,0.4,function(){ldh.move(fxImg,'height',400)});

});

}

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值