js如何让弹窗碰到边缘反弹

JavaScript020

js如何让弹窗碰到边缘反弹,第1张

<!DOCTYPE HTML>

<html>

<head>

<meta charset=utf-8 />

<title>UFO来了</title>

<script src="jQuery/js/jquery-1.11.3.min.js"></script>

<script>

$(function() {

var i = j = 10

var e = $("#target")

var win = $(window)

function intern() {

var width = e.width()

var height = e.height()

var left = parseInt(e.css("left"))

var top = parseInt(e.css("top"))

var windowWidth = win.width()

var windowHeight = win.height()

if (windowWidth - width <(left + i)) {

i = -i

} else if ((left + i) <0) {

i = -i

}

if (windowHeight - height <(top + j)) {

j = -j

帮你改了一下，能跑起来了。嗯.......你这个有一些语法问题和拼写不仔细的地方，估计太着急，有些粗心了~

<!DOCTYPE html>

<html>

<head>

<title>canvas</title>

<style>

*{

padding: 0

margin: 0

}

#container{

height: 80vh

width: 80vw

margin-top: 10vh

margin-left: 10vw

border: 1px solid #aaff66

}

</style>

</head>

<body>

<div id="container">

<canvas id="canvas"></canvas>

</div>

</body>

<script type="text/javascript">

window.onload = function() {

var ctx = document.getElementById('canvas').getContext('2d')

var circle = function(x, y, radius, fillCircle) {

ctx.beginPath()

ctx.arc(x, y, radius, 0, Math.PI * 2, false)

ctx.closePath()

ctx.fillStyle="green"

if (fillCircle) {

ctx.fill()

} else {

ctx.stroke()

}

}

var width=canvas.width = document.getElementById('container').offsetWidth

var height=canvas.height = document.getElementById('container').offsetHeight

var Ball=function(){

this.x=width/2

this.y=height/2

this.xSpeed = 5

this.ySpeed=0

}

Ball.prototype.move=function(){

this.x+=this.xSpeed

this.y+=this.ySpeed

if(this.x<0){

this.x=width

}else if(this.x>width){

this.x=0

}else if(this.y<0){

this.y=height

}else if(this.y>height){

this.y=0

}

}

Ball.prototype.draw=function(){

circle(this.x,this.y,10,true)

}

var ball= new Ball()

setInterval(function(){

ctx.clearRect(0,0,width,height)

ball.draw()

ball.move()

},30)

}

</script>

</html>