<!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">

<head>

<style>

#div1 {width:100px; height:100px; background:red; position:absolute;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

var iSpeedX=;

var iSpeedY=;

function startMove()

{

    setInterval(function (){

        var oDiv=document.getElementById('div1');

        iSpeedY+=;

        var l=oDiv.offsetLeft+iSpeedX;

        var t=oDiv.offsetTop+iSpeedY;

        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)

        {

            iSpeedY*=-0.8;

            iSpeedX*=0.8;

            t=document.documentElement.clientHeight-oDiv.offsetHeight;

        }

        else if(t<=)

        {

            iSpeedY*=-;

            iSpeedX*=0.8;

            t=;

        }

        if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)

        {

            iSpeedX*=-0.8;

            l=document.documentElement.clientWidth-oDiv.offsetWidth;

        }

        else if(l<=)

        {

            iSpeedX*=-0.8;

            l=;

        }

        if(Math.abs(iSpeedX)<)

        {

            iSpeedX=;

        }

        if(Math.abs(iSpeedY)<)

        {

            iSpeedY=;

        }

        oDiv.style.left=l+'px';

        oDiv.style.top=t+'px';

        document.title=iSpeedX;

    }, );

}

</script>

</head>

<body>

<input type="button" value="开始运动" onclick="startMove()" />

<div id="div1">

</div>

</body>

</html>

js动弹特效的更多相关文章

  1. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  2. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  3. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  4. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

  5. 原生JS投票特效

    效果:http://hovertree.com/texiao/js/24/ 效果图: 代码如下: <!DOCTYPE html> <html lang="en"& ...

  6. Js文字特效—文字段逐个变色循环

    自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性. <!DOCTY ...

  7. javascript js写特效日历

    <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

  9. ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件（二）

    1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...

随机推荐

  1. 不启动VS2013，直接打开帮助文档的方法

    在使用VS2013做开发的时候,当我们需要查询一个知识点时,直接按"F1"键就可以打开配套的帮助文档.如果在没有打开VS2013的情况想查看它的帮助文档,我们应该怎么办呢?我们能否 ...

  2. 存储过程与SQL语句如何选择

    58到家数据库30条军规,有一条是“禁止使用存储过程.视图.触发器.Event”, 高并发大数据的互联网业务,架构设计思路是“解放数据库CPU,将计算转移到服务层”, 并发量大的情况下,这些功能很可能 ...

  3. 【CNMP系列】PHP配置和调优

    上一节我们说到PHP5.6.30在CentOS7.0下的整个安装过程,http://www.cnblogs.com/riverdubu/p/6428226.html 今天我来和大家讲解一下PHP-FP ...

  4. Docker存储驱动之AUFS简介

    简介 AUFS是曾是Docker默认的首选存储驱动.它非常稳定.有很多真实场景的部署.很强的社区支持.它有以下主要优点: 极短的容器启动时间. 有效的存储利用率. 有效的内存利用率. 虽然如此,但由于 ...

  5. Keepalived + HAProxy 搭建【第一篇】HAProxy 的安装和配置

    第一步:准备 1. 操作系统 CentOS-7-x86_64-Everything-1511 2. 安装包 haproxy-1.7.2.tar.gz 第二步:安装 # tar zxvf haproxy ...

  6. everything 快速搜索有代价

    我在一台电脑上运行过everything后,把它拷贝到另一台电脑上运行,前一台电脑上的搜索结果记录居然还,包括文件类型,标题,大小,位置.天呐··· 虽然看不到内容,但对于一个社工来说,一个标题完全足 ...

  7. Codeblocks快捷键

    Codeblocks快捷键: Ctrl+Shift+Enter:复制控制台exe内容 Ctrl+Z:撤销 Ctrl+F:查找  Ctrl+R:查找替换功能 Ctrl+Shift+C:加注释     C ...

  8. li点击弹出序号

    <body> <ul> <li>test1</li> <li>test2</li> <li>test3</li ...

  9. 从USB驱动器运行Windows 10

    我相信很多人和我一样.梦想着有个随身携带的U盘版操作系统.无论走到哪里,只要有电脑都可以随时运行自己配置好的操作系统.本篇博文就会一步步的教你如何从USB驱动器加载和运行Windows 10. 让我想 ...

  10. [LeetCode] Dp

    Best Time to Buy and Sell Stock 题目: Say you have an array for which the ith element is the price of ...