js与css交互

最新推荐文章于 2024-08-18 10:54:05 发布

L081773

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量112

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/L081773/article/details/124915888

版权

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>

L081773

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js与css交互

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">首页<
复制链接

扫一扫