当前位置：首页 > news >正文

微舍微网站怎么做/网络营销主要是学什么的

news 2025/7/1 8:20:00

微舍微网站怎么做,网络营销主要是学什么的,php 网站下载,罗田县建设局网站思路设置一个单独的选中框, 通过在animate中设置其left值,造成其从当前选项往目标选项移动的动画效果, 设置其层级,确保其处于选项内容的下方底部内容随顶部选项卡改变代码 <script src"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></s…

思路

设置一个单独的选中框,
通过在animate中设置其left值,造成其从当前选项往目标选项移动的动画效果,
设置其层级,确保其处于选项内容的下方
底部内容随顶部选项卡改变

代码

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>* {padding: 0;margin: 0;}li { list-style-type: none; } .header { position: relative; display: flex;background: pink;width: 500px;}p {position: absolute; left: 0;top: 0; width: 100px;height: 30px; border-bottom: 5px solid blue;background: skyblue;}.header li { width: 96px; height: 26px;text-align: center;line-height: 30px;border: 2px solid black;z-index: 100;}.box li { width: 500px;height: 200px;background: yellow;display: none;}.box .active {display: block;}
</style><body><div class="header"><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li><p></p></div><div class="box"><li class="active">111</li><li>222</li><li>333</li><li>444</li><li>555</li></div>
</body>
<script>// 鼠标移动,选中框往目标li移动$(".header>li").mousemove(function() {$("p").stop().animate({left: $(this).index() * 100});// 内容框跟着改变$(".box>li").eq($(this).index()).addClass("active").siblings().removeClass("active");});
</script>