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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python numpy存取文件的方式
2020/04/01 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
通过代码实例了解Python异常本质
2020/09/16 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
2014年大学生党课心得体会范文
2014/03/29 职场文书
新闻发布会策划方案
2014/06/12 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
大学四年个人总结
2015/03/03 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
三八妇女节致辞
2015/07/31 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python