css、html
<style> *{margin: 0; padding: 0;} ul {list-style:none;} body { background-color: #000; } .nav { width: 800px; height: 42px; 什么的国歌 全国计算机二级成绩查询入口background:url() no-repeat right center #fff; margin: 100px auto; border-radius: 5px; position: relative; } .cloud { width: 83px; height: 42px; position: absolute; top: 0; left: 0; /* background: url(yun.jpg) no-repeat; */background:red; 辛亥革命性质 } .nav ul { position: absolute; top: 0; left: 0; } .nav li { float: left; width: 88px; height: 42px; line-height: 42px; text-align: center; color: #000; cursor: pointer; } </style><body><div class="nav" id="nav"> <span class="cloud" id="cloud"></span> <ul id="box"> <li>首页新闻</li> <li>齐天大圣</li> <li>九耀星君</li> <li>企业文化</li> <li>招聘信息</li> <li>公司简介</li> <li>上官飞燕</li> <li>司马玉龙</li> </ul></div></body>js
<script>var list = document.getelementsbytagname("li");var cloud = document.getelementbyid("cloud");var timer = null;function move(obj,target){clearinterval(timer);timer = tinterval(function(){var speed = (target - o物理高中公式bj.offtleft) / 10;speed = speed > 0 ? math.ceil(speed) : math.floor(speed);if(target == obj.offtleft){clearinterval(timer);return}obj.style.left = obj.offtleft + speed + "px";},30)}var cur = 0;//云初始的位置for(var i = 0; i < list.length; i++){list[i].onmouover = function(){m端午节的诗词ove(cloud,this.offtleft);}list[i].onmouout = function(){move(cloud,cur);}list[i].onclick = function(){//改变云彩的初始位置；cur = this.offtleft;}}</script>
本文发布于:2023-04-03 09:26:27，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/347af0625c87c0a997c9f7d71be2746a.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：标题跟随效果.doc
本文 PDF 下载地址：标题跟随效果.pdf
| 留言与评论（共有 0 条评论） |
