jquery素材积累----图片跟随鼠标移动

杰克工作室

效果图：

代码：

<script>
/* 图片跟随鼠标JS代码 */
(function($){
  $.fn.preview = function(){
    var xOffset = 10;
    var yOffset = 20;
    var w = $(window).width();
    $(this).each(function(){
      $(this).hover(function(e){
        var imgsrc = $(this).attr("img-src");
        var imgalt = $(this).text();
        if(imgsrc.length < 23) return false;
        if(/.png$|.gif$|.jpg$|.bmp$/.test(imgsrc)){
          $("body").append("<div id='preview'><div><img src='"+imgsrc+"' style='max-width:400px' /><p>"+imgalt+"</p></div></div>");
        }else{
          $("body").append("<div id='preview'><div><p>"+imgalt+"</p></div></div>");
        }
        $("#preview").css({
          position:"absolute",
          padding:"4px",
          border:"1px solid #f3f3f3",
          backgroundColor:"#eeeeee",
          top:(e.pageY - yOffset) + "px",
          zIndex:1000
        });
        $("#preview > div").css({
          padding:"5px",
          backgroundColor:"white",
          border:"1px solid #cccccc"
        });
        $("#preview > div > p").css({
          textAlign:"center",
          fontSize:"12px",
          padding:"8px 0 3px",
          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);
 
$("span.preview").preview();
</script>

使用方法：

<span class="preview" img-src="//www.baidu.com/logo.png">素材二</span>