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

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

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

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

js代码

rush:js;"> $(function(){ var ei = $("#large"); ei.hide(); $("#img1,img").mousemove(function(e){ ei.css({top:e.pageY,left:e.pageX}).html('').show(); }).mouSEOut( function(){ ei.hide(); }) $("#f1").change(function(){ $("#img1").attr("src","file:///"+$("#f1").val()); }) });

HTML 部分:

rush:xhtml;"> 上传预览图片:

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

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

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

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...