jQuery案例
时间：2023-05-18 17:37:00
01-精品展示案例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <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() // 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="200px" height="200px">a>
div>
<div>
<a href=""><img src="images/雪地靴.jpg" width="200px" height="200px">a>
div>
<div>
<a href=""><img src="images/冬裙.jpg" width="200px" height="200px">a>
div>
<div>
<a href=""><img src="images/呢大衣.jpg" width="200px" height="200px">a>
div>
<div>
<a href=""><img src="images/毛衣.jpg" width="200px" height="200px">a>
div>
<div>
<a href=""><img src="images/棉服.jpg" width="200px" height="200px">a>
div>
<div>
<a href=""><img src="images/女裤.jpg" width="200px" height="200px">a>
div>
<div>
<a href=""><img src="images/羽绒服.jpg" width="200px" height="200px">a>
div>
<div>
<a href=""><img src="images/牛仔裤.jpg" width="200px" height="200px">a>
div>
div>
div>
body>
html>
效果展示
02-高亮显示案例
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="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="images/01.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/02.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/03.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/04.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/05.jpg" alt="" />a>
li>
<li>
<a href="#"><img src="images/06.jpg" alt="" />a>
li>
ul>
div>
body>
html>
效果展示
03-手风琴案例
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> $(function() {
// 鼠标经过小li,有两步操作 $(".king li").mouseenter(function( 
