jQuery实现鼠标滑过预览图片大图效果的方法
本文实例讲述了jQuery实现鼠标滑过预览图片大图效果的方法。分享给大家供大家参考,具体如下:
需求是这样的: 鼠标移动的图片上,同时显示预览的大图,鼠标移开,则隐藏。
原理其实很简单,首先需要一个div , 然后动态通过jQuery方法添加<img>标签,改变这个<img>的样式(宽,高),以及需要显示的图片路径。
js代码:
$(function(){ var ei = $("#large"); ei.hide(); $("#img1, img").mousemove(function(e){ ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show(); }).mouseout( function(){ ei.hide(); }) $("#f1").change(function(){ $("#img1").attr("src","file:///"+$("#f1").val()); }) });
HTML 部分:
上传预览图片:<br> <input id="f1" name="f1" type="file" /><br> <img id="img1" width="120" height="60" src="logo-jq.gif"> <div id="large"></div> 鼠标滑过预览图片:<br> <img width="120" height="60" src="logo-jq.gif"><br>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
- jQuery实现等比例缩放大图片让大图片自适应页面布局
- 基于jquery的防止大图片撑破页面的实现代码(立即缩放)
- jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
- jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
- jQuery实现大图轮播
- jQuery实现的小图列表,大图展示效果幻灯片示例
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- jQuery实现点击小图片淡入淡出显示大图片特效
- jQuery实现点击查看大图并以弹框的形式居中
- 基于jQuery插件实现点击小图显示大图效果
- jquery实现移动端点击图片查看大图特效
- jQuery实现点击小图显示大图代码分享
- jquery 图片点击放大预览功能详解
相关文章
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示2012-08-08锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
锋利的jQuery 要点归纳 jQuery中的事件和动画(上:事件篇)2010-03-03jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
这篇文章主要介绍了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果,可实现仿相册插件切换效果,并附代码demo源码供读者下载参考,需要的朋友可以参考下2016-02-02
最新评论