最近做了一个项目，本来用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 左右上下自动晃动，自动移动。的更多相关文章

  1. JavaScript的类型自动转换高级玩法JSFuck

    0 前言 最开始是不小心在微信公众号(程序员大咖)看到一篇JS的高逼格代码,然后通过里面的链接跳转到了JSFuck的wiki,就像顺着迷宫找宝藏的感觉,感叹JS的自动类型转换的牛逼. 1 样例 (!( ...

  2. JavaScript的类型自动转换样例集合处

    1.前言 如果Javascript期望使用一个字符串,它会把给定的值转换成字符串:如果Javascript期望使用一个数字,它会把给定的值转化成数字. 2.样例 2.1.字符串拼接时有数字 windo ...

  3. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  4. javascript 文字大小自动适应文本框 （文字大小自动调整）

    javascript 文字大小自动适应文本框 (文字大小自动调整) TOC 思考 思考一:面积法 思考二:微调法 代码 在进行类似微博墙之类的展示页面中,经常会遇到这样的需求:在固定大小的区域放入字数 ...

  5. 反人类的MyEclipse之-Javascript双引号自动补全

    MyEclipse由于在JavaScript中按下一个双引号后会自动把后面的双引号补全.本人习惯两个双引号一起按下,那么这个时候在编辑器里就会出现三个",这样导致代码错误. 今天就因为MyE ...

  6. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. [模仿微软Live.cn]JavaScript输入邮箱自动提示

    原理是:在一个输入框 中,当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入123的时候 下拉框有所有123的邮箱 输入其他的时候 有其他文案对应的邮箱. 同理 此插件不需要任何html标签, ...

  8. javaScript和jQuery自动加载方法

    一.JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下: <body onload="alert(1)"& ...

  9. JavaScript——问卷星自动填写

    一.前言: 我们学校要刷学术章,有些学术章又是指定在某个时间点填写问卷星的问卷报名的.但是由于我手速慢,导致总会有些时候报不上名,于是想着搞个代码实现自动填写问卷星的报名表.一顿操作后,在github ...

随机推荐

  1. 寻找表达式（dfs）

    题目来源:微策略2013年校园招聘笔试题 题目描述: 现在有一个序列123......N,其中N介于3和15之间,要求在序列之间加入+.-或者空格,使得该序列组成的数学表达式的运算结果为0. 输入: ...

  2. JavaWeb:JavaBean基础

    JavaBean基础 JavaBean简介: 1.JavaBean是一种可以重复使用的类,可以没有用户界面,主要负责业务数据或者处理事物(数据运算.操作数据库) 2.与JSP配合,可以简化JSP代码. ...

  3. IEE数据库安装向导

    RHEL 5用rpm包,直接安装后配置数据及缓存目录即可. RHEL 6用tar包+配置文件,本文是在RHEL 6上安装IEE的向导. ①上传infobright-4.0.6-x86_64.tar包和 ...

  4. Linux菜鸟级重点

    这是本人自学Linux所做的笔记,以及实现一些功能作的总结.乐意与各位喜欢linux的朋友交流学习,共同进步.这篇文章只是简单介绍一些linux比较常用的或者说是最基础的也是最重要的知识,有些在模块后 ...

  5. [New Portal]Windows Azure Virtual Machine (16) 使用Azure PowerShell创建Azure Virtual Machine

    <Windows Azure Platform 系列文章目录> 注:本章内容和之前的[New Portal]Windows Azure Virtual Machine (12) 在本地制作 ...

  6. C# Socket系列二 简单的创建 socket 通信

    看了系列一 我们开启了对socket tcp的监听状态,那么这一章我们来讲解怎么创建socket的通信代码 我新建一个类 TSocketBase public abstract class TSock ...

  7. [转载]MongoDB开发学习 经典入门

    如果你从来没有接触MongoDB或对MongoDB有一点了解,如果你是C#开发人员,那么你不妨花几分钟看看本文.本文将一步一步带您轻松入门. 阅读目录 一:简介 二:特点 三:下载安装和开启服务器 四 ...

  8. MVC 分页

    后台代码: using Webdiyer.WebControls.Mvc; ) { int pageIndex = id; int count; ; List<News> newsList ...

  9. 检索 COM 类工厂中 CLSID 为 {28E68F9A-8D75-11D1-8DC3-3C302A000000} 的组件失败，原因是出现以下错误: 80040154 没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))

    Resvr32 .net中引用控件的名称 如果注册成功,问题不在出现 但是如果是在x64位的系统中,即使控件注册成功,错误依照提示,是因为大多数第三方写的COM控件,只支持32位的系统, 在VS中找到 ...

  10. ASP.NET页面事件：顺序与回传详解

    当页面被提交请求第一个方法永远是构造函数.您可以在构造函数里面初始一些自定义属性或对象,不过这时候因为页面还没有被完全初始化所以多少会有些限制.特别地,您需要使用HttpContext对象.当前可以使 ...