您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 图片特效 >

    淘宝UED的相册展示效果 图片放大镜

    时间:2013-08-23 15:53 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    <!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=utf-8" />
    <title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <style>
    body { font-size:12px; padding:0}
    </style>
    <script language="javascript">
    pic={
     href:"http://js.alixixi.com/UploadPic/2011-3/b.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);
       }
      });
      
     },
     
     multiple:function(id){//和实际图片的倍数关系
      return this.width/parseInt($("#pic").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"
      })
     }
    }
    $(document).ready(function(){
     pic.creatImg("pic");
    })
    </script>
    </head>
    <body >
    <div id="pic" style=" width:500px; position: relative; margin:100px;"></div>
    </body >
    </html>
    淘宝UED的相册展示效果 图片放大镜由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/5469.html
    标签:网站源码