jquery 图片放大效果

一、主要的jquery代码

  
 
 
   
  
  (function($){ 
   
  
  $.fn.preview=function(){ 
   
  
  varxOffset=10; 
   
  
  varyOffset=20; 
   
  
  varw=$(window).width(); 
   
  
  $(this).each(function(){ 
   
  
  $(this).hover(function(e){ 
   
  
  if(/.png$|.gif$|.GIF$|.jpg$|.JPG$|.bmp$|.BMP$/.test($(this).attr("bigpic"))){ 
   
  
  $("body").append("<divid='preview'><div><imgsrc=\'#\'" /span>+$(this).attr('bigpic')+"'/><p>"+$(this).attr('title')+"</p></div></div>"); 
   
  
  }else{ 
   
  
  $("body").append("<divid='preview'><div><p>"+$(this).attr('title')+"</p></div></div>"); 
   
  
  } 
   
  
  $("#preview").css({ 
   
  
  position:"absolute", 
   
  
  padding:"4px", 
   
  
  border:"1pxsolid#f3f3f3", 
   
  
  backgroundColor:"#eeeeee", 
   
  
  top:(e.pageY-yOffset)+"px", 
   
  
  zIndex:1000 
   
  
  }); 
   
  
  $("#preview>div").css({ 
   
  
  padding:"5px", 
   
  
  backgroundColor:"white", 
   
  
  border:"1pxsolid#cccccc"
   
  
  }); 
   
  
  $("#preview>div>p").css({ 
   
  
  textAlign:"center", 
   
  
  fontSize:"12px", 
   
  
  padding:"8px03px", 
   
  
  margin:"0"
   
  
  }); 
   
  
  if(e.pageX<w/2){ 
   
  
  $("#preview").css({ 
   
  
  left:e.pageX+xOffset+"px", 
   
  
  right:"auto"
   
  
  }).fadeIn("fast"); 
   
  
  }else{ 
   
  
  $("#preview").css("right",(w-e.pageX+yOffset)+"px").css("left","auto").fadeIn("fast"); 
   
  
  } 
   
  
  },function(){ 
   
  
  $("#preview").remove(); 
   
  
  }).mousemove(function(e){ 
   
  
  $("#preview").css("top",(e.pageY-xOffset)+"px") 
   
  
  if(e.pageX<w/2){ 
   
  
  $("#preview").css("left",(e.pageX+yOffset)+"px").css("right","auto"); 
   
  
  }else{ 
   
  
  $("#preview").css("right",(w-e.pageX+yOffset)+"px").css("left","auto"); 
   
  
  } 
   
  
  }); 
   
  
  }); 
   
  
  }; 
   
  
  })(jQuery);

二、html代码

  
 
 
   
  
  <aclass="preview"href="150.html"bigpic="http://show.icarlus.com//Upload/photos/4135314.jpg"title="史贝贝"><imgsrc="http://show.icarlus.com//Upload/photos/4135314.jpg"/></a>
   
  
  <aclass="preview"href="97.html"bigpic="http://show.icarlus.com//Upload/photos/419267.jpg"title="李贤玲"><imgsrc="http://show.icarlus.com//Upload/photos/419267.jpg"/></a>

更多相关文章

随机推荐