<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动的图片</title>
<style>
div{
position:absolute;
}
</style>
</head>
<body>
<div id="img">
<img src="1111.JPG" height="100px" width="100px"/>
</div>
<script language="javascript" type="text/javascript">
//获取div中图片的对象
var img=document.getElementById("img");
//设置div左上角坐标 起始坐标
var x=0,y=0;
//设置图片行进的速度
var xSpeed=12,ySpeed=5;
//设置图片的最大浮动的高度和宽度
var w=document.documentElement.clientWidth-100,h=document.documentElement.clientHeight-120;
function floatimg(){
//比较图片是否到达边界
//如果到达边界以后,我控制图片改变方向
if(x>w || x<0) xSpeed = -xSpeed;
if(y>h || y<0) ySpeed = -ySpeed;
//如果没有到达边界,设置图片的左上角的坐标
x+=xSpeed;
y+=ySpeed;
//设置坐标值 起始坐标+速度
img.style.top=y+"px";
// alert(img.style.top);
img.style.left=x+"px";
setTimeout("floatimg()",40);
}
floatimg();
</script>
</body>
</html>
DOM之漂浮广告效果
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 故障字体效果
用 css 实现一个404故障字体效果。
css 动效 故障效果 404动画 ux -
有趣的CSS - 文字加载动画效果
用 css 实现多字符模拟加载动画效果。
css 加载动画 交互 ux 动效 -
#yyds干货盘点#CSS实现漂浮效果
css 漂浮效果
css 特效 漂浮效果 -
day14 python css 漂浮的学习
a f
html 父类 子类 -
HTML+CSS制作漂浮的对话框
HTML+CSS制作漂浮的对话框效果图如下:HTML部分源代码如下:<!DOCTYPE html><html
css css3 html html5 初始化 -
CSS打字效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>wgchen</title>
css 前端 css3 html .net -
css动画效果
动画1(沿着椭圆转动)其实是个2D转动,只不过咱们设置椭圆,然后加上scale缩放(近大远小),看上
前端 css3 html 4s 2d -
css渐变效果
css渐变效果 2012-04-05 17:58:45| 分类: 默认分类|字号 订阅 CSS3发布很久了,现在在国外的一些页面上常能看到他的身
前端 人工智能 ViewUI 线性渐变 Chrome -
CSS布局效果
与原计划稍微有一点出入,我们先完成BlogDigger的原型级产品:OnlineRssReader!前台后台数据
css float div html border