定制微信小程序开发_js自制图片扩大镜功用

摘要: js自做照片变大镜作用 .Zhong 本文关键为大伙儿详尽详细介绍了js自做照片变大镜作用的有关材料,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下文中案例为大伙儿...

js自制图片放大镜功能     .Zhong   这篇文章主要为大家详细介绍了js自制图片放大镜功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

注释:
small img size:600x400
big img size:1200x800

原理:
1、大图是小图的 2倍整
2、大图以小图片中心点为中心
  a.transform : translate(-50%,-50%)
   b.(rate-0.5)*50%
  c.clip : rect(t,r,b,l) 以小图边界为边界
3、rect必须有absolute
4、获取鼠标在图片中的位置
  a.获取鼠标位置 XY
   b.获取图片位置、宽度、高度
  i.得到鼠标在图片的百分比位置
    ii.将百分比位置应用于大图 left,top 

问题:
居中理解太差:
  absolute ,left ,top,right,bottom,margin
放大缩小问题:
  起初: transform: scale() 缩放
  利用 transition 过渡
  结果,采用这种方法会使得鼠标移动时很卡顿
  可能原因:每次hover 都会触发 transition事件
  解决方法:采用了 Animate 动画来实现缩放 

细节:
以 onmouse 事件 e 动态获得 e.pageX 和 e.pageY
以 $().offset().top /left 获取图片位置
以 $().width() /height() 获取图片宽高
  在错误的操作中也忘了获取 class 的方法
  $().attr("class")
  $().prop("class")
  event.traget.className 

如果要实现 hover出现 透明的块状就在外部 opacity:0.5; 设置z-index就可以了。

 html 
 head 
 meta charset="UTF-8" 
 title WEBGOD /title 
 link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/ 
 script src="jquery/2.0.0/jquery.min.js" /script 
 script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8" /script 
 style type="text/css" 
 #warpper{
 margin: 0 auto;
 padding: 0;
 position: relative;
 z-index: 1;
 width: 600px;
 height: 400px;
 .small{
 text-align: center;
 .big{
 display: none;
 clip: rect(200px,900px,600px,300px);
 position: absolute;
 width: 1200px;
 height: 800px;
 top: 50%;
 left:50%;
 transform: translate(-50%,-50%);
 .big img{
 position: absolute;
 width: 600px;
 height: auto;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 /style 
 /head 
 body 
 div id="warpper" 
 div 
 img src="img/small_19.jpg"/ 
 /div 
 div 
 img src="img/img_19.jpg"/ 
 /div 
 /div 
 script type="text/javascript" 
 $(function(){
 var x,y,left,top,width,height,imgWidth,imgHeight,rateX,rateY;
 $("#warpper").hover(function(){
 $(".big").css("display","block");
 $(".big img").animate({"width":"1200px"},500);
 },function(){
 $(".big img").animate({"width":"600px"},1);
 $(".big").css("display","none");
 $("#warpper").on("mousemove",function(e){
 x = e.pageX;
 y = e.pageY;
 top = $(".small img").offset().top;
 left = $(".small img").offset().left;
 width = $(".small img").width();
 height = $(".small img").height();
 imgWidth = $(".big img").width();
 imgHeight = $(".big img").height();
 rateX = (left+width-x)/width;
 rateY = (top+height-y)/height;
 if(rateX 0 rateY 0 rateX =1 rateY =1){
 $(".big img").css("left",(rateX-0.5)*50+"%");
 $(".big img").css("top",(rateY-0.5)*50+"%");
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:如何抠图