您的位置：首页 > 移动开发 > 微信开发

微信头像截取的小demo

2018-03-23 00:07 218 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>头像选取和放大镜的原理</title>
<style type="text/css">
body{
background: #ccc;
}
*{
margin: 0;
padding: 0;
}
#box{
border: 4px solid yellow;
border-left: 4px solid greenyellow;
border-bottom: 4px solid deeppink;
border-right: 4px solid red;
border-radius:7px ;
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
border-radius:4px ;
}
.ys{
width: 10px;
height: 10px;
border-radius:50%;
background: white;
position: absolute;
margin: -5px 0 0 -5px;
}
.left_up{
left: 0;
top: 0;

cursor: nw-resize;
}
.right_up{
left: 100%;
top: 0;

cursor: ne-resize;
}
.right_down{
left: 100%;
top: 100%;

cursor: se-resize;
}
.left_down{
left: 0;
top: 100%;

cursor: sw-resize;
}
.right_M{
left: 100%;
top: 50%;

cursor: e-resize;
}
#bigbox{
position: absolute;
width: 748px;
height: 600px;
}
#imgs,#img2{
position: absolute;
}
#imgs{
opacity: 0.3;
}
#img2{
clip:rect(0,200px,200px,0);
border-radius:8px ;
}
#img3{
position: absolute;
clip:rect(0,200px,200px,0);
border-radius:8px ;
}
#box2{
position: absolute;
width: 748px;
height: 600px;
left: 760px;
top: 0;
}
</style>
</head>
<body>
<div id="bigbox">
<img src="i8.jpg" id="imgs"/>
<img src="i8.jpg" id="img2"/>
<div id="box">
<div class="ys left_up">

</div>
<div class="ys right_up">

</div>
<div class="ys right_down" id="right_down">

</div>
<div class="ys left_down">
<
4000
/span>
</div>
<div class="ys right_M" id="right_M">

</div>
</div>
<div id="box2">
<img src="i8.jpg" id="img3"/>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
document.onselectstart=new Function("event.returnValue=false");
var box=document.getElementById("box");
var right_M=document.getElementById("right_M");
var right_down=document.getElementById("right_down");
var b=true;//做个标签用于衔接两个事件
var c=true;
var bos=true;
var clix;
var cliy;

document.onmousemove=function(ev){
var ev=ev||event;
clix=ev.clientX;
cliy=ev.clientY;
if(b==false){//当b==false时表示鼠标已经按下
rightallW();
}
if(c==false){
rightallW();
downaddH();
}
if(bos==false){
changeBoxP();
}

}
right_M.onmousedown=function(ev){
var ev=ev||event;
ev.stopPropagation();
b=false;
}
right_down.onmousedown=function(ev){
var ev=ev||event;
ev.stopPropagation();
c=false;
}
box.onmousedown=function(){
bos=false;
}

document.onmouseup=function(){
b=true;
c=true;
bos=true;
}

function rightallW(){//向右增加宽度
box.style.width=clix-box.offsetLeft+"px";
changerect();
}
function downaddH(){//向下增加高度
box.style.height=cliy-box.offsetTop+"px";
changerect();
}
function changeBoxP(){
changerect();//调动changeBoxP方法的时候调用changerect
box.style.top=cliy-box.offsetHeight/2+"px";
box.style.left=clix-box.offsetWidth/2+"px";
}
function changerect(){
var img3=document.getElementById("img3");
var img2=document.getElementById("img2");
var t=box.style.top;
var l=box.style.left;
img3.style.top=-box.offsetTop+"px";//因为当box移动时可以发现img3 的top等于box的top 所以让它始终等于负值时就相当于在原地不动了
img3.style.left=-box.offsetLeft+"px";
var r=box.offsetWidth+box.offsetLeft+"px";
var b=box.offsetHeight+box.offsetTop+"px";
img2.style.clip="rect("+t+","+r+","+b+","+l+")"
img3.style.clip="rect("+t+","+r+","+b+","+l+")"
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 原生js

相关文章推荐

新的分享

章节导航