jquery使图片简单放大效果【上传图片或者查看从数据库中读出来的imgPath】
本文共 1844 字，大约阅读时间需要 6 分钟。
jquery使图片放大
关键点：
①获取小图片左上角的绝对位置
//var X = $('#img1').position().left;//横坐标//var Y=$('#img1').offset().top;//纵坐标 ②div+js+css控制
效果图：
放大的图片可以随着小图片位置的移动相应的移动
jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>================================================================================================================================My JSP 'switchImage.jsp' starting page This is my JSP page. This is my JSP page. This is my JSP page. This is my JSP page. This is my JSP page. This is my JSP page.aaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccc
参考文章：
以下实现的效果是选择要上传的文件，然后把该图片赋值到img控件上，鼠标移动到该图片上时，放大显示
< html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=gbk" /> < script type = "text/javascript" src = "http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" ></ script > < script language = "javascript" > $(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()); }) }); </ script > < style type = "text/css" > #large{position:absolute;display:none;z-index:999;} </ style > </ head > < body > 上传预览图片: < input id = "f1" name = "f1" type = "file" /> < img id = "img1" width = "120" height = "60" src = "http://www.cssrain.cn/skins/tim/logo-jq.gif" > < div id = "large" ></ div > 鼠标滑过预览图片 </ body > </ html >
你可能感兴趣的文章
获取Windows系统版本
查看>>
漫谈兼容内核之十二:Windows的APC机制
查看>>
21.windbg-.lastevent、!analyze（dump分析、异常错误码查询）
查看>>
16.windbg-.frame、dt(切换局部上下文、查找结构体)
查看>>
开源任务管理器 Process Hacker (Windows)
查看>>
快速发现Windows中毒的工具：Process Hacker
查看>>
Process Hacker源码中的用户态hook的做法
查看>>
Get IT技能知识库 50个领域一键直达
查看>>
浅析C++中的this指针及汇编实现
查看>>
关于32位程序在64位系统下运行中需要注意的重定向问题（有图有真相）（***）
查看>>
解决win10系统中截图异常放大的问题
查看>>
关于Windows高DPI的一些简单总结
查看>>
tlb文件为何而生？
查看>>
IE9 GPU硬件加速到底是实用创新还是噱头
查看>>
几种TCP连接中出现RST的情况
查看>>
IAAS、SAAS 和 PAAS 的区别、理解
查看>>
RichEdit对ole 对象的相关支持总结
查看>>
（分享）win10下双显示屏独立设置不同缩放率的方法
查看>>
管理学十大经典定理
查看>>
杨澜的一句话，却要让我记一生
查看>>