淘宝网UED相册图片放大展示特效
鼠标经过图片时放大显示,淘宝UED官方网站就有这个效果,很多网站都用这种图片放大预览特效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="博客,个人博客,优秀个人博客,优秀博客,博客网站,js特效,js特效代码,广告代码,www.wuming.ren" /> <meta name="description" content="欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren" /> <title>淘宝网UED相册图片放大展示特效-大陆博客</title> <script src="/img/jquery_zzjs.js"></script> <style> body { font-size:12px; padding:0} </style> <script language="javascript"> pic={ href:"/img/20111114wwwzzjsnet_1.jpg", boxSize:250, width:1330, height:2128, creatImg:function(id){//创建图片 var width = $("#"+id).css("width"); $("#"+id).append("<img src='"+this.href+"' style='width:"+width+"'/>"); $("#"+id).append("<div id='bigImg'></div>"); var that = this; $("#"+id).mousemove(function(e){ var x = e.pageX-$(this).offset().left; var y = e.pageY-$(this).offset().top; if((x<parseInt(width) && x>0) && (y<that.height/that.multiple() && y>0)){ $("#bigImg").fadeIn(200); that.creatBigImg(x,y); }else{ $("#bigImg").fadeOut(200); } }); //欢迎来到大陆8博客,我们的网址是www.64p c.com,大陆-博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren }, multiple:function(id){//和实际图片的倍数关系 return this.width/parseInt($("#www_wuming_ren").css("width")); }, bigBoxPost:function(x,y){//大图的坐标 return [x-this.boxSize/2,y-this.boxSize/2]; }, bigLoadPost:function(x,y){//大图的坐标 return [-(x*this.multiple()-this.boxSize/2),-(y*this.multiple()-this.boxSize/2)]; }, creatBigImg:function(x,y){ var that = this; $("#bigImg").css({ width:that.boxSize, height:that.boxSize, border:"#FFF 5px solid", position:"absolute", top:that.bigBoxPost(x,y)[1], left:that.bigBoxPost(x,y)[0], background:"url("+that.href+") no-repeat", backgroundPosition:that.bigLoadPost(x,y)[0]+"px "+that.bigLoadPost(x,y)[1]+"px" }) } }//欢迎来到大陆1博客,我们的网址是www.64 pc.com,大陆f博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren $(document).ready(function(){ pic.creatImg("www_wuming_ren"); })//欢迎来到大陆 博客,我们的网址是www.6 4pc.com,大陆3博客官方网站收集的各种高质量js特效代码、广告代码分享,海量特效代码精品收藏,总有一款适合您的js特效代码。www.wuming.ren </script> </head> <body > 本文来源于<a href="http://www.64pc.com/">大陆博客</a>,百度一下:大陆博客,直接找到我们的官方网站。<hr> <!--欢迎来到大陆博客,我们的网址是www.64pc.com,大陆博客官方网站收集的各种高质量js特效代码、广告代码分享,海量js特效代码精品收藏,总有一款适合您的js特效。www.wuming.ren--> <script type="text/javascript" src="http://www.wuming.ren/a/tc.js"></script> 需要加载js文件,请刷新页面后看效果! <div id="www_wuming_ren" style=" width:500px; position: relative; margin:100px;"></div> </body > </html>
评论