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


Posted in jQuery onApril 26, 2017

本文实例讲述了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.load()和Jsp的include的区别
Apr 12 jQuery
Jquery-data的三种用法
Apr 18 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 #jQuery
jquery.form.js异步提交表单详解
Apr 25 #jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 #jQuery
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 #jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
You might like
php 传值赋值与引用赋值的区别
2010/12/29 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
php实现telnet功能示例
2014/04/08 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
js 走马灯简单实例
2013/11/21 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
node.js调用C++开发的模块实例
2015/07/03 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
Python 深入理解yield
2008/09/06 Python
python 将字符串转换成字典dict
2013/03/24 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
个人简历的自荐信
2013/10/23 职场文书
中专毕业生自我鉴定范文
2013/11/09 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
结婚主持人致辞
2015/07/28 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers