首页 技术 正文
技术 2022年11月14日
0 收藏 730 点赞 3,604 浏览 1158 个字

一个广告框在指定区域,有定位属性的父级区域内,一直向右向左移动,如果碰到左右边框,反向,如果碰到上下边距,反向,实现在指定框中浮动的效果。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告浮动</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#div1{
width:50px;
height:70px;
border: 1px solid red;
background: blue;
position: absolute;/*绝对定位*/
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');//获得div元素 var x=1,y=1;
setInterval(function(){//定时器
var hei=oDiv.offsetHeight;//获得div的高度(加边框)
var k_hei=document.documentElement.clientHeight;//获得可视区域的高度
var max_top=k_hei-hei;//获得可以达到的最大高度 var wid=oDiv.offsetWidth;//获得div的宽度(加边框)
var k_wid=document.documentElement.clientWidth;//获得可视区域的宽度
var max_left=k_wid-wid;//获得可以达到的最大宽度 var left=oDiv.offsetLeft;//获得瞬时的离左边的距离
var top=oDiv.offsetTop;//获得离上边的距离
var new_left=left+1*x;//每过一个间隔,往右移一个像素
var new_top=top+1*y;//每过一个间隔,往下移一个像素
if(new_top>=max_top||new_top==0){//当新位置离上边距离大于最大位置,或新位置离上边距离等于0时(向上走时),垂直方向上反向
y=-1*y;
}
if(new_left>=max_left||new_left==0){//当新位置离左边距离大于最大位置,或新位置离左边距离等于0时(向左走时),左右方向上反向
x=-1*x;
}
oDiv.style.left=new_left+'px';//赋值(离左边的距离)
oDiv.style.top=new_top+'px';//赋值(离右边的距离)
},10);} </script></head>
<body>
<div id="div1"></div>
</body>
</html>
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,132
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,295