<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery网站Tab下拉菜单特效 - 更多源码WW.96flw.COM</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;}
.header{
position: relative;
min-height: 37vw;
background: url('./images/banner.jpg');
color: #eee;
}
.headerTitle{
height: 50px;
line-height: 50px;
}
.headerTitle ul{
padding-left: 250px;
}
.headerTitle li{
float: left;
padding:0 40px;
cursor: pointer;
}
.headerTitle li:hover,.headerTitle li.on{
background-color: #42adf2;
}
.content{
background-color: #eee;
height: 150px;
text-align: center; padding-top:15px; font-size: 16px;
}
a.smallCell{
text-decoration: none;
}
</style>
<link rel="stylesheet" href="./css/new.css">
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div class="headerTitle dropDownArea">
<div style="float: left; height: 50px; line-height: 50px;">
<img src="./images/logo.png" width="50" style="float: left; margin-right: 10px;"> 某某科技公司
</div>
<ul>
<li>首页</li>
<li>产品展示</li>
<li id="btn">技术方向</li>
<li>简介</li>
</ul>
<div id="box" class="showDropDownArea">
<div class="contentArea" >
<div class="leftSelect" >
<div class="downCell downCell1" data-index="1">
<div class="cnName" >技术人力</div>
<div class="enName" >Technical manpower</div>
</div>
<div class="downCell downCell2" data-index="2">
<div class="cnName" >开发</div>
<div class="enName" >Industry Solutions</div>
</div>
<div class="downCell downCell3" data-index="3">
<div class="cnName" >更多</div>
<div class="enName" >More</div>
</div>
</div>
<div class="rightShow" >
<div class="rightBigCell rightIndex1" data-index="1"><a class="smallCell"
href="#">
<div class="cellLeftIcon" ><img src="./images/job@2x.png" alt=""
></div>
<div class="cellRightArea" >
<div class="cellRightName" >兼职招聘</div>
<div class="cellRightDesc" >程序员招聘、找兼职！</div>
</div>
</a><a class="smallCell" href="#">
<div class="cellLeftIcon" ><img src="./images/cloud@2x.png"
alt="" ></div>
<div class="cellRightArea" >
<div class="cellRightName" >云端工作</div>
<div class="cellRightDesc" >按月雇佣程序员</div>
</div>
</a></div>
<div class="rightBigCell rightIndex2" data-index="2"><a class="smallCell"
href="#">
<div class="cellLeftIcon" ><img src="./images/project@2x.png"
alt="" ></div>
<div class="cellRightArea" >
<div class="cellRightName" >项目开发</div>
<div class="cellRightDesc" >一站式软件开发</div>
</div>
</a><a class="smallCell" href="#">
<div class="cellLeftIcon" ><img src="./images/kaifain@2x.png"
alt="" ></div>
<div class="cellRightArea" >
<div class="cellRightName" >解决方案</div>
<div class="cellRightDesc" >全行业立体化解决方案平台</div>
</div>
</a></div>
<div class="rightBigCell rightIndex3" data-index="3"><a class="smallCell"
href="#">
<div class="cellLeftIcon" ><img src="./images/jinzhi@2x.png"
alt="" ></div>
<div class="cellRightArea" >
<div class="cellRightName" >进制数据</div>
<div class="cellRightDesc" >数据API交易平台</div>
</div>
</a><a class="smallCell" href="#">
<div class="cellLeftIcon" ><img src="./images/jishuin@2x.png"
alt="" ></div>
<div class="cellRightArea" >
<div class="cellRightName" >技术圈</div>
<div class="cellRightDesc" >最新行业动态</div>
</div>
</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
主要内容
</div>
<script>
$().ready(function(){
$('.headerTitle li').hover(function(){
$('.headerTitle li').removeClass('on')
$(this).addClass('on')
})
$('.downCell').hover(function(){
$('.downCell').removeClass('choosed')
$(this).addClass('choosed')
console.log($(this).index())
$('.rightBigCell').removeClass('ok')
$('.rightIndex'+($(this).index()+1)).addClass('ok')
})
})
window.onload = function(){
let btn = document.getElementById('btn');
let box = document.getElementById('box');
btn.onmouseover=(e)=>{
box.style.display = 'block';
document.onmousemove = function(e){
let btnObj = btn.getBoundingClientRect();
let boxObj = box.getBoundingClientRect();
let mouseX = e.clientX;
let mouseY = e.clientY;
if(mouseX < btnObj.left && mouseY < boxObj.top){
box.style.display = 'none';
}
if(mouseX > btnObj.right && mouseY < boxObj.top){
box.style.display = 'none';
}
if(mouseY < btnObj.top){
box.style.display = 'none';
}
if(mouseY > btnObj.top && mouseY < btnObj.bottom && mouseX > btnObj.left && mouseX < btnObj.right){
box.style.display = 'block';
}
}
}
box.onmouseleave=()=>{
box.style.display = 'none';
$('.headerTitle li').removeClass('on')
}
}
</script>
</body>
</html>
jQuery网站Tab下拉菜单特效.zip
版权申诉
98 浏览量
2023-10-09
23:51:51
上传
评论
收藏 57KB ZIP 举报
jQuery网站Tab下拉菜单特效.zip （11个子文件） 
jiaoben8113 js 
jquery.min.js 91KB css new.css 4KB
index.html 7KB images 
jinzhi@2x.png 2KB kaifain@2x.png 3KB
banner.jpg 19KB logo.png 3KB job@2x.png 2KB jishuin@2x.png 2KB cloud@2x.png 2KB project@2x.png 1KB资源评论
