为什么字符串在一定间隔内不移动
Why does the string not moving within the certain interval?
我正在尝试制作一个简单的代码,每 1 毫秒移动 20 像素的行(smt 像一个股票代码(。此外,希望它在到达浏览器窗口边缘后使用 .offsetWidth 属性消失。不幸的是,我被困住了,我不知道为什么它根本没有移动。请帮我找到错误,或者我走错了方向?谢谢!
<html>
<head>
<title>Blablabla</title>
<meta charset ="utf-8">
<!-- <script type="text/javascript" src="line.js"></script> -->
</head>
<body onload="interval()">
<div id="line">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</div>
<script type="text/javascript">
function interval() {
var line = setInterval(function(){document.getElementById("line").style.left = scroll.offsetWidth}, 20);
}
</script>
</body>
</html>
看看下面的示例,它有注释,应该可以帮助您理解,结帐演示和玩代码
//set starting offset
var leftOffset = 0;
//assign element to variable
var element = document.getElementById("line");
//css.left requires position.absolute
element.style.position = 'absolute';
//calculate width of element, in display.block it's 100%
element.style.display = 'inline-block';
//assign interval id to a variable for cancelation
var interval = setInterval(function(){
//increase offset by 1
leftOffset = leftOffset + 1;
//check if element is sticked to screen.right
if(leftOffset + element.offsetWidth < document.body.offsetWidth) {
//not sticked
//add pixels
element.style.left = leftOffset + 'px';
} else {
//sticked
//remove interval
clearInterval(interval);
//hide element
element.style.display = 'none';
}
}, 20);
<div id="line">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</div>
-
line
必须是定位absolute
元素,以便left
CSS 属性将影响 - 我假设您在
interval
中分配left
属性时没有提到+px(unit)
因为element.offsetWidth
不会返回带有值的unit
[Ref]
这是我
的镜头:
<html>
<head>
<title>Blablabla</title>
<meta charset ="utf-8">
<!-- <script type="text/javascript" src="line.js"></script> -->
</head>
<body>
<div id="line">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</div>
<script type="text/javascript">
number = 5; //should be increased each time
setInterval(function(){var d = document.getElementById('line');
d.style.position = "absolute";
number++; //increase number
d.style.left = number; //move the div according to the number
}, 200); //notice that you can increase/decrease 200 according to your will
</script>
</body>
</html>
相关文章:
- 如何在JavaScript中将字符串转换为函数引用
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- jQuery中是否内置了任何字符串格式化函数
- 使用键盘箭头在画布上移动字符串
- 在字符串的各个部分周围移动
- 如何将javascript yml字符串移动到数据库to ruby数组
- 移动图像 ..JavaScript 将变量声明为字符串
- Javascript字符串替换方法在移动设备上不起作用
- 为什么字符串在一定间隔内不移动
- jquery移动字符串搜索页面文本
- JS:如何将给定字符串 N 中的每个字母在字母表中向下移动
- 为什么这个查询字符串参数不能在移动设备上工作
- Javascript查询字符串不能在移动设备上工作
- 按字符串名称移动下拉列表中li的位置
- 解码html字符串在JQuery移动模板
- JQuery移动查询字符串问题在非pushState浏览器
- Jquery移动JSON字符串到java-script数组
- 每秒从字符串中移动一个字符