极客观点
项目管理
HarmonyOS
1.为什么刷新页面offsetWidth值自己会不断变化?如果可能的话请把此段代码运行一下就知道了,刷新的话会自动变为200或者0.另外我在实现拖拽功能良好的情况下 增加了点击滑道 滑块自动就位的功能,但是出现了两个事件冲突的现象,请问这个问题该如何解决?
2.页面代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ffg</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 150px;
margin: 50px auto;
background-color: rgb(206, 206, 206);
position: relative;
}
.leftBtn {
float: left;
padding-top: 20px;
}
.leftBtn a {
display: block;
width: 20px;
height: 65px;
background: url(images/bg05.png) no-repeat 0 0;
}
.rightBtn {
float: left;
padding-top: 20px;
}
.rightBtn a {
display: block;
width: 20px;
height: 65px;
background: url(images/bg05.png) no-repeat -40px 0;
}
.imgList {
float: left;
height: 150px;
width: 760px;
overflow: hidden;
position: relative;
}
.m_unit {
width: 1000%;
height: 130px;
position: absolute;
top: 0;
left: 0;
}
.m_unit ul {
list-style: none;
}
.m_unit ul li {
float: left;
margin-right: 10px;
}
.scrollWay {
width: 100%;
height: 20px;
background-color: rgb(66, 66, 66);
position: absolute;
bottom: 0;
}
.scrollBlock {
position: absolute;
left: 0;
top: 2px;
width: 300px;
height: 15px;
/* background-color: red; */
background: url(images/bg07.png) 0 31px;
}
.sBleft {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 15px;
background: url(images/bg07.png) 0 0;
}
.sBright {
position: absolute;
top: 0;
right: 0;
width: 11px;
height: 15px;
background: url(images/bg07.png) -24px 0;
}
.sBcenter {
position: absolute;
top: 0;
left: 50%;
margin-left: -7px;
width: 14px;
height: 15px;
background: url(images/bg07.png) -46px 0;
}
</style>
</head>
<body>
<div class="box">
<div class="leftBtn" id="leftBtn">
<a href="javascript:;"></a>
</div>
<div class="imgList" id="imgList">
<div class="m_unit" id="m_unit">
<ul>
<li>
<img src="images/0.png" alt="">
</li>
<li>
<img src="images/1.png" alt="">
</li>
<li>
<img src="images/2.png" alt="">
</li>
<li>
<img src="images/3.png" alt="">
</li>
<li>
<img src="images/4.png" alt="">
</li>
<li>
<img src="images/5.png" alt="">
</li>
<li>
<img src="images/6.png" alt="">
</li>
<li>
<img src="images/7.png" alt="">
</li>
<li>
<img src="images/8.png" alt="">
</li>
<li>
<img src="images/9.png" alt="">
</li>
<li>
<img src="images/0.png" alt="">
</li>
</ul>
</div>
<div class="scrollWay" id="scrollWay">
<div class="scrollBlock" id="scrollBlock">
<div class="sBleft"></div>
<div class="sBright"></div>
<div class="sBcenter"></div>
</div>
</div>
</div>
<div class="rightBtn" id="rightBtn">
<a href="javascript:;"></a>
</div>
</div>
<script type="text/javascript">
//首先得到可能要用到各种元素
var scrollBlock = document.getElementById("scrollBlock");
var scrollWay = document.getElementById("scrollWay");
var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");
var imgList = document.getElementById("imgList");
var m_unit = document.getElementById("m_unit");
var lis = document.getElementById("m_unit").getElementsByTagName("li");
//计算比率
var rate = imgList.offsetWidth / (210 * lis.length);
console.log("输入第一个LI的OFFSET值是" + lis[0].offsetWidth);
scrollBlock.style.width = scrollWay.offsetWidth * rate + "px";
//给滑块添加监听
scrollBlock.onmousedown = function (event) {
event = event || window.event;
//记录滑块差值
var Dvalue = event.clientX - scrollBlock.offsetLeft;
//开始移动监听
document.onmousemove = function (event) {
event = event || window.event;
var x = event.clientX - Dvalue;
//验收
if (x > scrollWay.offsetWidth - scrollBlock.offsetWidth) {
x = scrollWay.offsetWidth - scrollBlock.offsetWidth;
} else if (x < 0) {
x = 0;
}
scrollBlock.style.left = x + "px";
//图片运动
m_unit.style.left = -x / rate + "px";
//释放监听
document.onmouseup = function () {
document.onmousemove = null;
}
//阻止默认事件
event.preventDefault();
return false;
}
}
//给滑块添加监听
leftBtn.onclick = function () {
var x = scrollBlock.offsetLeft - 50;
//验收
if (x > scrollWay.offsetWidth - scrollBlock.offsetWidth) {
x = scrollWay.offsetWidth - scrollBlock.offsetWidth;
} else if (x < 0) {
x = 0;
}
scrollBlock.style.left = x + "px";
m_unit.style.left = -x / rate + "px";
}
rightBtn.onclick = function () {
var x = scrollBlock.offsetLeft + 50;
//验收
if (x > scrollWay.offsetWidth - scrollBlock.offsetWidth) {
x = scrollWay.offsetWidth - scrollBlock.offsetWidth;
} else if (x < 0) {
x = 0;
}
scrollBlock.style.left = x + "px";
m_unit.style.left = -x / rate + "px";
}
//给滑道添加事件
scrollWay.onclick = function (event) {
event = event || window.event;
//验收
var msx = event.offsetX;
if (msx > scrollBlock.offsetLeft) {
msx = event.offsetX - scrollBlock.offsetWidth;
} else if (msx < scrollBlock.offsetLeft) {
msx = event.offsetX;
};
scrollBlock.style.left = msx + "px";
m_unit.style.left = -msx / rate + "px";
return false;
}
</script>
</body>
</html>3.图片
4.如果有可能烦请大神运行一下 帮忙看下为何会出现两个事件就会不兼容 有没有可以解决的方案 万分感谢!!
因为你的li本身没有宽度，当其中的img下载完成后，才撑起宽度。页面刷新时，当img没有下载完成时，这个li的offsetWidth就是0，恰巧你js执行打印操作前img下载完成了，就会打印真实宽度。
解决方法是把你那一堆js放到window onload事件中，即等待页面所有元素加载完成再执行脚本。
window.onload = function() {//放到这里};这个你在问题中没有说明白谁和谁冲突了。看上去是scrollBlock.onmousedown和onmouseup组合（两个组合相当于一个click） 与 scrollWay.click冲突了？ 那你在定义处理方法是，使用 event的target属性判断一下事件来源就好了。
document.onmouseup为什么写在了 onmousedown里面，并列写会更合理一点。