用getElementsByClassName获取的所有元素的值导致其他值无效

随_声 2019-07-22 07:54:25
原代码只有一张图是
我改为getElementsByClassName把img都加上img[i]拖不动了,而我去调试的时候,控制台报这三个错,无法获取未定义或 null 引用的属性offsetWidth,className,style,
原js代码链接:https://sinooyj.iteye.com/blog/1287739
我把原来的js改动为:<style type="text/css">
.chr {cursor: e-resize;}/*鼠标左右边按住拖动事件*/
.cvr {cursor: s-resize;}/*鼠标上下边按住拖动事件*/
.cner {cursor: ne-resize;}/*鼠标右上角和左下角按住拖动事件*/
.cnwr {cursor: nw-resize;}/*鼠标左上角和右下角按住拖动事件*/
.cdft {cursor: default;}/*鼠标默认事件*/
.cmove {cursor: move;}/*鼠标按住拖动事件*/
</style>
</head>
<body>
<img src="image/p1.png" style="width: 300px; position: absolute; left: 100px; top: 100px;" class="cdft imgsrc"/>
<img src="image/p2.png" style="width: 300px; position: absolute; left: 100px; top: 200px;" class="cdft imgsrc"/>
<img src="image/p3.png" style="width: 300px; position: absolute; left: 100px; top: 300px;" class="cdft imgsrc"/>
<img src="image/p4.png" style="width: 300px; position: absolute; left: 100px; top: 400px;" class="cdft imgsrc"/>
<script type="text/javascript">
var img=document.getElementsByClassName("imgsrc");

for(var i=0;i<img.length;i++){
var span=10;
var isDrag=null;
var isIE=!!document.all;
var ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false;
var percent=img[i].offsetHeight/img[i].offsetWidth;
function mouseMove(e){
e=e||event;
var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY,imgW=img[i].offsetWidth,imgH=img[i].offsetHeight;
if((x<=span&&y<=span)||(x>=imgW-span&&y>=imgH-span))img[i].className='cnwr';
else if((x<=span&&y>=imgH-span)||(y<=span&&x>=imgW-span))img[i].className='cner';
else if(x<=span||x>=imgW-span)img[i].className='chr';
else if(y<=span||y>=imgH-span)img[i].className='cvr';
else img[i].className='cdft';

}
function mouseDown(e){
e=e||event;
ex=e.clientX;//保存当前鼠标X轴的坐标
ey=e.clientY;//保存当前鼠标y轴的坐标
ox=parseInt(img[i].style.left);
oy=parseFloat(img[i].style.top);
if(img[i].className=='cdft'){
isDrag=true;
img[i].className='cmove';
}
else{
isDrag=false;
oh=img[i].offsetHeight;//获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
ow=img[i].offsetWidth;
var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY;//相对容器的水平坐标,相对容器的垂直坐标
chrPosX=x<=span;
chrPosY=y<=span;
if(e.ctrlKey){//事件属性可返回一个布尔值,指示当事件发生时,Ctrl 键是否被按下并保持住
ow=oh/percent;//根据比例计算出宽度
img[i].style.width=ow;//更新图片宽度
}
}
if(isIE)img[i].setCapture();
document.onmousemove=mouseDownAndMove;
img.onmousemove=null;
return false;
}
function mouseDownAndMove(e){
e=e||event;
if(isDrag===true){
img[i].style.left=ox+e.clientX-ex+'px';
img[i].style.top=oy+e.clientY-ey+'px';
}
else if(isDrag===false){
var x=e.clientX-ex,y=e.clientY-ey;
switch(img[i].className){
case 'chr':
x=chrPosX?-x:x;
y=e.ctrlKey?percent*x+oh:oh;
img[i].style.width=ow+x+'px';
img[i].style.height=y+'px';
if(chrPosX)img[i].style.left=ox-x+'px';
break;
case 'cvr':
y=chrPosY?-y:y;
x=e.ctrlKey?y/percent+ow:ow;
img[i].style.width=x+'px';
img[i].style.height=oh+y+'px';
if(chrPosY)img[i].style.top=oy-y+'px';
break;
case 'cnwr':
case 'cner':
x=chrPosX?-x:x;
if(e.ctrlKey){//按宽等比
y=e.ctrlKey?percent*x+oh:oh;
img[i].style.width=ow+x+'px';
img[i].style.height=y+'px';
if(chrPosX)img[i].style.left=ox-x+'px';
}
else{
y=chrPosY?-y:y;
img[i].style.width=ow+x+'px';
img[i].style.height=oh+y+'px';
if(chrPosX)img[i].style.left=ox-x+'px';
if(chrPosY)img[i].style.top=oy-y+'px';
}
break;
}
}
}
img[i].onmousemove=mouseMove;
img[i].onmousedown=mouseDown;
document.onmouseup=function(){
if(typeof isDrag=="boolean"){
if(isIE)img[i].releaseCapture();//函数的作用就是将后续的mouse事件都发送给这个对象
}
isDrag=null;
img[i].className='cdft';
img[i].onmousemove=mouseMove;
document.onmousemove=null;
}
}
</script>
...全文
460 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
随_声 2019-07-23
  • 打赏
  • 举报
回复
引用 3 楼 天际的海浪 的回复:
要按你这样改的话用闭包或许可以:
var img=document.getElementsByClassName("imgsrc");
for (var i = 0; i < img.length; i++) {
	(function (img) {
		var span=10;  
		var isDrag=null;  
		var isIE=!!document.all;  
		var ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false;
		var percent=img.offsetHeight/img.offsetWidth;
		function mouseMove(e){
		。。。。。。。。。。。。。
	})(img[i]);
}
并且要把 document.onmouseup事件的绑定放到 mouseDown函数中。
成功了,非常感谢大佬
随_声 2019-07-22
  • 打赏
  • 举报
回复
引用 3 楼 天际的海浪 的回复:
要按你这样改的话用闭包或许可以:
var img=document.getElementsByClassName("imgsrc");
for (var i = 0; i < img.length; i++) {
	(function (img) {
		var span=10;  
		var isDrag=null;  
		var isIE=!!document.all;  
		var ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false;
		var percent=img.offsetHeight/img.offsetWidth;
		function mouseMove(e){
		。。。。。。。。。。。。。
	})(img[i]);
}
并且要把 document.onmouseup事件的绑定放到 mouseDown函数中。
谢谢大佬
天际的海浪 2019-07-22
  • 打赏
  • 举报
回复 1
要按你这样改的话用闭包或许可以:
var img=document.getElementsByClassName("imgsrc");
for (var i = 0; i < img.length; i++) {
	(function (img) {
		var span=10;  
		var isDrag=null;  
		var isIE=!!document.all;  
		var ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false;
		var percent=img.offsetHeight/img.offsetWidth;
		function mouseMove(e){
		。。。。。。。。。。。。。
	})(img[i]);
}
并且要把 document.onmouseup事件的绑定放到 mouseDown函数中。
随_声 2019-07-22
  • 打赏
  • 举报
回复
引用 1 楼 天际的海浪 的回复:
你这样做是没可能的。我之前说了要想实现多例应用必须整个重新编写代码(最好写成面向对象的)。
可是,我是个前端新手,我不太会写,对js和jq都不熟,我找了很久也没怎么找到写这个的方法,我也尝试着自己写,但不对,那我去研究研究面向对象怎么写吧。谢谢了
天际的海浪 2019-07-22
  • 打赏
  • 举报
回复
你这样做是没可能的。我之前说了要想实现多例应用必须整个重新编写代码(最好写成面向对象的)。

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧