图片剪切效果
第一篇博文，把今天写的一个实现图片剪切效果的JS脚本发上来
基本思路：
三层结构，第一层为透明度是0.7的图片，第二层为正常的图片，第三层使用一个DIV作为选取框，采用CSS中的绝对定位进行覆盖
HTML代码
<div id="box"> <img id="img-1" src="imgs/cat-1.jpg"/> <img id="img-2" src="imgs/cat-2.jpg"/> <div id="main"> <div class="minDiv left-top" id="leftTop"></div> <div class="minDiv top" id="top"></div> <div class="minDiv right-top" id="rightTop"></div> <div class="minDiv right" id="right"></div> <div class="minDiv right-bottom" id="rightBottom"></div> <div class="minDiv bottom" id="bottom"></div> <div class="minDiv left-bottom" id="leftBottom"></div> <div class="minDiv left" id="left"></div> </div>
</div>
CSS代码
body{
background-color:#333;
}
#box{
width:522px;
height:595px;
margin:5px auto;
position:relative;
}
#img-1{
position:absolute;
left:0;
top:0;
opacity:0.7;
}
#img-2{
position:absolute;
top:0;
left:0;
clip:rect(0 200px 200px 0);
}
#main{
width:200px;
height:200px;
border:1px solid #FFF;
cursor:move;
position:absolute;
top:0;
left:0;
}
.minDiv{
width:8px;
height:8px;
background-color:#996633;
position:absolute;
}
.left-top{
top:-4px;
left:-4px;
cursor:nw-resize;
}
.top{
top:-4px;
left:50%;
margin-left:-4px;
cursor:n-resize;
}
.right-top{
top:-4px;
right:-4px;
cursor:ne-resize;
}
.right{
top:50%;
margin-top:-4px;
right:-4px;
cursor:e-resize;
}
.right-bottom{
bottom:-4px;
right:-4px;
cursor:se-resize;
}
.bottom{
bottom:-4px;
left:50%;
margin-left:-4px;
cursor:s-resize;
}
.left-bottom{
bottom:-4px;
left:-4px;
cursor:sw-resize;
}
.left{
left:-4px;
top:50%;
margin-top:-4px;
cursor:w-resize;
}
JS代码
function $(id){ //通过id获取元素
return document.getElementById(id);
}
function getPosition(node){ //获取元素距离视窗的left和top值
var left=node.offsetLeft;
var top=node.offsetTop;
var parent=node.offsetParent; //获取元素的父元素
while(parent!=null){
left+=parent.offsetLeft;
top+=parent.offsetTop;
parent=parent.offsetParent;
}
return {"left":left,"top":top}; //采用对象的形式返回元素距离视窗的left和top值
}
function setChoice(mainDiv){ // 设置选中区域高亮
var top=mainDiv.offsetTop;
var right=mainDiv.offsetLeft+mainDiv.offsetWidth;
var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;
var left=mainDiv.offsetLeft;
var img_2=$("img-2");
img_2.style.clip="rect("+top+"px "+right+"px "+bottom+"px "+left+"px)"
}
window.onload=function( ){
document.onselectstart=function(){return false;} //禁止图片被选中
var mainDiv=$("main");
var boxDiv=$("box");//获取id为box的元素
var boxLeft=getPosition(boxDiv).left;//获取id为box的元素距离视窗左边的距离
var boxTop=getPosition(boxDiv).top;//获取id为box的元素距离视窗顶部的距离
//获取id为box的元素的宽度和高度
var boxWidth=boxDiv.offsetWidth;
var boxHeight=boxDiv.offsetHeight;
var initialX,initialY,moveOffsetX,moveOffsetY;
var ifMouseDown=false;
var contact="";
//选取框变化相关代码用函数封装
function upMove(event){ // 选取框向上变化
var y=event.clientY;
//判断鼠标的clientY是否在box元素上面
if( y>boxTop ){
var mainY=getPosition(mainDiv).top;
var addHeight=mainY-y;
var heightBefore=mainDiv.offsetHeight-2;
mainDiv.style.height=heightBefore+addHeight+"px";
main.style.top=main.offsetTop-addHeight+"px";
}
}
function rightMove(event){ // 选取框向右变化
//clientX,clientY分别获取鼠标距离视窗的x,y坐标
var x=event.clientX;
//判断clientX是否在box元素的右边
if( x<boxLeft+boxWidth ){
var widthBefore=mainDiv.offsetWidth-2; // 获取元素原先的宽度，注意offsetWidth会包含边框
var addWidth=x-getPosition(mainDiv).left-widthBefore;
console.log(addWidth);
mainDiv.style.width=widthBefore+addWidth+"px";
}
}
function downMove(event){ // 选取框向下变化
var y=event.clientY;
//判断clientY是否在box元素的下面
if( y<boxTop+boxHeight ){
var mainY=getPosition(mainDiv).top;
var heightBefore=mainDiv.offsetHeight-2;
var addHeight=y-heightBefore-mainY;
mainDiv.style.height=heightBefore+addHeight+"px";
}
}
function leftMove(event){
var x=event.clientX;
//判断clientX是否在box元素的左边
if( x>boxLeft ){
var mainX=getPosition(mainDiv).left;
var addWidth=mainX-x;
var widthBefore=mainDiv.offsetWidth-2;
mainDiv.style.width=widthBefore+addWidth+"px";
mainDiv.style.left=mainDiv.offsetLeft-addWidth+"px";
}
}
//mainDiv元素移动的函数
function Move(event){
var moveX=0;
var moveY=0;
var moveX=event.clientX-initialX;
var moveY=event.clientY-initialY;
if( ifMouseDown ){
moveX=event.clientX-moveOffsetX;
moveY=event.clientY-moveOffsetY;
console.log(moveX);
if( mainDiv.offsetLeft+moveX>0&&mainDiv.offsetWidth+moveX<boxDiv.offsetWidth){
mainDiv.style.left=moveX+"px";
}
if( mainDiv.offsetTop+moveY>0&&mainDiv.offsetHeight+moveY<boxDiv.offsetHeight){
mainDiv.style.top=moveY+"px";
}
}
}
//鼠标在8个触点上面的按下事件
var arr_minDiv=mainDiv.getElementsByTagName("div");//获取所有的minDiv元素
var length=arr_minDiv.length;
for(var i=0;i<length;i++){
arr_minDiv[i].onmousedown=function(event){
event.stopPropagation();
ifMouseDown=true;
contact=this.id+"_minDiv";
}
}
//鼠标在mainDiv上面的按下事件
mainDiv.onmousedown=function(event){
initialX=event.clientX;//获取鼠标按下时的横坐标
initialY=event.clientY;//获取鼠标按下时的纵坐标
moveOffsetX=initialX-mainDiv.offsetLeft;
moveOffsetY=initialY-mainDiv.offsetTop;
ifMouseDown=true;
contact="mainDiv";
}
//鼠标松开事件
window.onmouseup=function(){
ifMouseDown=false;
}
//鼠标移动事件
window.onmousemove=function( event){
//console.log(ifMouseDown);
if( ifMouseDown){
//采用switch代替多层if else
switch(contact){
case "right_minDiv":
rightMove(event);
break;
case "top_minDiv":
upMove(event);
break;
case "left_minDiv":
leftMove(event);
break;
case "bottom_minDiv":
downMove(event);
break;
case "leftTop_minDiv":
leftMove(event);
upMove(event);
break;
case "rightTop_minDiv":
rightMove(event);
upMove(event);
break;
case "rightBottom_minDiv":
rightMove(event);
downMove(event);
break;
case "leftBottom_minDiv":
leftMove(event);
downMove(event);
break;
//设置mainDiv的移动方式
case "mainDiv":
Move(event);
break;
}
setChoice(mainDiv);
}
}
}
开通这个博客没事写写，主要以前端开发为主，当然也有PHP和扯淡
