JavaScript代码实现左右上下自动晃动自动移动


Posted in Javascript onApril 08, 2016

最近几天做了一个项目,原来是用css3动画做的,由于不兼容IE,改成用js做了,特此分享给大家,供大家参考,代码有bug欢迎提出,写的不好还请见谅!

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>float left and top</title>
<style type="text/css">
.w1000{position:relative;width:1000px;margin:0 auto;}
.positionpub{position:absolute;}
.positionpub p{width:50px;height:50px;background:#333;color:#fff;line-height:50px;text-align:center;position:absolute;}
.ad_Float{top:50px;left:50px;}
.ad_Float1{top:150px;left:250px;}
.ad_Float2{top:250px;left:450px;}
</style>
</head>
<body>
<div class="w1000">
<div class="ad_Float positionpub">
<p id="ad_Float">left</p>
</div>
<div class="ad_Float1 positionpub">
<p id="ad_Float1">right</p>
</div>
<div class="ad_Float2 positionpub">
<p id="ad_Float2">down</p>
</div>
</div>
<script type="text/javascript">
var x = 0, y = 0 , x1 = 0;
var xin = true, yin = true;
var step = 1,step2 = 2;
var delay = 10;
var obj = document.getElementById("ad_Float");
var obj1 = document.getElementById("ad_Float1");
var obj2 = document.getElementById("ad_Float2");
function ad_Float() {
var L = 0;
var R = 100;
obj.style.left = x + document.documentElement.scrollLeft + "px";
x = x + step * (xin ? 1 : -1);
if (x < L) {
xin = true;
x = L;
}
if (x > R) {
xin = false;
x = R;
}
};
function ad_Float1() {
var L1 = 0;
var R1 = 100;
obj1.style.left = x1 + document.documentElement.scrollLeft + "px";
x1 = x1 + step * (xin ? 1 : -1);
if (x1 < L1) {
xin = true;
x1 = L1;
}
if (x1 > R1) {
xin = false;
x1 = R1;
}
};
function ad_Float2() {
var T = 0;
var B = 150;
obj2.style.top = y + document.documentElement.scrollTop + "px";
y = y + step2 * (yin ? 1 : -1);
if (y < T) {
yin = true;
y = T;
}
if (y > B) {
yin = false;
y = B;
}
};
var itl = setInterval("ad_Float()", delay);
var itl1 = setInterval("ad_Float1()", delay);
var itl2 = setInterval("ad_Float2()", delay);
</script>
</body>
</html>

代码到此结束了,希望对大家有所帮助!

Javascript 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
用JS创建一个录屏功能
Nov 11 Javascript
JS表单验证的代码(常用)
Apr 08 #Javascript
JavaScript事件代理和委托详解
Apr 08 #Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 #Javascript
关于cookie的初识和运用(js和jq)
Apr 07 #Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 #Javascript
原生JavaScript实现Ajax的方法
Apr 07 #Javascript
JavaScript数据推送Comet技术详解
Apr 07 #Javascript
You might like
PHP 防注入函数(格式化数据)
2011/08/08 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
浅谈Python的异常处理
2016/06/19 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
python redis存入字典序列化存储教程
2020/07/16 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
前台接待岗位职责
2013/12/03 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
园艺师求职信
2014/03/10 职场文书
商场促销活动策划方案
2014/08/18 职场文书
学期个人工作总结
2015/02/13 职场文书
降价通知函
2015/04/23 职场文书
民主生活会意见
2015/06/05 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers