JavaScript 左右上下自动晃动,自动移动。
最近做了一个项目,本来用css3动画做的,不兼容ie,用js做了个,分享给大家。
代码修改了下,上下左右四个模块,顺时针转动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>float left and top</title>
<style type="text/css">
*{margin:0;padding:0;}
.demo{position:relative;width:500px;margin:0 auto;height:500px;margin-top:10px;border:1px solid #333;}
.positionpub{position:absolute;width:100px;height:100px;}
.positionpub p{width:100px;height:100px;background:#333;color:#fff;line-height:100px;text-align:center;position:absolute;}
.float-left-t{top:0;left:0;}
.float-right-t{top:0;right:0;}
.float-bottom-l{bottom:0;left:0;}
.float-bottom-r{bottom:0;right:0;}
</style>
</head>
<body>
<div class="demo">
<div class="float-left-t positionpub">
<p id="left_top">lefttop</p>
</div>
<div class="float-right-t positionpub">
<p id="right_top">righttop</p>
</div>
<div class="float-bottom-l positionpub">
<p id="left_bottom">leftbottom</p>
</div>
<div class="float-bottom-r positionpub">
<p id="right_bottom">rightbottom</p>
</div>
</div> <script type="text/javascript">
var x = 0, y = 0 , x1 = 0 , y1 = 0;
var xin = true, yin = true;
var step = 1,step2 = 2;
var delay = 100;
var obj = document.getElementById("left_top");
var obj1 = document.getElementById("right_top");
var obj2 = document.getElementById("left_bottom");
var obj3 = document.getElementById("right_bottom"); function left_top() {
var L = 0;
var R = 100;
obj.style.left = x + document.documentElement.scrollLeft + "px";
x = x + step * (xin ? 1 : -1);
//xin是一个变量, (xin?1:-1) 的意思就是 当 xin 为 true 或者 非0, 括号里的表达式值为 1, xin为 false,表达式的值为 -1.
if (x < L) {
xin = true;
x = L;
}
if (x > R) {
xin = false;
x = R;
}
}; function right_top() {
var T = 0;
var B = 100;
obj1.style.top = y + document.documentElement.scrollTop + "px";
y = y + step * (yin ? 1 : -1);
if (y < T) {
yin = true;
y = T;
}
if (y > B) {
yin = false;
y = B;
}
}; function left_bottom() {
var B = 0;
var T = 100;
obj2.style.bottom = y1 + document.documentElement.scrollTop + "px";
y1 = y1 + step * (yin ? 1 : -1);
if (y1 < B) {
yin = true;
y1 = B;
}
if (y1 > T) {
yin = false;
y1 = T;
}
}; function right_bottom() {
var L = 0;
var R = 100;
obj3.style.right = x1 + document.documentElement.scrollLeft + "px";
x1 = x1 + step * (xin ? 1 : -1);
if (x1 < L) {
xin = true;
x1 = L;
}
if (x1 > R) {
xin = false;
x1 = R;
}
}; var itl = setInterval("left_top()", delay);
var itl1 = setInterval("right_top()", delay);
var itl2 = setInterval("left_bottom()", delay);
var itl3 = setInterval("right_bottom()", delay);
</script>
</body>
</html>
JavaScript 左右上下自动晃动,自动移动。的更多相关文章
- JavaScript的类型自动转换高级玩法JSFuck
0 前言 最开始是不小心在微信公众号(程序员大咖)看到一篇JS的高逼格代码,然后通过里面的链接跳转到了JSFuck的wiki,就像顺着迷宫找宝藏的感觉,感叹JS的自动类型转换的牛逼. 1 样例 (!( ...
- JavaScript的类型自动转换样例集合处
1.前言 如果Javascript期望使用一个字符串,它会把给定的值转换成字符串:如果Javascript期望使用一个数字,它会把给定的值转化成数字. 2.样例 2.1.字符串拼接时有数字 windo ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- javascript 文字大小自动适应文本框 (文字大小自动调整)
javascript 文字大小自动适应文本框 (文字大小自动调整) TOC 思考 思考一:面积法 思考二:微调法 代码 在进行类似微博墙之类的展示页面中,经常会遇到这样的需求:在固定大小的区域放入字数 ...
- 反人类的MyEclipse之-Javascript双引号自动补全
MyEclipse由于在JavaScript中按下一个双引号后会自动把后面的双引号补全.本人习惯两个双引号一起按下,那么这个时候在编辑器里就会出现三个",这样导致代码错误. 今天就因为MyE ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- [模仿微软Live.cn]JavaScript输入邮箱自动提示
原理是:在一个输入框 中,当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入123的时候 下拉框有所有123的邮箱 输入其他的时候 有其他文案对应的邮箱. 同理 此插件不需要任何html标签, ...
- javaScript和jQuery自动加载方法
一.JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下: <body onload="alert(1)"& ...
- JavaScript——问卷星自动填写
一.前言: 我们学校要刷学术章,有些学术章又是指定在某个时间点填写问卷星的问卷报名的.但是由于我手速慢,导致总会有些时候报不上名,于是想着搞个代码实现自动填写问卷星的报名表.一顿操作后,在github ...
随机推荐
- 模拟java.util.Collection一些简单的用法
/* 需求:模拟java.util.Collection一些简单的用法! 注意:java虚拟机中并没有泛型类型的对象.泛型是通过编译器执行一个被称为类型擦除的前段转换来实现的. 1)用泛型的原生类型替 ...
- java中匿名类的注意细节
abstract class Outer{ int num; public Outer(int x){ num = x; } public abstract void show1(); public ...
- 一道 google曾出过的笔试题:编程实现对数学一元多项式的相加和相乘操作(1)
数学中一元n次多项式可表示成如下的形式: Pn(x)=p0+p1x+p2x^2+…+pnx^n (最多有 n+1 项,n +1 个系数唯一确定她) (1)请设计一套接口用以表示和操 ...
- HTML5移动Web开发(九)——优化浏览器视口宽度设置
每个移动设备都有自己默认的视口宽度,如果你不显示的设置它的值,在渲染页面的时候你可能会得不到你想要的效果.比如,如果不设置iPhone的视口宽度,它将会按照980像素的宽度渲染页面,如果你的页面设计不 ...
- [转载]TFS发送邮件提醒功能
第一次使用TFS 2010,发现有Project Alerts功能,就是项目组工程中若有任何改动时,TFS Server会自动发邮件提醒.Microsoft提供的配置方法(http://msdn.mi ...
- 20个设计精致的用户界面 PSD 源文件免费下载
今天这篇文章收集了20个新鲜出炉的用户界面 PSD 源文件素材,你可以免费下载使用.这些免费素材不仅能帮助设计师们节省大量的时间,而且能有很好的效果.感谢那些很有才华的设计师分享它们的劳动成果,让更多 ...
- 索引深入浅出(4/10):非聚集索引的B树结构在聚集表
一个表只能有一个聚集索引,数据行以此聚集索引的顺序进行存储,一个表却能有多个非聚集索引.我们已经讨论了聚集索引的结构,这篇我们会看下非聚集索引结构. 非聚集索引的逻辑呈现 简单来说,非聚集索引是表的子 ...
- JQuery01
一:JQuery 1 JQuery知识 *:就是让我们学会调用JQ插件,其实内部就是对JS的封装. *:jquery里面有三个文件, 第2个和第3个其实里面的内容是一样的,只是第三个对其进行了压缩,使 ...
- LeetCode - Minimum Depth of Binary Tree
题目: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the ...
- 【转载】Lucene.Net无障碍学习和使用:搜索篇
在上一篇中,我们初步理解了索引的增删改查基本操作.本文着重介绍一下常用的搜索,以及搜索结果的排序和分页.本文的搜索主要是基于前一篇介绍的文本文件的索引,建议下载最后改进的demo对照着看阅读本文,同时 ...