放大效果代码,Css代码库,德仔网

代码语言
代码分类
【Css】放大效果
作者: / 发布于2019/10/28/ 1081
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大镜</title>
<style type="text/css">
body{ padding: 0;margin: 0;width: 100%;height:100%;overflow: hidden; }
.wrap{ text-align: center; }
.wrap img{ width: 60%;cursor: crosshair; }
.loupe{ 
position:absolute; 
pointer-events:none;
visibility:hidden;
z-index:999;
width: 200px;
height: 200px;
border:3px solid #636363;
border-radius:50%;
}
</style>
</head>
<body>
<div class="loupe"></div>
<div class="wrap">
<img src="http://wx.karlew.com/loupe/img/pic.jpg">
</div>
</body>
</html>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var vh=(window).height()varvw=(window).width()
var imgh=(".wrapimg").height()varimgw=(".wrap img").width()
var beginX=vw*2/10
var endX=beginX+imgw
var beginY=(vh-imgh)/2
var endY=beginY+imgh
$(".wrap").css("margin-top",beginY+"px")
//鼠标经过
document.addEventListener("mousemove", loupe , false);
//触屏模式触发
document.addEventListener("touchmove", loupe , false);
document.addEventListener("touchstart", loupe , false);
document.addEventListener("touchend", function(e) {
$(".loupe").css("visibility","hidden")
}, false);
function loupe(e){
var x,y
if(e.type!="mousemove"){
x=e.touches[0].pageX
y=e.touches[0].pageY
}
//如果支持触摸事件，则屏蔽鼠标经过事件，避免影响touchstart的效果
else if("ontouchend" in document){
return false;
}
//如果不支持触摸事件，则让鼠标经过事件正常触发
else{
x=e.clientX
y=e.clientY
}
//判断鼠标或触摸点在图片区域，是则显示放大镜div层
if(x>beginX&&x<endX&&y>beginY&&y<endY){
var mx=100-(x-beginX)/imgw*1920 //1920为原图片宽度
var my=100-(y-beginY)/imgh*1200 //1200为原图片高度
var bg="url(http://wx.karlew.com/loupe/img/pic.jpg) "+mx+"px "+my+"px no-repeat #fff"
(".loupe").css("left",x?103+"px").css("top",y?103+"px").css(′background′,bg)(".loupe").css("visibility","visible")
}else{
$(".loupe").css("visibility","hidden")
}
}
})
</script>


<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大镜</title>
<style type="text/css">
body{ padding: 0;margin: 0;width: 100%;height:100%;overflow: hidden; }
.wrap{ text-align: center; }
.wrap img{ width: 60%;cursor: crosshair; }
.loupe{
  position:absolute;
  pointer-events:none;
  visibility:hidden;
  z-index:999;
  width: 200px;
  height: 200px;
  border:3px solid #636363;
  border-radius:50%;
}
</style>
</head>
<body>
  <div class="loupe"></div>
  <div class="wrap">
    <img src="http://wx.karlew.com/loupe/img/pic.jpg">
  </div>
</body>
</html>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var vh=$(window).height()
  var vw=$(window).width()
  var imgh=$(".wrap img").height()
  var imgw=$(".wrap img").width()
  var beginX=vw*2/10
  var endX=beginX+imgw
  var beginY=(vh-imgh)/2
  var endY=beginY+imgh
  $(".wrap").css("margin-top",beginY+"px")
  //鼠标经过
  document.addEventListener("mousemove", loupe , false);
  //触屏模式触发
  document.addEventListener("touchmove", loupe , false);
  document.addEventListener("touchstart", loupe , false);
  document.addEventListener("touchend", function(e) {
    $(".loupe").css("visibility","hidden")
  }, false);
  function loupe(e){
    var x,y
    if(e.type!="mousemove"){
      x=e.touches[0].pageX
      y=e.touches[0].pageY
    }
    //如果支持触摸事件，则屏蔽鼠标经过事件，避免影响touchstart的效果
    else if("ontouchend" in document){
      return false;
    }
    //如果不支持触摸事件，则让鼠标经过事件正常触发
    else{
      x=e.clientX
      y=e.clientY
    }
    //判断鼠标或触摸点在图片区域，是则显示放大镜div层
    if(x>beginX&&x<endX&&y>beginY&&y<endY){
      var mx=100-(x-beginX)/imgw*1920 //1920为原图片宽度
      var my=100-(y-beginY)/imgh*1200 //1200为原图片高度
      var bg="url(http://wx.karlew.com/loupe/img/pic.jpg) "+mx+"px "+my+"px no-repeat #fff"
      $(".loupe").css("left",x-103+"px").css("top",y-103+"px").css('background',bg)
      $(".loupe").css("visibility","visible")
    }else{
      $(".loupe").css("visibility","hidden")
    }
  }
})
</script>
试试其它关键字
同语言下
可能有用的
贡献的其它代码Label