首页 > 代码库 > 图片在界面的移动
图片在界面的移动
在制作网页中会有许多的动态效果,这里就列举一个图片在界面不停的左右移动的动态效果代码:根据这代码我们可以实现许多的不同效果。
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
body{ | |
margin: 0; | |
} | |
#div1{ | |
width: 50px; | |
height: 50px; | |
background-color: red; | |
position: absolute; | |
/*left: 100px;*/ | |
} | |
</style> | |
</head> | |
<body> | |
<button onclick="mymove()">移动</button> | |
<button onclick="getjiemian()">界面</button> | |
<hr/> | |
<div id="div1"></div> | |
<script> | |
function getjiemian(){ | |
alert(document.body.offsetWidth); | |
} | |
var num = 2; | |
function mymove(){ | |
var div1 = document.getElementById(‘div1‘); | |
// alert(div1.offsetLeft+‘,,‘+div1.offsetTop); | |
// 元素的style属性无法获取style标记中设置的值,而仅仅只能读取style属性的值 | |
div1.style.left = div1.offsetLeft + num + ‘px‘; | |
if(div1.offsetLeft+div1.offsetWidth>=document.body.offsetWidth | |
|| div1.offsetLeft<=0) | |
num = -num; | |
window.setTimeout(mymove, 20); | |
} | |
</script> | |
</body> | |
</html> |
图片在界面的移动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。