<!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. unity3d为什么会有三种脚本语言？

    相信这个问题多多少少会令许多初学者感到困惑,因为他们不知道应该选择哪种语言好,但是都会从以下几个方面进行考虑: 1.学习成本.哪门语言让我快速上手. 2.文档帮助.说白了就是出了问题,有没有人能解决. ...

  2. WebSocket浅析(一)：实现群聊功能

    首先WebSocket打破了传统的web请求响应模式,实现管道式的实时通信,并且可以持续连接. 相对于传统 HTTP 每次请求-应答都需要客户端与服务端建立连接的模式,WebSocket 是类似 So ...

  3. 第三方库FMDB的使用

    1.FMDB简介 什么是FMDB FMDB是iOS平台的SQLite数据库框架,FMDB以OC的方式封装了SQLite的C语言API. 为什么使用FMDB 使用起来更加面向对象,省去了很多麻烦.冗余的 ...

  4. php的empty()和isset()用法

    共同点: 1.都可以判定一个变量是否为空: 2.都返回boolean类型,即true或false. 区别: 1.isset()用来检测变量是否设置,只能用于变量,因为传递任何其它参数都将造成解析错误. ...

  5. 探究CSS中的包裹性

    之前一直都知道css中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来. 什么是包裹性? 包裹性就是父元素的宽度会收缩到和内部元素宽度一样. 哪些元素具有 ...

  6. 用OC和Swift一起说说二叉树

    前言:    一:在计算机科学中,二叉树是每个节点最多有两个子树的树结构.通常子树被称作"左子树"(left subtree)和"右子树"(right subt ...

  7. Server push（服务器推送技术）

    一.服务器推送技术Server Push详解:        推送技术Server Push的基础思想是将浏览器主动查询信息改为服务器主动发送信息.服务器发送一批数据,浏览器显示这些数据,同时保证与服 ...

  8. table标签中thead、tbody、tfoot的作用

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...

  9. spring提供的线程池

    SPRING中的线程池ThreadPoolTaskExecutor 分类: JAVA Spring2013-07-12 10:36 14896人阅读 评论(9) 收藏 举报 Spring线程池多线程 ...

  10. iOS 调试心得

    修复 bug 占用我们日常开发的大部分时间,熟练的使用调试工具可以给我们节约大部分的时间. LLDB 的常用命令 expression expresion 是一个非常常用的命令,我们可以通过这个命令来 ...