首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Jquery和CSS3轻松实现放大镜效果

Jquery和CSS3轻松实现放大镜效果

作者头像
Javanx
发布2019-09-04 15:43:34
1.4K0
发布2019-09-04 15:43:34
举报
文章被收录于专栏:web秀web秀

前言

每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果。有没有去理解分析它的原理?是不是感觉非常的神奇?当真正地去接触,其实非常好理解。下面一起来学习!

Jquery和CSS3轻松实现放大镜效果
Jquery和CSS3轻松实现放大镜效果

在线演示地址

See the Pen DcHup by Elton Mesquita (@eltonmesquita) on CodePen.1

html

<div class="magnify">
  <div class="large"></div>
  <img class="small" src="0413pf3.jpg"/>
</div>

small是原始图片,large是放大镜片

css

.magnify{
  position: relative;
}
.magnify img{
  width: 100%;
}
.large {
  width: 175px; 
  height: 175px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
  0 0 7px 7px rgba(0, 0, 0, 0.25), 
  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  background: url('0413pf3.jpg') no-repeat;
  display: none;
} 

js

$(document).ready(function(){
  var native_width = 0;
  var native_height = 0;
  // 监听鼠标在magnify元素移动
  $(".magnify").mousemove(function(e){
    if(!native_width && !native_height){
      // 获取原始图片的宽高
      var image_object = new Image();
      image_object.src = $(".small").attr("src");
      native_width = image_object.width;
      native_height = image_object.height;
    }else{
      var magnify_offset = $(this).offset();
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;
      if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if($(".large").is(":visible")) {
        var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my/$(".small").height()*native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";
        var px = mx - $(".large").width()/2;
        var py = my - $(".large").height()/2;
        $(".large").css({left: px, top: py, backgroundPosition: bgp});
      }
    }
  })
})

是不是觉得很简单了,代码量不大,原理了就是鼠标移动时,获取鼠标在原始图片的位置,计算出放大镜片图片的background-osition值,实时去修改,这样就形成了放大镜的效果。

演示程序:演示代码 下载源码:下载源码

公告

以后每月5、15、25号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年9月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 在线演示地址
  • html
  • css
  • js
  • 公告
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档