效果图。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #fang{

                position: absolute;

                width: 100px;

                height: 100px;

                border-radius: 50px;

                background-color: cornflowerblue;

                display: none;

            }

        </style>

    </head>

    <body>

        <div id="test1">

            <img src="img/panda.jpg"width="800px"/>

            <div id="fang">

            </div>

        </div>

        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="test_2.js" type="text/javascript" charset="utf-8"></script>

    </body>

</html>

　　

Jquery代码

$(function(){

    //获得图片离浏览器顶端的距离

    var top=$("#test1 img").position().top;

    //获得图片离浏览器左端的距离

    var left=$("#test1 img").position().left;

    //鼠标在图片内部移动

    $("#test1 img").mousemove(function(e){

        $("#fang").css({

            //此时鼠标的位置

            "top":e.clientY+20+"px",

            "left":e.clientX+20+"px",

            //放大镜中的图片

            "background-image":"url(img/panda.jpg)",

            "background-size":"800px 450px",

            "background-repeat":"no-repeat",

            //调整放大镜中的图片的位置

            "background-position":"-"+(e.clientX-left-51)+"px -"+(e.clientY-top-48)+"px",

            //放大图片

            "transform":"scale(1.5,1.5)"

        });

    });

    //鼠标移进图片时显示放大镜

    $("#test1 img").mouseenter(function(){

        $("#fang").show();

    });

    //鼠标移出图片时隐藏放大镜

    $("#test1 img").mouseout(function(){

        $("#fang").hide();

    });

});

　　

转载 jQuery实现放大镜特效的更多相关文章

  1. 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  2. JQuery仿购物网站放大镜特效所遇问题及思考

    JQuery仿购物网站放大镜特效所遇问题及思考 先贴下效果图,然后描述起来也就不会不知道我在说什么了. 我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouse ...

  3. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  4. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  5. 强大的自适应jQuery焦点图特效

    jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...

  6. 未封装的js放大镜特效

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

  7. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  8. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  9. jQuery打造用户注册时获取焦点文本框出现提示jquery表单特效

    jQuery打造用户注册时获取焦点文本框出现提示效果的jquery表单特效 当获取焦点时,会分别的弹出相应的信息提示框,失去焦点就会隐藏提示信息. 效果兼容性很高,适用浏览器:IE6.IE7.IE8. ...

随机推荐

  1. SYSAUX表空间满，

    step1.  确认到底是哪个段占用了sysaux空间: select segment_name,sum(bytes)/1024/1024 from dba_segments where tables ...

  2. $NOI2014$ 购票（斜率优化 点分治）

    \(NOI2014\)购票 哇终于可以碰电脑了赶快切些火题找找感觉. 拿到这道题的时候发现简单的斜率优化推一推可以秒掉平方做法,然后一条链也可以做. 然后呢... 卧槽这个在一棵树上怎么办啊. 大力\ ...

  3. 前端每日实战：47# 视频演示如何用纯 CSS 创作一个蝴蝶标本展示框

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzgZzQ 可交互视频教程 此视频 ...

  4. LOJ6435 PKUSC2018 星际穿越

    这个题吧当时在考场只得了45分 然后70分的性质都分析到了 不知道为啥就是写萎蛋了 哎 当时还是too young too simple 看了一下julao们的博客这个题有两种做法 一个是比较费脑子的 ...

  5. python模块之jinja2 ，shutil

    一 jinja2 用来给python提供html语法的模块 安装 pip install jinja2 使用 from jinja2 import Template def html_output(p ...

  6. Fmx在android下InputBox输入框点击Cancel取消按钮后报异常

    在网上搜索半天也没有找到相关信息,估计遇到这个问题的相当少, 解决办法: 找到FMX.Dialogs.Android.pas, 将121行中  FValues[I] := FDefaultValues ...

  7. tracert命令 -网络管理命令

    Tracert是路由跟踪程序,用于确定 IP 数据报访问目标所经过的路径.Tracert 命令用 IP 生存时间 (TTL) 字段和 ICMP 错误消息来确定从一个主机到网络上其他主机的路由. 在工作 ...

  8. jumpserver安装和使用

    jumpserver安装 #centos6 centos7都可用yum -y install git python-pip mysql-devel gcc automake autoconf pyth ...

  9. 前端每日实战：84# 视频演示如何用纯 CSS 创作一个极品飞车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MBbEMo 可交互视频 此视频是可 ...

  10. python and 用法

    >>> 1 and [] and [1] [] >>> 1 and [2] and [1] [1] >>> 0 and [1] and [2] 0