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 相关文章推荐
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
Vuex简单入门
Apr 19 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
vue使用Google地图的实现示例代码
Dec 19 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
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仿盗链代码
2012/06/03 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python之web模板应用
2017/12/26 Python
Python中的默认参数实例分析
2018/01/29 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python统计单词出现的次数
2018/04/04 Python
对pandas中apply函数的用法详解
2018/04/10 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python获取整个网页源码的方法
2020/08/03 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
浅谈css3中的前缀
2016/07/20 HTML / CSS
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
《乌塔》教学反思
2014/02/17 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
家长会开场白和结束语
2015/05/29 职场文书
关于感恩的作文
2019/08/26 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python