本文介绍了一种使用HTML、CSS及JavaScript实现页面中广告图片随机移动的技术方案。通过设定广告图片的绝对定位，并利用JavaScript定时更新其位置坐标，使得广告能够在网页上随机游走。
浮动广告（页面中一张广告图片不断的变化位置）
<style>
#dt{
width: 150px;
height: 150px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<!-- 3、浮动广告（页面中一张广告图片不断的变化位置） -->
<div id="dt">
<img src="./image/1.jpg" alt="" height="150" width="150">
</div>
<script>
function updatePosition(){
//获取随机数
let my_top = Math.random()*400
let my_left = Math.random()*1000
//获取div的位置
let div = document.querySelector('#dt')
div.style.top = my_top+'px'
div.style.left = my_left+'px'
}
setInterval(updatePosition,1000)
</script>
扫一扫
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
