title: 下拉二級菜單/css動畫/tab欄切換/三級聯動
date: 2019-11-08 16:57:03
tags: jquery
categories: 前端
動態下拉二級菜單
首先html代碼
<ul>
<li class="liOne"><a href="">我的主頁</a>
<ul class="ulTwo">
<li><a href="">第一主頁</a></li>
<li><a href="">第二主頁</a></li>
<li><a href="">第三主頁</a></li>
</ul>
</li>
<li id="second" class="liOne"><a href="">我的空間</a>
<ul class="ulTwo">
<li><a href="">第一空間</a></li>
<li><a href="">第二空間</a></li>
<li><a href="">第三空間</a></li>
</ul>
</li>
<li id="third" class="liOne"><a href="">我的主題</a>
<ul class="ulTwo">
<li><a href="">第一主題</a></li>
<li><a href="">第二主題</a></li>
<li><a href="">第三主題</a></li>
</ul>
</li>
</ul>
css代碼
.liOne{
float: left;
margin-left: 30px;
list-style: none;
}
.ulTwo{
display: none;
padding-left: 0px;
}
.ulTwo>li{
list-style: none;
}
jquery代碼
$(function(){
$("li:first").mouseenter(function(event){
if($("li:first ul").is(':animated')){
return;
}
$("li:first ul").slideDown("fast");
});
$("li:first").mouseleave(function(){
$("li:first ul").slideUp("fast");
});
$("#second").mouseenter(function(){
if($("#second ul").is(':animated')){
return;
}
$("#second ul").slideDown("fast");
});
$("#second").mouseleave(function(){
$("#second ul").slideUp("fast");
});
$("#third").mouseenter(function(){
if($("#third ul").is(':animated')){
return;
}
$("#third ul").slideDown("fast");
});
$("#third").mouseleave(function(){
$("#third ul").slideUp("fast");
});
});
效果圖
css動畫效果
<title>css動畫</title>
<style>
div{
height: 300px;
width: 300px;
border: 1px solid black;
/* 動畫名字 動畫時間 無限循環 勻速 */
animation: name 3s infinite linear;
}
@keyframes name{
/* 開始位置 */
from{transform: translate(0px,0px);}
/* 結束位置 */
to{transform: translate(500px,500px);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
/* 動畫名 動畫時間 無限循環 勻速 */
animation: name 3s infinite linear;
/* 設置動畫延遲多長時間開始 */
/* animation-delay: 3s; */
/* 反轉 from爲終點 to爲起點 */
animation-direction:reverse;
/* 規定動畫的次數 inherit 一次 infinite 無限次*/
animation-iteration-count:infinite;
}
/* 顏色漸變動畫 */
@keyframes name{
from{background-color: red;}
to{background-color: blue;}
}
監聽滾動條到固定位置觸發事件
依賴於jquery包，滾動條滑動500像素彈框。
<script>
$(document).ready(function(){
$(window).scroll(function(){ ////獲得滾動條距離頂部的高度
if($(window).scrollTop() > 500){
alert("滾動條劃了500像素了！");
}
});
});
</script>
jquery實現Tab欄切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/index.css">
<script src="../js/jquery-1.8.2.min.js"></script>
<title>網上諮詢</title>
</head>
<body>
<div class="myContainer" id="heart">
<div class="navBar">
<nav id="img">
<img src="../images/logo.png" alt="logo">
<ul class="login">
<li><a href="">註冊</a></li>
<li><a href="">登陸</a></li>
</ul>
</nav>
<ul class="menu">
<li><a href="../html/index.html">首頁</a></li>
<li><a href="">註冊地質師</a></li>
<li><a href="">註冊服務商</a></li>
<li><a href="">網上諮詢</a></li>
<li><a href="../html/onlineTest.html">網上測試</a></li>
<li><a href="">諮詢師</a></li>
<li><a href="">走進產業園</a></li>
<li><a href="">行業資訊</a></li>
<li><a href="">聯繫我們</a></li>
</ul>
</div>
<div class="selection_Sort">
<div>
<ul class="selection_sort_Ul">
<li></li> <li></li> <li></li>
</ul>
<h3>請選擇礦產分類</h3>
</div>
<div class="specific">
<div>
<!-- 一級分類 -->
<ul id="primary">
<li class="firstLi"><a href="">一級分類</a></li>
<li costom="c1" class="hover current"><a href="javaScript:;">礦石類</a></li>
<li costom="c2" class="hover"><a href="javaScript:;">金屬材料類</a></li>
</ul>
</div>
<!-- 二級分類 -->
<div>
<ul id="c2" class="hidden">
<li class="firstLi"><a href="javaScript:;">二級分類</a></li>
<li class="hover" costom="f1"><a href="javaScript:;">藍金屬材料</a></li>
<li class="hover" costom="f2"><a href="javaScript:;">黑金屬材料</a></li>
<!-- <li class="hover"><a href="javaScript:;">紅金屬材料</a></li>
<li class="hover"><a href="javaScript:;">彩色金屬材料</a></li>
<li class="hover"><a href="javaScript:;">其他</a></li> -->
</ul>
<ul id="c1">
<li class="firstLi"><a href="javaScript:;">二級分類</a></li>
<li class="hover current" costom="d1"><a href="javaScript:;">藍礦石</a></li>
<li class="hover" costom="d2"><a href="javaScript:;">黑礦石</a></li>
<!-- <li class="hover"><a href="javaScript:;">紅礦石</a></li>
<li class="hover"><a href="javaScript:;">紫礦石</a></li>
<li class="hover"><a href="javaScript:;">其他</a></li> -->
</ul>
</div>
<!-- 三級分類 -->
<div>
<ul id="d1">
<li class="firstLi"><a href="">三級分類</a></li>
<li class="hover"><a href="">藍礦石1</a></li>
<li class="hover"><a href="">藍礦石2</a></li>
<li class="hover"><a href="">藍礦石3</a></li>
<li class="hover"><a href="">藍礦石4</a></li>
<li class="hover"><a href="">藍礦石5</a></li>
<li class="hover"><a href="">藍礦石6</a></li>
<li class="hover"><a href="">藍礦石7</a></li>
<li class="hover"><a href="">藍礦石8</a></li>
<li class="hover"><a href="">藍礦石9</a></li>
</ul>
<ul id="d2" class="hidden">
<li class="firstLi"><a href="">三級分類</a></li>
<li class="hover"><a href="">黑礦石1</a></li>
<li class="hover"><a href="">黑礦石2</a></li>
<li class="hover"><a href="">黑礦石3</a></li>
<li class="hover"><a href="">黑礦石4</a></li>
<li class="hover"><a href="">黑礦石5</a></li>
<li class="hover"><a href="">黑礦石6</a></li>
<li class="hover"><a href="">黑礦石7</a></li>
<li class="hover"><a href="">黑礦石8</a></li>
<li class="hover"><a href="">黑礦石9</a></li>
<li class="hover"><a href="">黑礦石10</a></li>
<li class="hover"><a href="">黑礦石11</a></li>
</ul>
<ul id="f1" class="hidden">
<li class="firstLi"><a href="">三級分類</a></li>
<li class="hover"><a href="">藍金屬材料1</a></li>
<li class="hover"><a href="">藍金屬材料2</a></li>
<li class="hover"><a href="">藍金屬材料3</a></li>
<li class="hover"><a href="">藍金屬材料4</a></li>
<li class="hover"><a href="">藍金屬材料5</a></li>
<li class="hover"><a href="">藍金屬材料6</a></li>
<li class="hover"><a href="">藍金屬材料7</a></li>
<li class="hover"><a href="">藍金屬材料8</a></li>
<li class="hover"><a href="">藍金屬材料9</a></li>
</ul>
<ul id="f2" class="hidden">
<li class="firstLi"><a href="">三級分類</a></li>
<li class="hover"><a href="">黑金屬材料1</a></li>
<li class="hover"><a href="">黑金屬材料2</a></li>
<li class="hover"><a href="">黑金屬材料3</a></li>
<li class="hover"><a href="">黑金屬材料4</a></li>
<li class="hover"><a href="">黑金屬材料5</a></li>
<li class="hover"><a href="">黑金屬材料6</a></li>
<li class="hover"><a href="">黑金屬材料7</a></li>
<li class="hover"><a href="">黑金屬材料8</a></li>
<li class="hover"><a href="">黑金屬材料9</a></li>
<li class="hover"><a href="">黑金屬材料10</a></li>
<li class="hover"><a href="">黑金屬材料11</a></li>
<li class="hover"><a href="">黑金屬材料12</a></li>
<li class="hover"><a href="">黑金屬材料13</a></li>
</ul>
</div>
</div>
</div>
<div class="parameter">
<div>
<h3>選擇您要檢測的參數<span>(可多選)</span></h3>
</div>
<div>
<a href="">化合水</a>
<a href="">二氧化硅</a>
<a href="">三氧化二鋁</a>
<a href="">化合水</a>
<a href="">二氧化硅</a>
<a href="">三氧化二鋁</a>
<a href="">化合水</a>
<a href="">二氧化硅</a>
<a href="">三氧化二鋁</a>
<a href="">化合水</a>
<a href="">二氧化硅</a>
<a href="">三氧化二鋁</a>
<a href="">化合水</a>
<a href="">二氧化硅</a>
<a href="">三氧化二鋁</a>
<a href="">化合水</a>
<a href="">二氧化硅</a>
<a href="">三氧化二鋁</a>
<a href="">化合水</a>
<a href="">二氧化硅</a>
<a href="">三氧化二鋁</a>
</div>
<div class="last">
<a href="">提交到實驗室</a>
</div>
</div>
<div class="footer">
<nav><img src="../images/dblogo.png" alt=""></nav>
<nav>
<p class="service">支持與服務</p>
<div>
<p>首頁</p>
<p>網上諮詢</p>
<p>網上測試</p>
<p>行業資訊</p>
</div>
</nav>
<nav>
<p class="concat">聯繫我們</p>
<div>
<p>河南省有色金屬地質礦產局</p>
<p>地址：河南省鄭州市中牟XXX路地礦產業園</p>
<p>電話：0371-7865-8888</p>
<p>網址：http:www.dkcyy.com</p>
<p>版權所有：Copyright@2011-2019dikuang Technology Co.,Ltd豫ICP備09070608號-4</p>
</div>
</nav>
<nav>
<img src="../images/ewm.png" alt="">
</nav>
</div>
</div>
<!--版心容器 -->
<script>
$(function(){
$("#primary li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
var index=$(this).attr("costom");
$("#"+index).removeClass("hidden").siblings().addClass("hidden");
});
$("#c1 li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
var index=$(this).attr("costom");
$("#"+index).removeClass("hidden").siblings().addClass("hidden");
});
$("#c2 li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
var index=$(this).attr("costom");
$("#"+index).removeClass("hidden").siblings().addClass("hidden");
});
});
</script>
</body>
</html>
三級聯動
<script type="text/javascript">
$(function(){
$.post(
"city/first",
function(data){
var tempArr="";
if(data!=""){
for(var i=0;i<data.length;i++){
tempArr+="<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#province").append(tempArr);
}
},
"json"
);
$("#province").change(function(){
var pId=$(this).val();
getCitys(pId);
});
$("#city").change(function(){
var cId=$(this).val();
getAreas(cId);
});
getCitys(110000);
getAreas(110100);
});
//-----------------------------------
function getCitys(pId){
$.post(
"city/second",
{provinceId:pId},
function(data){
var tempArr="";
if(data!=""){
$("#city").empty();
for(var i=0;i<data.length;i++){
tempArr+="<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#city").append(tempArr);
getCitys(data[0].code);
}
},
"json"
);
}
//-----------------------------
function getAreas(cId){
$.post(
"city/third",
{cityId:cId},
function(data){
var tempArr="";
if(data!=""){
$("#area").empty();
for(var i=0;i<data.length;i++){
tempArr+="<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#area").append(tempArr);
getAreas(data[0].code);
}
},
"json"
);
}
</script>
</head>
<body>
<center>
<table>
<tr>
<td>選擇省：</td>
<td><select id="province"></select></td>
</tr>
<tr>
<td>選擇市：</td>
<td><select id="city"></select></td>
</tr>
<tr>
<td>選擇區：</td>
<td><select id="area"></select></td>
</tr>
</table>
</center>
</body>
</body>
</html>