移动产生絮条动画
利用了鼠标的移动事件以及元素的坐标属性以及元素的显示与隐藏。
window.onload = function(){
//所有的盒子都获取到
var box = document.getElementsByTagName("div");
//给文档绑定拖动事件
document.onmousemove = function(event){
var j= 0;
//给一个计时器
var timer = setInterval(function(){
j++;
//20毫秒显示一个box,然后随着光标移动(给盒子定位)
//盒子的left和top值相当于光标的横纵坐标
box[j].style.display = "block";
box[j].style.left = (event.clientX-box[j].offsetWidth/2)+"px";
box[j].style.top = (event.clientY-box[j].offsetHeight/2)+"px";
if(j==box[j].length){
clearInterval(timer);
}
},50)
}
}
图片跟着鼠标飞动画
利用了鼠标的移动事件以及元素的坐标属性。
var imgObj = document.querySelector("#imgObj");
// 鼠标移动事件
document.onmousemove = function (event) {
var event = event || window.event;
var leftObj = event.clientX - imgObj.clientWidth / 2;
var topObj = event.clientY - imgObj.clientHeight / 2
imgObj.style.left = leftObj + "px";
imgObj.style.top = topObj + "px";
}
返回顶部
代码:
<script>
var img1 = document.getElementById("img1");
window.onscroll = function () {
// 浏览器的scrollTop
var top = document.body.scrollTop || document.documentElement.scrollTop;
console.log(top);
// 文档的可视高度
if (top >= document.documentElement.clientHeight) {
img1.style.display = "block";
} else {
img1.style.display = "none";
}
}
img1.onclick = function () {
var timer = setInterval(function () {
var step = 100;
document.body.scrollTop -= step;
document.documentElement.scrollTop -= step;
if (document.body.scrollTop || document.documentElement.scrollTop <= 0) {
clearInterval(timer);
}
}, 50)
}
</script>