jQuery開發案例

原創 无区新手 2020-06-22 23:29

 

下拉菜單

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠標經過
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 當前元素  this不要加引號
                // show() 顯示元素  hide() 隱藏元素
                $(this).children("ul").show();
            });
            // 鼠標離開
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })
    </script>
</body>

</html>

 

淘寶服飾精選案例

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 1. 鼠標經過左側的小li 
            $("#left li").mouseover(function() {
                // 2. 得到當前小li 的索引號
                var index = $(this).index();
                console.log(index);
                // 3. 讓我們右側的盒子相應索引號的圖片顯示出來就好了
                // $("#content div").eq(index).show();
                // 4. 讓其餘的圖片（就是其他的兄弟）隱藏起來
                // $("#content div").eq(index).siblings().hide();
                // 鏈式編程
                $("#content div").eq(index).show().siblings().hide();

            })
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女褲</a></li>
            <li><a href="#">羽絨服</a></li>
            <li><a href="#">牛仔褲</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女褲.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽絨服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔褲.jpg" width="200" height="250" /></a>
            </div>

        </div>


    </div>
</body>

</html>

 

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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介紹</li>
                <li>規格與包裝</li>
                <li>售後保障</li>
                <li>商品評價（50000）</li>
                <li>手機社區</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介紹模塊內容
            </div>
            <div class="item">
                規格與包裝模塊內容
            </div>
            <div class="item">
                售後保障模塊內容
            </div>
            <div class="item">
                商品評價（50000）模塊內容
            </div>
            <div class="item">
                手機社區模塊內容
            </div>

        </div>
    </div>
    <script>
        $(function() {
            // 1.點擊上部的li，當前li 添加current類，其餘兄弟移除類
            $(".tab_list li").click(function() {
                // 鏈式編程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.點擊的同時，得到當前li 的索引號
                var index = $(this).index();
                console.log(index);
                // 3.讓下部裏面相應索引號的item顯示，其餘的item隱藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })
    </script>
</body>

</html>

 

高亮顯示

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        body {
            background: #000;
        }
        
        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }
        
        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }
        
        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            //鼠標進入的時候,其他的li標籤透明度：0.5
            $(".wrap li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                // 鼠標離開，其他li 透明度改爲 1
                $(this).siblings().stop().fadeTo(400, 1);
            })

        });
    </script>
</head>

<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="img/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="img/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="img/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="img/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="img/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="img/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
</body>

</html>

 

王者榮耀手風琴
 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手風琴案例</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        ul {
            list-style: none;
        }
        
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
            overflow: hidden;
        }
        
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
            width: 224px;
        }
        
        .king li.current .big {
            display: block;
        }
        
        .king li.current .small {
            display: none;
        }
        
        .big {
            width: 224px;
            display: none;
        }
        
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>

</head>

<body>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 鼠標經過某個小li 有兩步操作：
            $(".king li").mouseenter(function() {
                // 1.當前小li 寬度變爲 224px， 同時裏面的小圖片淡出，大圖片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其餘兄弟小li寬度變爲69px， 小圖片淡入， 大圖片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })



        });
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>




</body>

</html>

 

 全選複選案例

<!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">
		<title>Document</title>
		<style>
			.content{
				width: 500px;
				border: 1px solid red;
				margin: 0 auto;
			}
			.a{
				border-bottom: 1px solid black;
			}
			.b .j-checkbox{
				display: block;
				margin: 20px 3px;
			}
			.c{
				border-top: 1px solid black;
			}
			.a,.b,.c{
				margin: 50px 0;
			}
		</style>
		<script src="js/jquery.min.js"></script>
	</head>

	<body>
		<div class="content">
			<div class="a">
				<input type="checkbox" class="checkall">
			</div>
			<div class="b">
				<input type="checkbox" class="j-checkbox">
				<input type="checkbox" class="j-checkbox">
				<input type="checkbox" class="j-checkbox">
			</div>
			<div class="c">
				<input type="checkbox" class="checkall">
			</div>
		</div>

		<script>
			$('.checkall').change(function() {
				$(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
			});
			$('.j-checkbox').change(function() {
				if ($('.j-checkbox:checked').length == $('.j-checkbox').length) {
					$(".checkall").prop("checked", true);
				} else {
					$(".checkall").prop("checked", false);
				}
			});
		</script>
	</body>

</html>

 

帶有動畫的返回頂部 

<!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">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回頂部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(document).scrollTop(100);
            // 被捲去的頭部 scrollTop()  / 被捲去的左側 scrollLeft()
            // 頁面滾動事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回頂部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文檔而是 html和body元素做動畫
            })
        })
    </script>
</body>

</html>

 

電梯導航案例

<!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">
		<title>Document</title>
		<style>
			.slider-bar {
				position: fixed;
				right: 0;
				top: 50%;
				margin-left: 600px;
				display: none;
			}

			.a,
			.b,
			.c {
				width: 150px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border: 1px solid black;
				cursor: pointer;
			}

			.w {
				width: 1200px;
				margin: 10px auto;
			}

			.header {
				height: 150px;
				background-color: purple;
			}

			.banner {
				height: 250px;
				background-color: skyblue;
			}

			.green {
				height: 500px;
				background-color: green;
			}

			.blue {
				height: 500px;
				background-color: blue;
			}

			.black {
				height: 500px;
				background-color: black;
			}

			.selected {
				background-color: red;
				color: #FFFFFF;
			}

			.floot {
				height: 1000px;
			}
		</style>
		<script src="js/jquery.min.js"></script>
	</head>

	<body>
		<div class="slider-bar">
			<div class="a selected">綠色</div>
			<div class="b">藍色</div>
			<div class="c">黑色</div>
		</div>

		<div class="header w"></div>

		<div class="banner w"></div>

		<div class="main">
			<div class="green w"></div>
			<div class="blue w"></div>
			<div class="black w"></div>
		</div>

		<div class="floot">

		</div>

		<script>
			function toggleTllo() {
				if ($(document).scrollTop() >= $(".banner").offset().top) {
					$(".slider-bar").fadeIn();
				} else {
					$(".slider-bar").fadeOut();
				}
			}
			var flag = true;
			$(window).scroll(function() {
				toggleTllo();

				if (flag) {
					$(".main div").each(function(i, ele) {
						if ($(document).scrollTop() >= $(ele).offset().top) {
							$(".slider-bar div").eq(i).addClass("selected").siblings().removeClass("selected");
						}
					});
				}


			});

			$(".slider-bar div").click(function() {
				flag = false;
					var wz = $(".main div").eq($(this).index()).offset().top;

				$("body,html").stop().animate({
					scrollTop: wz
				},function(){
					flag = true;
				});
				$(this).addClass("selected").siblings().removeClass("selected");
			});
		</script>
	</body>

</html>

 

發佈微博案例

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0
			}

			ul {
				list-style: none
			}

			.box {
				width: 600px;
				margin: 100px auto;
				border: 1px solid #000;
				padding: 20px;
			}

			textarea {
				width: 450px;
				height: 160px;
				outline: none;
				resize: none;
			}

			ul {
				width: 450px;
				padding-left: 80px;
			}

			ul li {
				line-height: 25px;
				border-bottom: 1px dashed #cccccc;
				display: none;
			}

			input {
				float: right;
			}

			ul li a {
				float: right;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				// 1.點擊發布按鈕， 動態創建一個小li，放入文本框的內容和刪除按鈕， 並且添加到ul 中
				$(".btn").on("click", function() {
					var li = $("<li></li>");
					li.html($(".txt").val() + "<a href='javascript:;'> 刪除</a>");
					$("ul").prepend(li);
					// li.slideDown();
					// $(".txt").val("");
				})

				// 2.點擊的刪除按鈕，可以刪除當前的微博留言li
				// $("ul a").click(function() {  // 此時的click不能給動態創建的a添加事件
				//     alert(11);
				// })
				// on可以給動態創建的元素綁定事件
				$("ul").on("click", "a", function() {
					$(this).parent().slideUp(function() {
						$(this).remove();
					});
				})

			})
		</script>
	</head>

	<body>
		<div class="box" id="weibo">
			<span>微博發佈</span>
			<textarea name="" class="txt" cols="30" rows="10"></textarea>
			<button class="btn">發佈</button>
			<ul>
			</ul>
		</div>
	</body>

</html>

 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

16張圖解鎖Spring的整體脈絡

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

4ye 2021-12-04 13:03:55

JavaScript 瀏覽器統治地位不保？Python 有望取代

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-12-02 17:58:57

分享8個可以編譯爲JavaScript的語言

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

devpoint 2021-12-01 18:44:00

2021 最佳開源軟件榜單出爐，Flutter、StreamNative 上榜

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-12-01 11:18:54

TypeScript 4.5 發佈，帶來 Promise 功能改進

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-19 11:23:57

Angular 13 發佈：全面棄用 View Engine

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-11-05 17:43:56

微軟產品經理：你不能不知道的6個Web開發者工具

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Christian Heilmann 2021-11-03 16:08:56

看完 Jamstack 的調查報告，我抓住了最新的 Web 流行趨勢

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-10-13 17:13:59

開發者眼中的 HarmonyOS 遊戲生態：有紅利也有挑戰

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

罗燕珊 2021-09-22 12:13:51

邊緣服務的一致性、耦合和複雜性

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

Glenn Engstrand 2021-09-08 15:08:54

技術人最愛Rust，最怕COBOL，工程經理最高薪，懂Clojure最賺錢 | 2021全球開發者報告

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"概述"}]},{"t

Stack Overflow 2021-08-09 14:38:55

深入學習 React 合成事件

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

微医大前端技术 2021-07-31 20:03:59

如何從 0 到 1 搭建性能檢測系統

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"t

政采云前端团队 2021-07-31 17:03:58

你不知道的 TypeScript 高級技巧

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"t

微医大前端技术 2021-07-31 11:03:58

編寫高質量可維護的代碼：異步優化

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言"}]},{"t

政采云前端团队 2021-07-31 10:03:55