利用HTML、css、JavaScript制作网址卡

最新推荐文章于 2023-10-17 16:15:31 发布

一个想要翻身的咸鱼*^*

最新推荐文章于 2023-10-17 16:15:31 发布

阅读量286

点赞数

分类专栏： HTML前端文章标签： javascript css html Powered by 金山文档

本文链接：https://blog.csdn.net/qqqddd_yyqx/article/details/129581514

版权

HTML前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文章展示了如何使用HTML、CSS和JavaScript（jQuery库）来创建一个交互效果，当鼠标移到标题上时，标题下方的板块会下滑显示隐藏的内容。通过修改元素的样式和显示状态，实现了这一动态过渡效果。

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

当鼠标移动到标题上时，标题下面的板块会下滑出现另一个隐藏的板块。效果如下：

代码：

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网址卡</title>
<link rel="stylesheet" type="text/css" href="city_link.css"/>
<script type="text/javascript" src="script/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="script/city_link.js"></script>
</head>
<body>
<ul id="an" class="nav">
<li id="an1" value="1"><a href="">AAAAAAA</a></li>
<li id="an2" value="2"><a href="">BBBBBBB</a></li>
<li id="an3" value="3"><a href="">CCCCCCC</a></li>
<li id="an4" value="4"><a href="">DDDDDDD</a></li>
</ul>
<div id="xx">
<div class="bk" id="x1" value="1"></div>
<div class="bk" id="x2" value="2"></div>
<div class="bk" id="x3" value="3"></div>
<div class="bk" id="x4" value="4"></div>
<footer id="next_b"></footer>
</div>
</body>
</html>

@charset"utf-8";
/* CSS Document */
*{padding:0px;
margin:0auto;}
a{
    text-decoration:none;
    color:#333;}
.nav{
    overflow:hidden;
    width:800px;
    display:flex;
    height:30px;}
.nav>li{
    float:left;
    flex:1;
    text-align:center;
    list-style:none;
    line-height:30px;
    background:#ddd;
    }
#an1{
    background:#f60;
    }

#xx{
    width:800px;
    position:relative;}
.bk{
    width:800px;
    height:200px;}

#x1{
    background:#FC0;
    display:none;
    }
#x2{
    background: #F30;
    display:none;
    }
#x3{
    background: #6C0;
    display:none;
    }
#x4{
    background: #6CF;
    display:none;
    }

#next_b{
    width:800px;
    height:200px;
    background: #ccc;
    position:absolute;
    top:0px;
    transition:0.5s;
    z-index:100;
    }

JS代码

// JavaScript Document
vark=0;
$(document).ready(function(){
    jq_nav();
    });
functionjq_nav(){
    $("#an>li").hover(  
    function(){ 
        k=$(this).attr("value");
        $("#xx>div").hide();
        $("#an>li").css("background","#ddd")    
$("#an"+k).css("background","#f60");    
    $("#x"+k).show();
    $("#next_b").css("top","200px");
    event.preventDefault();         
},
function(){}
)

$("#xx>div").hover( 
function(){},
function(){ 
    $("#xx>div").hide();
    $("#an>li").css("background","#ddd")
    $("#next_b").css("top","0px");
    event.preventDefault();     
}
)
};