JavaScript浮动的图片

最新推荐文章于 2022-08-24 21:41:38 发布

晴天;'

最新推荐文章于 2022-08-24 21:41:38 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/sj15560122716/article/details/107019599

版权

<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var div = document.getElementById("div")
				var UP = false;
				var xia = false;

				var fun1 = function() {
					var top = parseInt(div.style.top)
					var left = parseInt(div.style.left)

					if(top === 0) {
						UP = false;
						div.style.top = top + 1 + "px"
					} else if(top === 400) {
						UP = true;
						div.style.top = top - 1 + "px"
					} else {
						if(UP == false) {
							div.style.top = top + 1 + "px"
						} else if(UP == true) {
							div.style.top = top - 1 + "px"
						}
					}
					if(left === 0) {
						xia = false;
						div.style.left = left + 1 + "px"
					} else if(left === 1100) {
						xia = true;
						div.style.left = left - 1 + "px"
					} else {
						if(xia == false) {
							div.style.left = left + 1 + "px"
						} else {
							div.style.left = left - 1 + "px"
						}
					}
				}
				t = setInterval(fun1, 10)
				
				div.onmouseover = function() {
					clearInterval(t)
				}
				div.onmouseout = function() {
					t = setInterval(fun1, 10)
				}
			}
		</script>
		<style type="text/css">
			body {
				margin: 0;
				border: 1px solid red;
				height: 500px;
				width: 1200px;
			}
			
			#div {
				width: 150px;
				height: 100px;
				background-color: rgba(200, 0, 200, 0.6);
				/*决定定位*/
				position: absolute;
				z-index: 99;
			}
		</style>
	</head>

<body>
		<div id="div" style="top: 0px; left: 0px;"><img src="img/bwcxljsm.jpg" id="div" /></div>	
	</body>

效果图

晴天;'

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript浮动的图片

<head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function() { var div = document.getElementById("div") var UP = false; var xia = false; var fun1 = funct.
复制链接

扫一扫