jQuery实现鼠标滑过预览图片大图效果的方法

前端之家收集整理的这篇文章主要介绍了jQuery实现鼠标滑过预览图片大图效果的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery实现鼠标滑过预览图片大图效果方法分享给大家供大家参考,具体如下:

需求是这样的: 鼠标移动的图片上,同时显示预览的大图,鼠标移开,则隐藏。

原理其实很简单,首先需要一个div,然后动态通过jQuery方法添加标签,改变这个的样式(宽,高),以及需要显示图片路径。

js代码

').show(); }).mouSEOut( function(){ ei.hide(); }) $("#f1").change(function(){ $("#img1").attr("src","file:///"+$("#f1").val()); }) });

HTML 部分:

上传预览图片:

logo-jq.gif">
鼠标滑过预览图片:
logo-jq.gif">

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

猜你在找的jQuery相关文章