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 相关文章推荐
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 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
YII动态模型(动态表名)支持分析
2016/03/29 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
python和php哪个容易学
2020/06/19 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
记者岗位职责
2014/01/06 职场文书
学校安全管理责任书
2014/07/23 职场文书
岗位安全生产责任书
2014/07/28 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
redis数据结构之压缩列表
2022/03/21 Redis
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android