<!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. BZOJ 1198: [HNOI2006]军机调度（搜索）

    直接暴搜就行了= = CODE: #include<cstdio> #include<iostream> #include<cstring> #include< ...

  2. ionic接入广告

    一.获取Admob phonegap 广告插件(cordova 广告平台插件) 在cordova 和phonegap等html5手机应用里面展示Admob,百度移动联盟,广点通广告需要Cordova ...

  3. 分布式配置管理--百度disconf搭建过程和详细使用

    先说官方文档:http://disconf.readthedocs.io/zh_CN/latest/index.html 不管是否要根据官方文档来搭建disconf,都应该看一下这一份文档.精炼清晰地 ...

  4. html5 新特性

    1.querySelector 返回文档中匹配指定css选择器的一个元素. 注意:uerySelector() 方法仅仅返回匹配指定选择器的第一个元素 如果你需要返回所有的元素,请使用 querySe ...

  5. SpringBoot + SwaggerUI

    后台写接口,由于要提供接口文档给前台使用,所有研究了一下swagger,看到网上有篇文章写得不错,就直接拿过来了. swagger用于定义API文档. 好处: 前后端分离开发 API文档非常明确 测试 ...

  6. 上传图片，多图上传，预览功能，js原生无依赖

    最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库 ...

  7. 用PHP ping 一个 IP

    最近要做一个 测试IP列表 是否能连通的功能.大家都知道我们一般用 ping 命令就可以看到IP端口可不可以连通.那在程序里要怎么做呢? 我们在网上找到很多都是使用  exec("ping ...

  8. 《深入理解Java虚拟机》学习笔记之字节码执行引擎

    Java虚拟机的执行引擎不管是解释执行还是编译执行,根据概念模型都具有统一的外观:输入的是字节码文件,处理过程是字节码解析的等效过程,输出的是执行结果. 运行时栈帧结构 栈帧(Stack Frame) ...

  9. 1755: [Usaco2005 qua]Bank Interest

    1755: [Usaco2005 qua]Bank Interest Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 187  Solved: 162[Su ...

  10. a中的类型转换

    自动类型转换 当然自动类型转换是需要满足特定的条件的: 1.  目标类型能与源类型兼容,如 double 型兼容 int 型,但是 char 型不能兼容 int 型. 2.  目标类型大于源类型,如 ...