<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. tomcat + jenkins启动tomcat后打开jenkins页面提示404错误的解决方案

    首先下载tomcat和jenkins,将下载的jenkins2.12 war放到tomcat的webapps文件夹下后执行/bin文件夹下的start启动后,打开http://localhost:80 ...

  2. Linux Kernel Vhost 架构

    Vhost 回顾 Linux中的vhost驱动程序提供了内核virtio设备仿真. 通常,QEMU用户空间进程模拟guest的I / O访问. Vhost将virtio仿真代码放到内核中,使QEMU用 ...

  3. SSH整合例子

    三大框架: Struts框架 1. params拦截器: 请求数据封装 2. 类型转换/数据处理 3. struts配置 4. 文件上传/下载/国际化处理 5. 数据效验/拦截器 6. Ognl表达式 ...

  4. 解题报告8VC Venture Cup 2017 - Elimination Round

    题目链接:http://codeforces.com/contest/755 本蒟蒻做了半天只会做前两道题.. A. PolandBall and Hypothesis 题意:给出n,让你找出一个m, ...

  5. C#键盘事件处理

    键盘事件是在用户按下键盘上的一个键的时候发生的,可分为两类.第一类是KeyPress事件,当按下的键表示的是一个ASCII字符的时候就会触发这类事件,可通过他的KeyPressEventArgs类型参 ...

  6. zoj 1586 QS Network

    最小生成树,刚刚学了Prim算法. 对每条边变的权值进行预处理,c[i][j] = c[i][j] + p[i] + p[j] 其中c[i][j]为输入的权值,p[i],p[j]为连接这两个节点所需的 ...

  7. UnicodeEncodeError: 'gbk' codec can't encode character '\xbb' in position 26269: illegal multibyte sequence

    解决方法参见下面的链接: http://blog.csdn.net/jim7424994/article/details/22675759

  8. team viewer - rollback framework could not be initialized

    rollback framework could not be initialized, 在安装team viewer 的时候出现的这个错误信息,求大师帮忙 https://zhidao.baidu. ...

  9. uint8与double，二维矩阵显示灰度图

    double型0~1对应uint8型0~255,转换用im2double和im2uint8 如果直接用uint8(double型),则为0~1的uint8型数据,图像全黑. 处理数据过程推荐用doub ...

  10. C#连接sqlserver数据库

    // 混合登录 写法1:Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;Password=myPas ...