效果图。

<!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. NOSQL导图

  2. Web核心之最简单最简单最简单的登录页面

    需求分析: 在登录页面提交用户名和密码 在Servlet中接收提交的参数,封装为User对象,然后调用DAO中的方法进行登录验证 在DAO中进行数据库查询操作,根据参数判断是否有对象的用户存在 在Se ...

  3. fat文件系统

    在主引导区后面就是FAT表.从上面可以得知一个FAT表是229个扇区.它里边的内容很简单,里边的内容就是指出下一个簇在哪里.你的盘有多少个簇,那么它的FAT表就要有多少个项来描述它们.因为FAT16是 ...

  4. SpringBoot编程思想

    Spring Boot的特性 1).创建独立的Spring应用 2).直接嵌入Tomcat.Jetty或Undertow等Web容器(不需要部署WAR文件) 3).提供固化的starter依赖,简化构 ...

  5. WRNavigationBar 使用记录

    最近在做一个导航栏透明度渐变的效果,发现 WRNavigationBar库很好用,一开始导入到项目,发现导航tiltle颜色一直是黑色的,无论怎么用系统方法改都改不了.后来发现原来库里面有一个方法可以 ...

  6. 【Java】定义Logger为什么要用static和final？

    private static final Logger logger= LoggerFactory.getLogger(ShiroConfig.class); (1)出于资源利用的考虑,Logger的 ...

  7. pug学习

    pug学习 jade(pug)由于商标版权问题,jade已经改名为Pug.Pug 是一个高性能的模板引擎,它是用 JavaScript 实现的,并且可以供 Node 使用,当然还支持其他语言. 文件后 ...

  8. 解决修改 Linux 下的 PHP 环境变量不生效的方法

    这个问题出现服务器有多个 PHP 版本,php -v和phpinfo()显示两个不同的版本 最近真的,都给朋友解决问题了... phpinfo查看的 php 版本是 7.2.6,到 bash 去使用p ...

  9. rabbitmq for C#的异步消息确认机制

    代码: using (var conn = RabbitmqHelper.GetConnection()) { using (var channel = conn.CreateModel()) { / ...

  10. Design：设计（活动）百科

    ylbtech-Design:设计(活动)百科 设计是把一种设想通过合理的规划.周密的计划.通过各种感觉形式传达出来的过程.人类通过劳动改造世界,创造文明,创造物质财富和精神财富,而最基础.最主要的创 ...