财客网
您的当前位置:首页jQuery实现鼠标滑过预览大图效果

jQuery实现鼠标滑过预览大图效果

来源:财客网


本文主要介绍了jQuery实现鼠标滑过预览图片大图效果的方法,涉及jQuery鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下,希望能帮助到大家。

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

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

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

js代码:


HTML 部分:

上传预览图片:<br>
<input id="f1" name="f1" type="file" /><br>
<img id="img1" width="120" height="60" src="logo-jq.gif">
<p id="large"></p>
鼠标滑过预览图片:<br>
<img width="120" height="60" src="logo-jq.gif"><br>
显示全文