效果图。

<!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. 【python实例】统计字符串里大写字母，小写字母的个数和非字母的个数

    """ 给定一个以下字符串:统计大写字母的个数,小写字母的个数,非字母的个数. str1 = "ajdkkKDKEK1343KFKiriromfkfKKRIOW ...

  2. AcWing 257. 关押罪犯 （并查集）打卡

    题目:https://www.acwing.com/problem/content/description/259/ 题意:有两个监狱,监狱里面有很多犯人,现在有很多对冲突,还有个冲突值,现在问我们怎 ...

  3. servlet3.0 异步处理

    转:https://blog.csdn.net/benjamin_whx/article/details/38874657 13.1.概述 计算机的内存是有限的.Servlet/JSP容器的设计者很清 ...

  4. Checking out pull requests locally

    https://help.github.com/en/articles/checking-out-pull-requests-locally https://github.com/betaflight ...

  5. centos7不能远程登陆的方案

    网上找了很多,就算百度经验写的都是坑,代码如下: BROWSER_ONLY=no BOOTPROTO=static DEFROUTE=yes IPV4_FAILURE_FATAL=no IPV6INI ...

  6. 重新认识new

    前言 感谢大佬:https://www.cnblogs.com/luxiaoxun/archive/2012/08/10/2631812.html www.cplusplus.com 因为这段时间在重 ...

  7. <读书笔记>JavaScript系列之7种创建对象（面向对象）

    写在前面: 以下三选一: 阅读博文JavaScript 对象详解. 阅读<JavaScript权威指南>第6章. 阅读<JavaScript高级程序设计>第6章. 注意:只需要 ...

  8. l1和l2正则化

    https://blog.csdn.net/tianguiyuyu/article/details/80438630 以上是莫烦对L1和L2的理解 l2正则:权重的平方和,也就是一个圆 l1正则:权重 ...

  9. selenium,webdriver爬取斗鱼主播信息 实操

    from selenium import webdriver import time from bs4 import BeautifulSoup class douyuSelenium(): #初始化 ...

  10. SimpleDateFormat 格式化时间少了12个小时

    SimpleDateFormat 格式化时间少了12个小时 标签(空格分隔): java SimpleDateFormat H:一天中的小时数:0-23 h: am/pm 小时数: 1-12 publ ...