效果图。

<!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. canvas 绘制二次贝塞尔曲线

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. python-zmail发送邮件

    import zmail #发送测试报告到邮件 with open(r'F:\asus\auto_file\unittest_html\2019-06-30 10-31-03report.html', ...

  3. bzoj4987 Tree 树上背包

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4987 题解 一道还不错的题咯. 很容易发现一个结论:这 \(k\) 个点构成的一定是一个连通块 ...

  4. Python 语音识别

    调用科大讯飞语音听写,使用Python实现语音识别,将实时语音转换为文字. 参考这篇博客实现的录音,首先在官网下载了关于语音听写的SDK,然后在文件夹内新建了两个.py文件,分别是get_audio. ...

  5. 25.Java锁的深度化

    Java锁的深度化 悲观锁.乐观锁.排他锁 场景 当多个请求同时操作数据库时,首先将订单状态改为已支付,在金额加上200,在同时并发场景查询条件下,会造成重复通知. SQL: Update 悲观锁与乐 ...

  6. SpringBoot+Shiro学习（七）：Filter过滤器管理

    SpringBoot+Shiro学习(七):Filter过滤器管理 Hiwayz 关注  0.5 2018.09.06 19:09* 字数 1070 阅读 5922评论 1喜欢 20 先从我们写的一个 ...

  7. GET和POST是HTTP请求的两种基本方法，区别是什么！？

    GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...

  8. 51nod 1122:机器人走方格 V4 （矩阵快速幂）

    题目链接 昨天上随机信号分析讲马氏链的时候突然想到这题的解法,今天写一下 定义矩阵A,Ans=A^n,令A[i][j]表示,经过1次变换后,第i个位置上的机器人位于第j个位置的情况数,则Ans[i][ ...

  9. Orcad Capture元件库介绍--Cadence Allegro

    绘制原理图和PCB,最好有自己的元件封装.元件库 ORCAD CAPTURE元件库介绍 AMPLIFIER.OLB amplifier 共182个零件,存放模拟放大器IC,如CA3280,TL027C ...

  10. Python基础教程（013）--一行代码不要做多件事情

    前言 学习代码编写风格 内容 语法错误报错的信息 SystaxErrot:invalid syntax 语法错误, invalid 无效 每行代码负责完成一个动作 阅读代码,从左至右,从上到下. 学习 ...