JS高级动画
图片跟着鼠标飞
利用了鼠标的移动事件以及元素的坐标属性。
var img = document.querySelector("img")
document.onmousemove = function(event){
var event = event || window.event
var x = event.clientX-img.offsetWidth/2
var y = event.clientY-img.offsetHeight/2
img.style.left = x+"px"
img.style.top = y+"px"
}
鼠标移动产生残影动画
var box = document.querySelector("div")
var all = document.querySelectorAll("div")
document.onmousemove = function(event){
var num = 0
var x = event.pageX;
var y = event.pageY;
setInterval(function(){
all[num].style.display = "block"
all[num].style.left = x-box.clientWidth/2+"px"
all[num].style.top = y-box.clientHeight/2+ "px"
num++
},30)
}
Tab切换动画
<style>
dl dt{
width: 100px;
height: 50px;
background-color: blueviolet;
float: left;
margin-left: 10px;
text-align: center;
line-height: 50px;
}
dt:hover{
background-color: cornflowerblue;
color: darkkhaki;
font-size: 25px;
}
dl::after{
content: "";
display: block;
clear: both;
}
div{
width: 400px;
height: 200px;
background-color: coral;
text-align: center;
line-height: 200px;
display: none;
}
</style>
</head>
<body>
<dl >
<dt>标题1</dt>
<dt>标题2</dt>
<dt>标题3</dt>
</dl>
<div >内容1</div>
<div>内容2</div>
<div>内容3</div>
</body>
</html>
<script>
var dlList = document.querySelector("dl").children
var divList = document.querySelectorAll("div")
for(let i = 0;i<dlList.length;i++){
dlList[i].onmouseenter = function(){
for(var j = 0;j<divList.length;j++){
divList[j].style.display = "none"
}
divList[i].style.display = "block"
}
}
</script>
拖曳盒子动画
var header = document.querySelector("header")
var div = document.querySelector("div")
div.onmousedown = function(){
document.onmousemove = function(event){
var event = event || window.event
var left = event.clientX - header.offsetLeft - header.clientLeft - div.offsetWidth/2
var top = event.clientY - header.offsetTop - header.clientTop-div.offsetHeight/2
if(top<=0){
top = 0
}else if(top >= header.scrollHeight-div.scrollHeight){
top = header.scrollHeight-div.scrollHeight
}
if(left<=0){
left = 0
}else if(left>= header.scrollWidth-div.scrollWidth){
left = header.scrollWidth-div.scrollWidth
}
div.style.left = left + "px"
div.style.top = top + "px"
}
}
document.onmouseup = function(){
document.onmousemove = null
}
小球触璧反弹
var header = document.querySelector("header")
var div = document.querySelector("div")
var btn1 = document.querySelector("button")//开始按钮
var btn2 = document.querySelectorAll("button")//暂停按钮
var x = 0;
var y = 0;
var Timer;
//初始方向
var addX = true;
var addY = true;
btn1.onclick = function(){
btn2[1].disabled = false
btn1.disabled = true
clearInterval(Timer)
Timer = setInterval(function(){
var xMax = header.scrollWidth - div.offsetWidth
var yMax = header.scrollHeight - div.offsetHeight
if(addX){
x++
if(x>=xMax){
addX = false
}else{
div.style.left = x+"px"
}
}else{
x--
if(x<=0){
addX = true
}else{
div.style.left = x+"px"
}
}
if(addY){
y++
if(y>=yMax){
addY = false
}else{
div.style.top = y+"px"
}
}else{
y--
if(y<=0){
addY = true
}else{
div.style.top = y+"px"
}
}
},1)
}
btn2[1].onclick = function(){
btn1.disabled = false
btn2[1].disabled = true
clearInterval(Timer)
}
秒表计时
var Timer
var num = 7200;
var hour = document.getElementById("hour")
var minutes = document.getElementById("minutes")
var second = document.getElementById("second")
var start = document.querySelector("button")
var pause = document.querySelectorAll("button")[1]
var end = document.querySelectorAll("button")[2]
start.onclick = function(){
clearInterval(Timer)
Timer = setInterval(function(){
num--
var h = add0(Math.floor( num/60/60))
var m = add0(Math.floor(num/60)%60)
var s = add0(num%60)
hour.innerHTML = h
minutes.innerHTML = m
second.innerHTML = s
},1)
start.disabled = true
}
pause.onclick = function(){
clearInterval(Timer)
start.disabled = false
}
end.onclick = function(){
start.disabled = false
clearInterval(Timer)
hour.innerHTML = "00"
minutes.innerHTML = "00"
second.innerHTML = "00"
}
function add0 (num){
return num<10?"0"+num:num
}
放大镜
<style>
* {
margin: 0;
padding: 0;
}
header,
footer {
float: left;
border: 1px solid red;
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
}
header img {
height: 500px;
width: 500px;
}
footer img {
height: 1100px;
width: 1100px;
}
#mask {
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
background-color: rgba(1, 1, 1, 0.4);
}
</style>
</head>
<body>
<header>
<img id="smallImg" src="./img/2.jpg" alt="" />
<div id="mask"></div>
</header>
<footer>
<img id="bigImg" src="./img/2.jpg" alt="" />
</footer>
</body>
</html>
<script>
var header = document.querySelector("header")
var footer = document.querySelector("footer")
var mask = document.getElementById("mask")
header.onmousemove = function(event){
var event = event || window.event
var maskLeft = event.clientX-mask.clientWidth/2-header.offsetLeft-header.clientLeft
var maskTop = event.clientY-mask.clientHeight/2-header.offsetTop-header.clientTop
var maxLeft = header.offsetWidth-mask.offsetWidth
var maxTop = header.offsetHeight-mask.offsetHeight
if(maskLeft>maxLeft){
maskLeft = maxLeft
}
if(maskLeft<0){
maskLeft = 0
}
if(maskTop>maxLeft){
maskTop = maxTop
}
if(maskTop<0){
maskTop = 0
}
mask.style.left = maskLeft+"px"
mask.style.top = maskTop+"px"
var scrollLeft = maskLeft*2
var scrollTop = maskTop*2
footer.scrollLeft = scrollLeft
footer.scrollTop = scrollTop
}
返回顶部
var img = document.querySelector("img")
var Timer
img.onclick = function(){
clearInterval(Timer)
Timer = setInterval(function(){
document.documentElement.scrollTop--
document.body.scrollTop--
console.log(document.documentElement.scrollTop--)
},1)
}
window.onscroll = function(event){
var event = event || window.event
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if(scrollTop>100){
img.style.display = "block"
}
if(scrollTop<=0){
clearInterval(Timer)
img.style.display = "none"
}
}
浙公网安备 33010602011771号