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中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
vue二选一tab栏切换新做法实现
Jan 19 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中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
js继承实现方法详解
2016/12/16 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
ES6中数组array新增方法实例总结
2017/11/07 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
跟老齐学Python之dict()的操作方法
2014/09/24 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
设计模式的基本要素是什么
2014/04/21 面试题
艺术设计专业求职自荐信
2014/05/19 职场文书
农民工讨薪标语
2014/06/26 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
就业导师推荐信范文
2015/03/27 职场文书
父亲去世追悼词
2015/06/23 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技