学会如何获取鼠标的坐标位置以及监听鼠标的按下,拖动,松开等动作事件,从而实现拖动鼠标来改变图片大小。
还可以学习css中属的片段性。
图片剪切三层结构
1,第一层不透明度,给图层设置透明度
2,第二层剪辑,剪辑属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏
3,第三层选取框绝对(与第二层重叠的),包括八个触点的效果
html代码:
& lt; div id=昂凶印北?
& lt; img src=" https://www.yisu.com/zixun/img/1.jpg " id=" img1 "/比;
& lt; img src=" https://www.yisu.com/zixun/img/1.jpg " id=" img2 "/比;
& lt; div id=爸饕北?
& lt; div class=" Divmin爆发“祝辞& lt;/div>
& lt; div类=癉ivmin”祝辞& lt;/div>
& lt; div类=" Divmin右上"祝辞& lt;/div>
& lt; div class=" Divmin正确”的祝辞& lt;/div>
& lt; div class=" Divmin完全地“祝辞& lt;/div>
& lt; div class=" Divmin”祝辞& lt;/div>
& lt; div class=" Divmin向左拐上了“祝辞& lt;/div>
& lt; div class=" Divmin左”祝辞& lt;/div>
& lt;/div>
& lt;/div>
css代码:
身体{
背景:# 333;
}
#箱{
宽度:500 px;
身高:380 px;
位置:绝对的;
前:100像素;
左:200 px;
}
# img1, # img2 {
位置:绝对的;
上图:0;
左:0;
}
# img1 {
透明度:0.3;
}
# img2 {
片段:矩形(0200 px, 200 px, 0);
}
#{主要
位置:绝对的,/*第三层需用绝对定位浮在上面*/宽度:200 px;
身高:200 px;
边界:1 px固体# fff;
}
.Divmin {
位置:绝对的;
宽度:8 px;
高度:8 px;
背景:# fff;
}
.up-left {margin-top: 4 px; margin-left: 4 px;游标:nw-resize;}
.up {
左:50%;/*父元素盒子主要宽度的一半,注意要有绝对定位*/margin-left: 4 px;
上图:4 px;
光标:n-resize;
}
.up-right {: 4 px;右:4 px;游标:ne-resize;}
铃声{:50%;margin-top: 4 px;右:4 px;游标:e-resize;}
.right-down {: 4 px;底:4 px;游标:se-resize;}
.down{底:4 px;左:50%;margin-left: 4 px;游标:s-resize;}
左.left-down {: 4 px;底:4 px;游标:sw-resize;}
左.left {: 4 px;: 50%; margin-top: 4 px;游标:w-resize;}
选择框鼠标拖动位置详解:
offsetLeft:元素相对于其父元素左边界的距离,
clientX:鼠标位置的横坐标;
clientWidth:元素的宽度;
offsetXY:是该事件发生的盒子模型里的坐标,与滚动条无关。
clientXY:是整个浏览器可用部分里的坐标,与滚动条无关,即需要拖动滚动条才能看到的区域不考虑。
pageXY:是整个网页里的坐标,与滚动条有关。
构造一个getPosition()函数,用于获取元素相对于屏幕左边及上边的距离
js代码如下:
//获取元素相对于屏幕左边及上边的距离,利用offsetLeft
函数getPosition (el) {
var左=el.offsetLeft;
var=el.offsetTop最高;
var父母=el.offsetParent;
而(父!=null) {
左+=parent.offsetLeft;
前+=parent.offsetTop;
父母=parent.offsetParent;
}
返回{“左”:左,“顶级”:顶级};
}
监听鼠标的按下,拖动,松开的事件控制选取框的大小。
<强>
元素。clientWidth属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有的话),边框和外边距。
即clientWidth不包括边框,offsetWidth包括边框
1)点击右面的触点
js代码:
var mainDiv=$('主');
var rightDiv=$('正确');
var isDraging=false;
var=" ";联系//表示被按下的触点//鼠标按下时
rightDiv。onmousedown=function () {
isDraging=true;
联系=罢贰钡?
}//鼠标松开时
窗口。onmouseup=function () {
isDraging=false;
}//鼠标移动时
窗口。onmousemove=function (e) {
如果(isDraging==true) {
如果(联系==罢贰?{
var e=e | | window.event;
var x=e.clientX;//鼠标位置的横坐标
var widthBefore=mainDiv。offsetWidth - 2;//选取框变化前的宽度//var widthBefore=mainDiv.clientWidth;
var addWidth=x - getPosition (mainDiv)。左- widthBefore;//鼠标移动后选取框增加的宽度
mainDiv.style。宽度=widthBefore + addWidth +“px”;//选取框变化后的宽度
}
}
}//获取id的函数
函数$ (id) {
返回. getelementbyid (id);
}
