js动弹特效
<!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动弹特效的更多相关文章
- 未封装的js放大镜特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- 第五章 JS典型特效
注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...
- Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）
Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...
- js 时钟特效
时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...
- 原生JS投票特效
效果:http://hovertree.com/texiao/js/24/ 效果图: 代码如下: <!DOCTYPE html> <html lang="en"& ...
- Js文字特效—文字段逐个变色循环
自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性. <!DOCTY ...
- javascript js写特效日历
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)
1. 为啥要做这个点赞插件? praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...
- ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件（二）
1. 为啥要做这个点赞插件? praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...
随机推荐
- 如何用js实现自适应，原来只是几行代码的事(╯‵□′)╯︵┻━┻
在javascript写下如下几行: (function (doc, win, undefined) { var docEl = doc.documentElement, ...
- js中可转bool为false的值
number :0为false,其他都为true. string:""为false,其他字符串都为真,PS: " "空格为true,"false&qu ...
- 关于ImageLoader的一些东西
网络图片异步加载 其实有关图片加载存在这样一个问题,图片的下载始终是一个耗时的操作,这个时候如果把图片加载放在主线程中话的是不明智的,模拟一个这样的场景, 假如在一个listview或Recycler ...
- tp框架基础知识
作者:黄力军 index.php入口文件:作用,所有tp框架里的内容要想访问文件.都要走index.php文件他是整个程序的入口 Application代表应用程序的目录 所有写的应用程序放这里 ...
- 1257: [CQOI2007]余数之和sum
1257: [CQOI2007]余数之和sum Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 2001 Solved: 928[Submit][Sta ...
- 1692: [Usaco2007 Dec]队列变换（BZOJ1640强化版）
1692: [Usaco2007 Dec]队列变换 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 682 Solved: 280[Submit][Sta ...
- 升级后 VTE 类虚拟终端不工作
故障现象 运行 vte 终端,如 gnome terminal.sakura 等光标不出来.xterm 可以运行. 在 xterm 终端中运行 gnome terminal 出现一下错误: grant ...
- 如何快速部署国人开源的 Java 博客系统 Tale
除了闷头专研技术之外,程序员还需要不断地写作进行技术积累,写博客是其中最重要的方式之一.商业博客平台不少,但是更符合程序员背景的方案,是自己开发一个博客平台或者使用开源的博客平台. 开源的博客平台多如 ...
- String.format()的总结
JAVA字符串格式化-String.format()的使用 常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的spri ...
- PHP随机数安全
0x00 rand()函数 rand()的随机数默认最大32767,可以用于爆破这里不再举例. 0x01 mt_rand()和mt_srand()函数 mt_srand()函数用于播种,PHP 4.2 ...