<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. readline与readlines不能同时使用

    fd = open("C:\Users\william\Desktop\dup_file - Copy (2).txt")for i in xrange(0,len(fd.read ...

  2. IE8下 Select文字垂直居中的办法

    .select { padding: 4px 0; height: 30px; line-height: 26px; vertical-align: middle;} 处理前: 处理后:

  3. Python--变量作用域

    变量作用域: 一般在函数体外定义的变量成为全局变量,在函数内部定义的变量称为局部变量. 全局变量所有作用域都可读,局部变量只能在本函数可读 函数在读取变量时,优先读取函数本身自有的局部变量,再去读全局 ...

  4. angular localStorage使用方法

    var YourCtrl = function($scope, localStorageService, ...) { // To add to local storage localStorageS ...

  5. 二十九、oracle 触发器

    一.触发器简介 触发器的定义就是说某个条件成立的时候,触发器里面所定义的语句就会被自动的执行.因此触发器不需要人为的去调用,也不能调用.然后,触发器的触发条件其实在你定义的时候就已经设定好了.这里面需 ...

  6. 利用H5新特性判断文件大小

    HTML代码部分: 思路:下面代码中我利用css的z-index属性将input="file”标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框.下面的ma ...

  7. 关于通过addClass与removeClass用jquery控制有良好兼容的CSS3样式

    hi:)好久不见~最近被jquery的animate对某些CSS3特性不兼容搞的头晕眼花,果断百度,阅读了一些高手的博客后突然发现平常很少用到的addClass和removeClass属性居然还可以这 ...

  8. block的内部实现原理

    一.简单定义 block是一个指向结构体的指针,编译器将block内部代码生成对应的函数,上述结构体中的函数指针(funcPtr)指向该函数的实现: 二.相关概念 形参和实参 形参:形式参数,用于定义 ...

  9. js正则函数中test和match的区别

    test是RegExp的方法,参数是字符串,返回值是boolean类型. match是String的方法,参数是正则表达式,返回值是数组. <script type="text/jav ...

  10. AnimatorController动画遮罩

    游戏中,我们的人物在某些时候,可能在一个时间点在做两件事,这样就需要同时播放两个动画,但我们肯定不能简单将其叠加,比如移动着开枪.攻击.挥手等等,那么在Unity中我们应该怎样实现这样的功能呢?且听我 ...