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选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jquery插件实现轮播图效果
Oct 19 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调用三种数据库的方法(1)
2006/10/09 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
基于jquery的cookie的用法
2011/01/10 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
网上签名寄语活动留言
2014/01/18 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
小学运动会加油稿
2015/07/22 职场文书
电台广播稿范文
2015/08/19 职场文书
小学新课改心得体会
2016/01/22 职场文书
汉语拼音教学反思
2016/02/22 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
Python中异常处理用法
2021/11/27 Python