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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
html中两种获取标签内的值的方法
Jun 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
我的论坛源代码(一)
2006/10/09 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python 图片验证码代码分享
2012/07/04 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
浅析Python 责任链设计模式
2020/09/11 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
经典c++面试题二
2015/08/14 面试题
如何保障Web服务器安全
2014/05/05 面试题
婚礼父母答谢词
2015/01/04 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2016年元旦致辞
2015/08/01 职场文书
浅析JavaScript中的变量提升
2022/06/01 Javascript