<!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. path和classpath的用途

    1 path很明显是unix shell的环境变量,比如bash shell,输入一个命令,它会先去path指定的目录下查找是不是有该命令的可执行文件. 2 -classpath 只是用在下面这种不发 ...

  2. unity Editor的使用

    1.首先定义一个需要控制数值的类,类中定义若干个变量 using UnityEngine;using System.Collections; using UnityEngine; using Syst ...

  3. Unity安装问题

    在VS2012中,使用NuGet安装Unity.MVC4的时候,提示以下错误: 'Unity' already has a dependency defined for 'CommonServiceL ...

  4. 原生javascript满屏上下滚动

    使用到一个滚动事件:onmousewheel  (不支持火狐浏览器)   /  DOMMouseScroll  (支持火狐浏览器):这篇代码支持ie8以上版本,Firefox,Safari,Chrom ...

  5. ARP攻击

    ARP攻击,是针对以太网地址解析协议(ARP)的一种攻击技术,就是通过伪造IP地址和MAC地址实现ARP欺骗,能够在网络中产生大量的ARP通信量使网络阻塞.此种攻击可让攻击者取得局域网上的数据封包甚至 ...

  6. 初探Lambda表达式/Java多核编程【4】Lambda变量捕获

    这周开学,上了两天感觉课好多,学校现在还停水,宿舍网络也还没通,简直爆炸,感觉能静下心看书的时间越来越少了...寒假还有些看过书之后的存货,现在写一点发出来.加上假期两个月左右都过去了书才看了1/7都 ...

  7. 第十八篇 js高级知识---作用域链

    一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后.下面开始说说js的方面的东西,由于自己 ...

  8. 【开源.NET】轻量级内容管理框架Grissom.CMS（第三篇解析配置文件和数据以转换成 sql）

    该篇是 Grissom.CMS 框架系列文章的第三篇, 主要介绍框架用到的核心库 EasyJsonToSql, 把标准的配置文件和数据结构解析成可执行的 sql. 该框架能实现自动化增删改查得益于 E ...

  9. Array对象方法属性总结

    属性主要有三个:constructor;length;prototype; constructor(英文意思:构造器):返回对创建此对象的数组函数的引用.例如:var arr=new Array(); ...

  10. 1342: [Baltic2007]Sound静音问题

    1342: [Baltic2007]Sound静音问题 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 710  Solved: 307[Submit][ ...