jq随手写图片放大

Posted 2020-08-05 纵观

html：

<img id="img1" src="<?php echo $info->business_licence_img; ?>" style="cursor: pointer" width="200" height="200" />  //原图

<style typpe="text/css">

#large{position:absolute;display:none;z-index:999; background: #c6c6c6;}

</style>

js代码：

$(function(){
  var ei = $("#large");  //获取图片放大储存框
  ei.hide();    //放大储存框默认隐藏
  var img = new Image();  //实例化图片方法
  $("#img1, img").click(function(){ //点击原图进入放大流程
    img.src =$(this).attr("src");//获取原图路径
    x=document.body.offsetWidth/2-img.width/2;   //计算相对显示屏宽度实际图片位置
    y=document.body.scrollTop+$(window).height()/2-img.height/2;  //计算相对显示器高度实际图片位置
    ei.css({top:y,left:x,cursor: ‘pointer‘}).html(‘<img onclick="hide_img()" style="border:1px solid gray;" src="‘ + this.src + ‘" />‘).show(); //订单并展示原图片
  });
  $(window).scroll(function(){ //为保证原图滚动时也存在于屏幕中间
    if($("#large").is(‘:visible‘)){ //若图片是展示状态下
        x=document.body.offsetWidth/2-img.width/2; //重新计算宽度
        y=document.body.scrollTop+$(window).height()/2-img.height/2; //重新计算高度
        ei.css({top:y,left:x,cursor: ‘pointer‘}); //改变css
    }
  });
//根据鼠标放大图片，原理相同
  $("#img1, img").mousemove(function(e){
    ei.css({top:e.pageY,left:e.pageX}).html(‘<img style="border:1px solid gray;" src="‘ + this.src + ‘" />‘).show();
  }).mouseout( function(){
    ei.hide();
  })
});
function hide_img(){  //当点击放大图片时，关闭图片展示
  var ei = $("#large");
  ei.hide();
}