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

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

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

参见下面的截图:

jQuery-鼠标经过显示大图并跟随鼠标效果插件_第1张图片

图片放大预览效果截图

 

使用方法简要说明: 1.需要借助a标签的href属性,此jQuery插件的原理是当鼠标移至缩略图(或链接文字时),会加载一段含有href指向路径的大图html片段,该片段根据鼠标的位置绝对定位。于是产生了鼠标移到缩略图上显示大图的效果。大图的地址就是a标签的href属性的内容。例如:缩略图 如果此a标签含有显示大图的方法,则页面就会显示href所指向的“xx.jpg”这个图片。 2.使用的方法是:目标选择器.preview();例如上面的缩略图就可以使用$(“a”).preview();这段代码实现鼠标移到“缩略图”这个文字链接上显示xx.jpg这张图片的效果。 3.仅支持png,gif,jpg,bmp四种格式的图片,您可以修改插件代码的正则表达式扩展支持的图片格式类型。

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

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

转载于:https://www.cnblogs.com/palysh/p/4651028.html

你可能感兴趣的:(jQuery-鼠标经过显示大图并跟随鼠标效果插件)