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 function调用时的参数检测常用办法
Feb 26 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
javascript事件处理模型实例说明
May 31 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
js实现微信聊天效果
Aug 09 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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加密解密字符串示例
2016/10/13 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
PHP递归的三种常用方式
2019/02/28 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
python自带的http模块详解
2016/11/06 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
python 元组的使用方法
2020/06/09 Python
pytorch SENet实现案例
2020/06/24 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
Pycharm安装python库的方法
2020/11/24 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
技术合作协议书范本
2014/04/18 职场文书
文明之星事迹材料
2014/05/09 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
学生犯错保证书
2015/05/09 职场文书
上学路上观后感
2015/06/16 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书