1、使用style属性制作菜单特效
<style type="text/css">
ul {
list-style: none;
}
ul>li {
width: 50px;
height: 20px;
float: left;
background-color: #414141;
}
</style>
</head>
<body>
<ul>
<li style="#fff">首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
<script type="text/javascript">
var li = document.getElementsByTagName("li");
console.log(li)
for (var i = 0; i < li.length; i++) {
li[i].onmouseover = function() {
this.style.backgroundColor = "#00aaff"
}
li[i].onmouseout = function() {
this.style.backgroundColor = "#414141"
}
}
</script>
2、使用className属性制作菜单特效
li[i].onmouseover = function() {
this.className = "over"
}
li[i].onmouseout = function() {
this.className = "out"
}
3、使用scrollTop制作随鼠标滚动的广告图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100%;
height: 150px;
margin-bottom: 15px;
background-color: #b0b0ff;
}
#red {
background-color: #2979FF;
}
body {
height: 3000px;
}
.uptop {
position: fixed;
right: 10px;
width: 50px;
height: 50px;
z-index: 99;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
background-color: aqua;
}
.uptop img {
width: 50%;
cursor: pointer;
margin-left: 25%;
margin-top: 25%;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="red"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="uptop" id="uptop">
<img src="../img/icon-r.png" id="to-top">
</div>
<script>
var divHx = document.getElementById("red");
//div在页面的占位高,div到body的距离
var topD = divHx.offsetTop;
//页面滚动
window.onscroll = function() {
//获取页面的滚动距离
var scrollHeight = document.documentElement.scrollTop;
//滚动到一定位置 div固定到顶部
if (topD < scrollHeight) {
divHx.style.position = "fixed";
divHx.style.top = 0;
} else {
divHx.style.position = "relative";
}
//返回顶部
var t = document.documentElement.scrollTop; //获取距离页面顶部的距离
var uptop = document.getElementById("uptop"); //获取div元素
if (t >=600) { //当距离顶部超过600px时
uptop.style.bottom = 60 + 'px'; //使div距离底部30px,也就是向上出现
} else { //如果距离顶部小于600px
uptop.style.bottom = -180 + 'px'; //使div向下隐藏
}
var top = document.getElementById("to-top"); //获取图片元素
var timer;
top.onclick = function() { //点击图片时触发点击事件
timer = setInterval(function() { //设置一个计时器
var ct = document.documentElement.scrollTop; //获取距离顶部的距离
ct -= 10;
if (ct > 0) { //如果与顶部的距离大于零
window.scrollTo(0, ct); //向上移动10px
} else { //如果距离小于等于零
window.scrollTo(0, 0); //移动到顶部
clearInterval(timer); //清除计时器
}
}, 10); //隔10ms执行一次前面的function,展现一种平滑滑动效果
}
}
</script>
</body>
</html>