<!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. DEV下拉框LookUpEdit使用技巧

    1,首先设置LookUpEdit要绑定的列,并配置隐藏列 2,设置下拉框是否显示表头,底部 3.设置下拉框宽度 4.设置显示的列与值列 5.设置初始值 6,绑定数据 7,取值  

  2. Javascript基本语句

    1.单行语句是大家用的最多的,下面讲讲复合语句的用法. 用一对花括号括起来,处理的时候,可以用单句来对待.这样做的好处是避免复合语句中语句互相干扰执行. 语法如下: { var x=1111: var ...

  3. Jsp——response对象

    <%@ page language="java" contentType="text/html; charset=UTF-8" import=" ...

  4. html 5 video

    正项目中, 20秒 2mb左右在速度上可以接受, 但是最总怎样剪都不可以被游览器读取, 因为H.264 和一些我不清楚的. 为了简单解决这小问题, 请使用 http://easyhtml5video. ...

  5. 过程 : 系统语言和jobPost 语言版本

    在前台,用户选择语言会是checkbox list,可以选择多个.如果英文是主要语言,那么 ·选择英文而已,jobPosts 只显示英文版本 ·如果jobPost有英文和中文,只显示英文 ·如果job ...

  6. 了解 : EDM

    EDM是 Entity Data Meta,首先先了解什么是Entity. Entity 它是一个框架,在C#使用,方便调用SQL data的,和Odata 调用有关.细节我不清楚! EDM 基本是表 ...

  7. react配置之浅谈

    //复习 1 .块级作用域 let 和const 2 变量结构 默认值 一般往后写 rest参数(了解) 箭头函数(重要)(x,y)=>{} 3.map 存储高级键值对 4.set集合(去重) ...

  8. ci公共模型类

    我们都知道,操作数据库的方法都写在模型中.但是一般情况下,一张表往往至少对应4个操作,也就是所谓crud.那么如果20张表,所对应的模型方法,就达到了80个,重复的操作显然这已经是一个体力活儿. 那么 ...

  9. ADO.net参数化查询陷阱

    避免SQL漏洞注入攻击,往往采用的是参数化查询!然而在使用参数化查询中,往往为了方便就直接通过构造方法来进行数据的初始化了,然而这样就引发一个这样的问题,当参数值为0时,就出现参数为空的情况了. 一. ...

  10. java中的ConcurrentModificationException异常

    先看这样一段代码: List<String> list = new ArrayList<String>(); list.add("1"); list.add ...