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加密密码到cookie的实现代码
Apr 18 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python 杀死自身进程的实现方法
2019/07/01 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
django 单表操作实例详解
2019/07/30 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
python FTP编程基础入门
2021/02/27 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
《第一朵杏花》教学反思
2014/04/16 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书