<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="data:images/jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css" >
#bigimg { position:absolute;display:none; overflow:hidden; height:400px; width:400px;margin-left:200px;margin-top:-20px; }
#smalldiv{position:absolute; display:none;}
</style>
<script type="text/javascript">
$(function () {
var count = 0;

$("#img").mousemove(function (e) {
var smalldiv = $("#smalldiv");
var ZoomSizeWidth = $("#img1").width() / $("#img_zoom").width(); //宽放大的倍数
var ZoomSizeHeight = $("#img1").height() / $("#img_zoom").height();//高放大的倍数
$("#bigimg").show();
smalldiv.show();
var mouseX = e.pageX + 5;
var mouseY = e.pageY + 5;

if (e.pageX < $(this).offset().left + smalldiv.width() / 2) {//当鼠标的X坐标小于图片与div遮罩层的x坐标和是ｄｉｖｘ＝０；
divX = 0;
}
else if (e.pageX > $(this).offset().left + smalldiv.width() / 2 && e.pageX < $(this).offset().left + $(this).width() - smalldiv.width() / 2) {//鼠标的X坐标在图片内部并且小于图片最右边的X坐标
divX = e.pageX - $(this).offset().left - smalldiv.width() / 2;
}
else if (e.pageX > $(this).offset().left + $(this).width() - smalldiv.width() / 2) {//鼠标的X坐标大于图片的最右边的X坐标 （Y轴同理）
divX = $(this).width() - smalldiv.width();
}

if (e.pageY < $(this).offset().top + smalldiv.height() / 2) {
divY = 0;
}
else if (e.pageY > $(this).offset().top + smalldiv.height() / 2 && e.pageY < $(this).offset().top + $(this).height() - smalldiv.height() / 2) {
divY = e.pageY - $(this).offset().top - smalldiv.height() / 2;
}
else if (e.pageY > $(this).offset().top - smalldiv.height()) {
divY = $(this).height() - smalldiv.height();
}

$("#bigimg").css("top", mouseY).css("left", mouseX);
smalldiv.css("top", divY).css("left", divX);
smalldiv.appendTo("#img");
var tempX = smalldiv.offset().left - $(this).offset().left;//通过对大图的位置偏移来起到放大的效果
var tempY = smalldiv.offset().top - $(this).offset().top;
$("#img1").css("top", -tempY * ZoomSizeHeight).css("left", -tempX * ZoomSizeWidth);
});

$("#img").mouseleave(function (e) {
$("#smalldiv").hide();
$("#bigimg").hide();
});

})
</script>
</head>
<body>
<div id="img" style=" width:200px; height:200px;margin-left:200px; position:relative; margin-top:30px"><img alt="图片" src="data:images/Desert.jpg" id="img_zoom" width="200" height="200"/></div>
<div id="bigimg" ><img alt="放大后图片" id="img1" src="data:images/Desert.jpg" width="800px" height="800px" style="position:absolute" /></div>
<div id="smalldiv" style="width:50px; background-color: rgba(0,0,0,0.5); height:50px; border:1px solid gray; "></div>
</body>
</html>

文章摘自：http://blog.csdn.net/kai161/article/details/9384375

jQuery实现 图片的局部放大效果的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. 基于jQuery遮罩图片hover翻转效果

    基于jQuery遮罩图片hover翻转效果.这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  3. [转]jQuery实现图片轮播效果，jQuery实现焦点新闻

    本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157 效果图: 实现代码: <!DOCTYPE html> < ...

  4. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  5. 使用JQuery实现图片轮播效果

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用f ...

  6. jQuery实现图片伦播效果(淡入淡出+左右切换)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  9. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

随机推荐

  1. Spring对jdbc支持

    4. Spring对jdbc支持 spring对jdbc提供了很好的支持 体现在: 1.Spring对C3P0连接池的支持很完善 2.Spring对jdbc提供了jdbcTemplate来简化jdbc ...

  2. dao代码模板

    提供数据源以及回收资源的工具类DbUtils: public class DbUtils { private static ComboPooledDataSource dataSource = new ...

  3. lldb 命令

    po [[UIWindow keyWindow] recursiveDescription]

  4. windows API实现用户选择文件路径的对话框

    在编写应用程序时,有时需要用户选择某个文件,以供应用程序使用,比如在某些管理程序中需要打开某一个进程,这个时候需要弹出一个对话框来将文件路径以树形图的形式表示出来,以图形化的方式供用户选择文件路径,而 ...

  5. Namenode写Journalnode超时，导致Namenode挂掉的问题

    昨天还好好的集群,今天早上来看又挂掉了,还好是家里的测试服务器集群... 首先,查看了Namenode的状态,发现两台Namenode只剩下一台了,赶紧到挂了的那台去查看了logs下的日志: -- : ...

  6. 微信小程序入门——Mustache语法学习

    微信小程序中用到了大量Mustache语法,特发此文学习一下 1.简单的变量调换:{{name}} 1 var data = { "name": "Willy" ...

  7. Linux用户相关的操作命令

    1.建用户: adduser phpq       //新建phpq用户 passwd phpq        //给phpq用户设置密码 2.建工作组 groupadd test      //新建 ...

  8. PIE使用阴影后的背景透明方法

    使用PIE后,会发现如果有设置 box-shadow 时,当前 class 样式中设置 opacity 或者背景渐变透明都会无效了,其实也是有办法解决的 css3-container { filter ...

  9. linux下如何使用vnstat查看服务器带宽流量统计

    因为很多vps或者服务器都是限流量的,但是又很多服务商并没有提供详细的流量表,比如每天的流量表,所以肯定有人很想知道自己服务器到底跑了多少流量. vnstat就是一个很好用的服务器流量统计命令.我截几 ...

  10. scala 数组 基本类型

    变量尽量用valvar 是不可变 final 常用的 Int̵ Double̵ Long̵ String没有基本类型.scala 任何对象都继承Any Int Double 继承AnyVal Stri ...