效果图。

<!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. $NOIP2018$ 爆踩全场记

    NOIP2018 Day-1 路还很长. 这里就是起点. 这是最简单的一步,但这是最关键的一步. 联赛就在眼前了,一切好像都已经准备好了,一切好像又都没准备好. 相信自己吧,\(mona\),这绝对不 ...

  2. spring Boot 简单的登录功能，利用了jdbcTemplate.class完成sql语句的执行，无需service层、dao层和.xml文件

    1.搭建SpringBoot项目首先我们先在IDEA上创建一个SpringBoot的Web项目(1)file ——> new ——> project——> Spring Initia ...

  3. 如何在某个apps包下面中创建APP

  4. 【Java】maven打包源码、依赖插件

    <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactI ...

  5. 九、async、future、packaged_task、promise

    std::async.std::future创建后台任务并返回值. 希望线程返回一个值. std::async是个函数模板,用来启动一个异步任务,返回一个std::future对象 异步任务:自动创建 ...

  6. 启动Nginx、查看nginx进程、nginx帮助命令、Nginx平滑重启、Nginx服务器的升级

    1.启动nginx的方式: cd /usr/local/nginx ls

  7. Spring-Boot"原生态"的logback

    前言 Logback是由 log4j创始人设计的又一个开源日志组件: logback当前分成三个模块: logback-core logbackclassic logback-access logba ...

  8. B-Tree, B+Tree, B*树介绍

    [数据结构]B-Tree, B+Tree, B*树介绍 转   [数据结构]B-Tree, B+Tree, B*树介绍 [摘要] 最近在看Mysql的存储引擎中索引的优化,神马是索引,支持啥索引.全是 ...

  9. css > 的写法 html

    .userInfo-view .info .name::after { content: " "; display: inline-block; height: 12rpx; wi ...

  10. codeforces gym100418J

    题目简述 给定N 求1到N中有多少个幸运数字 幸运数字的定义为 这个数能被它二进制表示下1的个数整除 其中(1 ≤ N ≤ 1019) -------------------------------- ...