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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jquery队列函数用法实例
Dec 16 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
vue编译打包本地查看index文件的方法
Feb 23 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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批量删除超链接的实现方法
2015/10/19 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
DEFER怎么用?
2006/07/01 Javascript
不错的一个日期输入 动态
2006/11/06 Javascript
js中判断控件是否存在
2010/08/25 Javascript
JavaScript 的继承
2011/10/01 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python链接Oracle数据库的方法
2015/06/28 Python
Python缩进和冒号详解
2016/06/01 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python实现的汉诺塔算法示例
2019/10/23 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
无故旷工检讨书
2014/01/26 职场文书
暑期培训随笔感言
2014/03/10 职场文书
团干部培训方案
2014/06/03 职场文书
迎新晚会策划方案
2014/06/13 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
单位工作证明
2014/10/07 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
Django使用redis配置缓存的方法
2021/06/01 Redis
15个值得收藏的JavaScript函数
2021/09/15 Javascript