js重力球效果代码实例

分享一段代码实例，它利用js实现了重力球效果。

本例子中，用鼠标向下拖动小球，然后松开即可查看演示。

代码实例如下:

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>重力球效果</title>

<style>

* {

margin: 0px;

padding: 0px;

}

#div1 {

width: 50px;

height: 50px;

background: pink;

position: absolute;

cursor: pointer;

border-radius: 50px;

}

div {

width: 3px;

height: 3px;

background: black;

position: absolute;

}

</style>

<script>

window.onload = function() {

var oDiv = document.getElementById('div1');

//拖曳

var lastX = 0;

var lastY = 0;

oDiv.onmousedown = function(ev) {

var ev = ev || event;

var disX = ev.pageX - oDiv.offsetLeft;

var disY = ev.pageY - oDiv.offsetTop;

document.onmousemove = function(ev) {

var ev = ev || event;

var l = ev.pageX - disX;

var t = ev.pageY - disY;

oDiv.style.left = l + 'px';

oDiv.style.top = t + 'px';

iSpeedX = l - lastX;

iSpeedY = t - lastY;

lastX = l;

lastY = t;

}

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;

startMove();

}

clearInterval(timer);

}

var timer = null;

function startMove() {

var nowX = oDiv.offsetLeft;

var nowY = oDiv.offsetTop;

clearInterval(timer);

timer = setInterval(function() {

iSpeedY += 3

nowX += iSpeedX;

if (nowX > document.documentElement.clientWidth - oDiv.offsetWidth) {

iSpeedX *= -0.8;

nowX = document.documentElement.clientWidth - oDiv.offsetWidth;

} else if (nowX < 0) {

iSpeedX *= -0.8;

nowX = 0;

}

nowY += iSpeedY;

if (nowY > document.documentElement.clientHeight - oDiv.offsetHeight) {

iSpeedY *= -0.8;

iSpeedX *= 0.8

nowY = document.documentElement.clientHeight - oDiv.offsetHeight;

} else if (nowY < 0) {

iSpeedY *= -1;

iSpeedX *= 0.8;

nowY = 0;

}

if (Math.abs(iSpeedX) < 1) {

iSpeedX = 0;

}

if (Math.abs(iSpeedY) < 1) {

iSpeedY = 0;

}

if (iSpeedX == 0 && iSpeedY == 0 && nowY == document.documentElement.clientHeight - oDiv.offsetHeight) {

clearInterval(timer);

}

oDiv.style.left = nowX + 'px';

oDiv.style.top = nowY + 'px';

}, 30)

}

</script>

</head>

<body>

<div id='div1'></div>

</body>

</html>

js重力球效果代码实例相关推荐

python演示验证图像叠加过程_Python叠加矩形框图层2种方法及效果代码实例
本篇文章小编给大家分享一下Python叠加矩形框图层2种方法及效果代码实例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 两种方式以及效果: 方式一,使用 ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
js水平无缝滚动代码实例详解
本章节分享一段代码实例,它实现了图片无缝水平滚动效果. 这样的功能在实际应用中比较常见,感兴趣的朋友可以做一下参考. 代码如下: <!doctype html> <html> ...
动态加载的html没有js效果,JS利用html5实现loadding动态加载效果代码实例
51前端 window.οnlοad=function(){ var Loading = function (canvas, options) { this.canvas = document.get ...
php花瓣,JS实现花瓣效果代码展示
本文实例讲述了JS绘制生成花瓣效果的方法.分享给大家供大家参考.具体如下: 这里使用JS绘制生成花瓣效果,纯JS生成的图形绘制效果,想研究一下JavaScript图形绘画方面知识的,不妨参考一下这个小 ...
用java实现楼层导航_JS实现网站楼层导航效果代码实例
壹 ❀ 引言对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导航的小图片. 由于我前面也说了不打算使用JQ,所以想着用JS去实现它,实现并不难,主要得弄清滚动满足怎样 ...
css3 书页卷脚_css3实现的书本立体翻页效果代码实例
[HTML] 纯文本查看复制代码蚂蚁部落 * { padding: 0; margin: 0; } body, html { height: 100%; } body { /* perspecti ...
java ui界面美观,JavaFX实现UI美观效果代码实例
相对于Swing来说,JavaFX在UI上改善了很多,不仅可以通过FXML来排版布局界面,同时也可以通过CSS样式表来美化UI. 其实在开发JavaFX应用的时候,可以将FXML看做是HTML,这样跟 ...

js重力球效果代码实例

js重力球效果代码实例相关推荐

最新文章

热门文章