<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的校验框架　@Validated & BindingResult

    controller上写法类似这样: @RequestMapping(value = "saleInfoList.json", method = RequestMethod.GET ...

  2. bash脚本退出代码解释

    Exit Codes With Special Meanings Table E-1. Reserved Exit Codes Exit Code Number Meaning Example Com ...

  3. coordinate transformation

    $X_{0}$为$I$在$O_{0}$系的坐标${\left(\begin{array}{c}x_0 \\y_0 \\z_0 \\\end{array}\right)}$,$X_{1}$为$I$在$O ...

  4. UI_APPEARANCE_SELECTOR 延伸

    iOS后属性带UI_APPEARANCE_SELECTOR 可以统一设置全局作用 例如: 1>开关控件 @property(nullable, nonatomic, strong) UIColo ...

  5. lldb 命令

    po [[UIWindow keyWindow] recursiveDescription]

  6. Jquery - UI - Dialog（转）

    jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: ...

  7. javaWEB总结(14):请求的转发和重定向

    通俗理解请求转发与重定向的流程 通俗的来讲:我们可以把请求转发和重定向当成是一种借钱的情景模式. (1)请求的转发:A向B借钱,B自己没有钱,但是向C借到了钱,并且把钱借给了A.A只向B请求了一次. ...

  8. openstack私有云布署实践【3 keepalive配置（VRRP虚IP）】

    这里只用到keepalived 或者pacemaker两种方法,可二选一来配置,官方提供的是pacemaker,但我们实际测试环境和生产环境上使的是keepalive     首先在4台control ...

  9. Bounce 弹飞绵羊

    Bounce 弹飞绵羊 题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 分块 将整个大区间分成若干块,每个点维护到下一个块需要跳的次 ...

  10. 修改VirtualBox虚拟机默认存储路径及虚拟机迁移方法

    修改默认安装路径 在安装完虚拟机以后发现我的虚拟的磁盘文件是放在C盘的,就想着有没有办法修改默认存储路径.后来发现确实可以修改,修改虚拟机方法如下:"管理"--->" ...