javascript的五个动画例子 1.图片跟着鼠标飞动画 2.移动产生絮条动画 3.tab切换动画 4.拖拽盒子动画 5.碰壁反弹动画

本文链接：https://blog.csdn.net/m0_65719290/article/details/128166557

1.图片跟着鼠标飞动画

style设置样式

<style>

body{

height: 100vh;

position: relative;

}

img{

position: absolute;

left: 0px;

top: 0px;

display: none;

}

</style>

body内和JavaScript设置的代码

<body>

var div=document.querySelector("body")

var img=document.querySelector("img")

div.οnmοusemοve=function(){

var event=event || window.event

img.style.display="block"

img.style.left=event.clientX-img.clientWidth/2+"px"

img.style.top=event.clientY-img.clientHeight/2+"px"

}

</script>

</body>

2.移动产生絮条动画

style设置样式

<style>

ul{

list-style: none;

}

li{

width: 40px;

height: 40px;

border-radius: 20px;

background-color: greenyellow;

position: absolute;

display: none;

}

</style>

body内和JavaScript设置的代码

<ul>

</ul>

function random(m,n){

return Math.floor(Math.random()*(n-m+1)+m)

}

function get(){

return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")"

}

var li=document.querySelectorAll("li")

document.οnmοusemοve=function(){

var event=event || window.event

var num=0

var djs=setInterval(function(){

li[num].style.display="block"

li[num].style.backgroundColor=get()

li[num].style.left=event.clientX-li[0].clientWidth/2+"px"

li[num].style.top=event.clientY-li[0].clientWidth/2+"px"

num++

if(num>=li.length){

clearInterval(djs)

}

},80)

}

</script>

</body>

3.tab切换动画

style设置样式

<style>

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

ul>li{

float: left;

width: 150px;

background-color: red;

margin-left: 10px;

text-align: center;

}

ul::after{

content: '';

display: block;

clear: both;

}

dl>dt{

width: 470px;

height: 300px;

margin-top: 10px;

margin-left: 10px;

background-color: greenyellow;

display: none;

}

.xian{

display: block;

}

</style>

body内和JavaScript设置的代码

<body>

<ul>

</ul>

<dl>

</dl>

var li=document.querySelectorAll("li")

var dt=document.querySelectorAll("dt")

var arr=["pink","green","yellow"]

for(var i=0;i<li.length;i++){

li[i].οnclick=function(){

for(var j=0;j<dt.length;j++){

if(li[j]==this){

dt[j].className="xian"

dt[j].style.backgroundColor=arr[j]

li[j].style.backgroundColor="blue"

}else{

dt[j].className=""

li[j].style.backgroundColor=""

}

</script>

</body>

4.拖拽盒子动画

style设置样式

<style>

margin: 0;

padding: 0;

}

#box{

width: 1000px;

height: 600px;

margin: 0 auto;

border: 10px solid red;

position: relative;

}

#inner{

width: 50px;

height: 50px;

background-color: blue;

position: absolute;

left: 0px;

top: 0px;

}

</style>

body内和JavaScript设置的代码

<body>

</div>

var inner=document.getElementById("inner")

var box=document.getElementById("box")

inner.οnmοusedοwn=function(){

inner.οnmοusemοve=function(){

var event=event || window.event

inner.style.left=event.pageX-box.offsetLeft-box.clientLeft-

inner.offsetWidth/2+"px"

inner.style.top=event.pageY-box.offsetTop-box.clientTop-

inner.offsetHeight/2+"px"

var Xma=box.clientWidth-inner.clientWidth;

var Yma=box.clientHeight-inner.clientHeight;

var left=event.pageX-box.offsetLeft-box.clientLeft-inner.offsetWidth/2

var top = event.pageY - box.offsetTop - box.clientTop -inner.offsetHeight/2

if(left<0){

left=0

}else if(left>Xma){

left=Xma

}

if(top<0){

top = 0

}else if(top>Yma){

top = Yma

}

inner.style.left = left + 'px'

inner.style.top = top +"px"

}

inner.οnmοuseup=function(){

inner.οnmοusemοve=null

}

</script>

</body>

5.碰壁反弹动画

style设置样式

<style>

#box {

width: 1000px;

margin: auto;

border: 10px solid red;

height: 500px;

position: relative;

}

#inner {

width: 50px;

height: 50px;

background-color: blue;

position: absolute;

border-radius: 50%;

left: 0;

top: 0;

}

</style>

body内和JavaScript设置的代码

<body>

</div>

</body>

</html>

var box = document.querySelector("#box")

var inner = document.querySelector("#inner")

var start = document.querySelector("#start")

var stop = document.querySelector("#stop")

var over = document.querySelector("#over")

var myl = 0;

var myt = 0;

var moveX = true;

var moveY = true;

var timer = null

start.onclick = function(){

start.disabled = true

timer = setInterval(function(){

var Xma = box.clientWidth - inner.clientWidth;

var Yma = box.clientHeight - inner.clientHeight;

// x轴

if(moveX){

myl++;

if(myl>=Xma){

moveX = false

}

}else{

myl--;

if(myl<=0){

moveX = true

}

// Y轴

if(moveY){

myt++;

if(myt>=Yma){

moveY = false

}

}else{

myt--;

if(myt<=0){

moveY = true

}

inner.style.left = myl + "px";

inner.style.top = myt + "px";

},10)

}

stop.onclick = function(){

clearInterval(timer)

start.disabled = false

}

over.onclick = function(){

clearInterval(timer)

start.disabled = false

myl = 0

myt = 0

inner.style.left = myl + "px";

inner.style.top = myt + "px";

}

</script>