在网上也浏览过许多关于JavaScript放大镜效果的文章，有的代码解释得些隐晦难懂，看的我头有点晕晕的╮(╯﹏╰)╭，我的心情是这样的：

吐槽完了，我们动动小鼠标，当鼠标经过下面这张美女图片时就实现放大效果：

这个放大效果引用了MagicZoom.css和mz-packed.js

方法一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>JavaScript之放大镜效果</title>
  <meta name="generator" content="editplus" charset="utf-8"/>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/MagicZoom.css" type="text/css" media="screen" />
<script src="http://files.cnblogs.com/files/caidupingblogs/mz-packed.js" type="text/javascript"></script>
 </head>

 <body>
  <script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/mz-packed.js"></script>
<p><a class="MagicZoom" title="MagicZoom: Super bike" href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_03.jpg"> <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/t_03.jpg" alt="" /></a></p>
 </body>
</html

>

方法二：引入jquery-1.12.3.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" charset="utf-8"/>
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
<script src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.12.3.js" type="text/javascript"></script>
 <script type="text/javascript">
        $(function(){
            // 1.鼠标覆盖min 显示放大镜
            $('.min').mousemove(function(e) {
                $('.max').show()
                $('.enlarge').show()
                // 放大镜移动
                // pageX/Y 相对于body内容的x/y(滚动条变化时跟随变化)
                                // offset().left 相当于 offsetLeft
                var x = e.pageX - $('.min').offset().left - $('enlarge').width() / 2
                var y = e.pageY - $('.min').offset().top - $('.enlarge').height() / 2
                // 最大移动范围
                var maxX = $('.min').width() - $('.enlarge').width()
                var maxY = $('.min').height() - $('.enlarge').height()
                // 范围约束
                if (x <= 0) {
                    x = 0;
                } else if (x >= maxX) {
                    x = maxX;
                }
                if (y <= 0) {
                    y = 0;
                } else if (y >= maxY) {
                    y = maxY;
                }
                // 设置位置
                $('.enlarge').css({
                    left: x,
                    top: y
                })
                // 2.放大镜移动 max上的图片等比例移动
                var yidongX = x / maxX
                var yidongY = y / maxY
                $('.max>img').css({
                    left: -yidongX * ($('.max>img').width() - $('.max').width()),
                    top: -yidongY * ($('.max>img').height() - $('.max').height())
                })
            }).mouseout(function() {
                $('.max').hide()
                $('.fd').hide()
            })
        })
</script>
 <body>
   <body>
    <div class="min">
        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/t_03.jpg" />
        <div class="fd"></div>
    </div>
    <div class="max">
        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_03.jpg"/>
    </div>
    </body>
    </body>
</html>

JavaScript之放大镜效果的更多相关文章

  1. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  2. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  3. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript写放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  6. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  7. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  8. JavaScript图形实例：图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

  9. javascript html 鼠标放大镜效果

    1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示:   <!DOCTYPE html> < ...

随机推荐

  1. vs2010代码注释自动生成api文档

    最近做了一些接口,提供其他人调用,要写个api文档,可是我想代码注释已经写了说明,能不能直接把代码注释生成api?于是找到以下方法 环境:vs2010 先下载安装Sandcastle 和Sandcas ...

  2. Java数据结构之线性表（2）

    从这里开始将要进行Java数据结构的相关讲解,Are you ready?Let's go~~ java中的数据结构模型可以分为一下几部分: 1.线性结构 2.树形结构 3.图形或者网状结构 接下来的 ...

  3. SpringAOP 基础具体解释

    Spring AOP对于刚開始学习spring的同学来说有点难以理解.我刚工作的时候都没怎么理解,如今略微理解了一点,所以在这里我将用嘴简单的样例,最通俗易懂的话语来说出我的理解,可能因为我对Spri ...

  4. javascript 操作 excel 全攻略

    最近做一个项目,用到了javascript操纵excel以生成报表,下面是标有详细注解的实例 <html> <head><script language="ja ...

  5. .Net 下采用GET/POST/SOAP方式动态调用WebService的简易灵活方法(C#) [轉]Redfox

    一直以来,我都为动态调用WebService方法而烦恼.在.Net环境下,最常用的方法就是采用代理类来调用WebService,可以通过改变代理类的Url属性来实现动态调用,但当xmlns改变时就会出 ...

  6. windows 支持curl命令

    curl 是一般linux发行版中都带有的小工具,利用这个工具可以很方便的下载文件, 我一般使用这个工具来查看某个页面相应的HTTP头信息,在Windows系统中我们也一样可以使用这个工具,如果不需要 ...

  7. python字符串操作（连接、比较、格式化等）(转)

    字符串连接 方法一: Python代码 >>> str1 = 'hello' >>> str2 = 'world' >>> str1_2 = st ...

  8. oralce 函数 FOR windows 跟踪神器

    https://github.com/dennis714 http://www.yurichev.com

  9. 直接对寄存器操作，实现usart的串口输出寄存器的配置

    就像前面提到的,我用的板子是一款stm32f107系列的板子,在这块板子上,已经开发出了一套比较成熟的库函数,这也就意味着你可以不用直接去操作存储器来实现某些功能.比方说对于USART来说可以直接通过 ...

  10. lua分割字符串终究版(转载,有改动)

    来源http://codepad.org/BRHIS6WA --根据首字节获取UTF8需要的字节数 local function GetUTF8CharLength(ch) local utf8_lo ...