js实现天猫导航效果与时钟效果

最新推荐文章于 2021-09-30 08:42:50 发布

阡陌路人

最新推荐文章于 2021-09-30 08:42:50 发布

阅读量546

点赞数

分类专栏： js特效篇文章标签： JavaScript 小例子天猫导航效果时钟

本文链接：https://blog.csdn.net/Iwokei/article/details/102765727

版权

本文通过JavaScript详细介绍了如何实现天猫风格的导航栏效果，当鼠标移动时，导航元素跟随移动，并在点击后保持高亮。此外，还展示了如何创建一个与真实时钟同步的数字时钟。代码实现简洁明了，适合初级JavaScript开发者学习。

摘要由CSDN通过智能技术生成

js实现天猫导航效果与时钟效果

分享俩个js小例子。

一，天猫导航栏

效果：鼠标移动时，红色的猫会跟着移动，点击后会停留在点击区域。
在这里插入图片描述

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				
			}
			body{
				background-color: paleturquoise;
			}
			#nav{
				width: 900px;
				height: 63px;
				background: url('../img/tm2.png') no-repeat right;
				color: black;
				border-radius: 5px;
				position: relative;
                margin: 100px auto;
                
			}
			#nav ul{
				position: relative;
			}
			#n