jQuery-鼠标经过显示大图并跟随鼠标效果插件

这篇文章发布于 2009年10月17日，星期六，20:00，归类于 jQuery相关。 阅读 102556 次, 今日 2 次 14 条评论

 

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=281

今天看完了《JavaScript语言精粹》这本书，还有时间，就决定写写jQuery插件练练手，实现的效果是，鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。

参见下面的截图：

大图跟随鼠标预览效果截图

使用方法简要说明：

  1. 需要借助<a>标签的href属性，此jQuery插件的原理是当鼠标移至缩略图（或链接文字时），会加载一段含有href指向路径的大图HTML片段，该片段根据鼠标的位置绝对定位。于是产生了鼠标移到缩略图上显示大图的效果。大图的地址就是<a>标签的href属性的内容。例如： 
    <a href="xx.jpg">缩略图</a>

    如果此<a>标签含有显示大图的方法，则页面就会显示href所指向的"xx.jpg"这个图片。

  2. 使用的语法： 
    $().preview()

    例如上面的：

    <a href="xx.jpg">缩略图</a>

    就可以使用$("a").preview()这段代码实现鼠标移到“缩略图”这个文字链接上显示xx.jpg这张图片的效果。

  3. 仅支持png,gif,jpg,bmp四种格式的图片，您可以修改插件代码的正则表达式扩展支持的图片格式类型。

这里是：demo实例页面 | 源文件下载

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=281

相关文章
«上一篇
下一篇»
分享到：
标签： , , , , ,


发表评论（目前14 条评论）

  1. okbb说道：
    2014年12月23日 18:45

    不错，请教下，鼠标停留延时3秒再显示，怎么弄。

    回复
  2. reyrey说道：
    2013年04月17日 23:40

    挺好的，就是有点小问题，当改变窗口的时候，宽度不会重新计算，就不准了，还有出现x y 滚动条的时候，就不准了。

    回复
  3. KinFu说道：
    2012年12月15日 12:21

    有bug,窗口不是全屏打开显示后再放大位置不对

    回复
  4. 笑笑说道：
    2012年06月18日 12:57

    我那个没有链接，只是 img 的鼠标划过效果，怎么修改你的代码呢？求教

    回复
  5. wfeitian说道：
    2011年02月9日 15:06

    你好，我今天用了你的这个插件，在opera 11下测试很完美，但是在IE 8下测试就无任何显示，我看了你的DEMO页面在IE8 下面也没有显示，请问有没有解决的办法？

    回复
  6. 明佳说道：
    2010年12月14日 17:33

    今天干好学这个效果。。。呵呵，看看哈能写出来。。。

    回复
  7. 向远说道：
    2010年12月9日 20:08

    如果图片过大的，显示会向下拉长页面。能不能显示大图时，如果向下看不完整，让其向上显示。

    回复
  8. 韩衣8说道：
    2010年09月8日 16:47

    很不错，我拿走了！谢过博主

    回复
  9. 请教说道：
    2010年05月11日 09:37

    最近遇到了一个难题，用单纯的链接 测试是没有问题的，但是我用的是热点切的图 ，结果测试不好用，能不能给点建议啊 ，谢谢。期待您的回复

    回复
    • 张 鑫旭说道：
      2010年05月11日 23:39

      我看了下，没有任何问题，例如如下的HTML代码：
      <img usemap=”#preview” src=”http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg” border=”0″ />
      <map name=”preview”>
      <area class=”preview” shape=”rect” coords=”30,40,180,120″ href=”http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg” target=”_blank” title=”点击查看大图”>
      </map>

      同样使用$(function(){
      $(“area.preview”).preview();
      });

      只要一句话，就可以实现大图显示。

      我专门做了demo页面，您有兴趣可以看看：http://www.zhangxinxu.com/study/201005/image-map-area-preview.html

      回复
  10. WANGJIARONG说道：
    2010年03月17日 00:31

    路过。。。
    这篇文章好，学习中、
    关注博主

    回复
  11. sohung说道：
    2010年01月10日 01:55

    哈哈 很棒！

    回复
  12. 天文说道：
    2009年12月17日 20:44

    如果图片过大的，显示会不完整，显示大图的时候，大图的顶端和鼠标指针在同一水平线上，如果图片能够自适应，比如大图显示时 TOP 为10px.改如何修改！

    回复
    • 张 鑫旭说道：
      2009年12月17日 23:43

      您的意思是不是当图片过大时，大图相对于浏览器顶部10像素显示呢？如果是这样，需要判断鼠标当前y坐标+显示大图区域的高度是否超高当前浏览器可视区域的高度，如过超高，则置换top为10px。
      var h = function(){//获取浏览器可视区域高度
      if($.browser.msie){
      return document.compatMode == “CSS1Compat”? document.documentElement.clientHeight : document.body.clientHeight;
      }else{
      return self.innerHeight;
      }
      } ();

      再将$.mousemove(function(e){});中的$(“#preview”).css(“top”,(e.pageY – xOffset) + “px”) 改为if判断。

      if(e.pageY+$(“#preview”).width() > h){
      $(“#preview”).css(“top”,10);
      }else{
      $(“#preview”).css(“top”,(e.pageY – xOffset) + “px”)
      }

      回复