(1)淘宝精品展示效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
#div1 {
width: 302px;
height: 260px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
ul {
list-style: none;
}
#left,#center,#right {
float: left;
}
#left li,#right li{
background: url("image/lili.jpg") repeat-x;
}
#left li a,#right li a {
text-decoration: none;
display: block;
width: 48px;
height: 27px;
line-height: 27px;
text-align: center;
color: black;
border: 1px solid pink;
}
#left li a:hover,#right li a:hover {
background-image: url("image/abg.gif");
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="H1.js"></script>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
// 左边的li标签的进入事件
$("#left>li").mouseenter(function () {
//获取当前的li标签的索引
var index = $(this).index();
//隐藏中间id为center中所有的li标签
$("#center>li").hide();
$("#center>li:eq("+index+")").show();
});
$("#right>li").mouseenter(function () {
var index = $(this).index()+9;
//隐藏中间id为center中所有的li标签
$("#center>li").hide();
$("#center>li:eq("+index+")").show();
});
});
</script>
</head>
<body>
<div id="div1">
<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>
<ul id="center">
<li><a href="#"><img src="image/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/雪地靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/冬裙.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/呢大衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/女裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/羽绒服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/牛仔裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/女包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/男包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/登山鞋.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/皮带.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/围巾.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/皮衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/男毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/男棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="image/男靴.jpg" width="200" height="250"/></a></li>
</ul>
<ul id="right">
<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>
</body>
</html>
(2)网页开关灯使用CSS方法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="H1.js"></script>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
if ($(this).val() == "关灯"){
$("body").css("backgroundColor","black");
$(this).val("开灯");
} else {
$("body").css("backgroundColor","");
$(this).val("关灯");
}
})
})
</script>
</head>
<body>
<input type="button" value="关灯" id="btn">
</body>
</html>
(3)操作当前元素其他元素样式的效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style: none;
cursor: pointer;
}
</style>
<script src="H1.js"></script>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$("ul>li").mouseenter(function () {
$(this).css("backgroundColor","red")
.siblings("li").css("backgroundColor","");})
.mouseleave(function () {
$(this).parent().find("li").css("backgroundColor","")})
.click(function () {
$(this).css("backgroundColor","red")
.prevAll("li").css("backgroundColor","yellow").end()
.nextAll("li").css("backgroundColor","green")})
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
鼠标进入:
鼠标点击:
(4) 点击按钮动态创建表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 300px; height: 300px; border: 1px solid red; } </style> <script src="H1.js"></script> <script src="jquery-3.3.1.js"></script> <script> var array = [ {"name":"百度","href":"http://www.baidu.com"}, {"name":"京东","href":"http://www.jingdong.com"}, {"name":"淘宝","href":"http://www.taobao.com"}, {"name":"凤凰","href":"http://www.ifeng.com"} ]; $(function () { // 点击按钮动态创建表格 $("#btn1").click(function () { var table = $("<table border='1' style='border-collapse: collapse'></table>"); $("#div1").append(table); // 循环遍历,创建行 for (var i=0;i<array.length;i++){ var trObj = $("<tr></tr>"); var dt=array[i]; table.append(trObj); var td1 = $("<td>"+dt.name+"</td>"); trObj.append(td1); var td2 = $("<td><a href='"+dt.href+"'>"+dt.name+"</a></td>"); trObj.append(td2); trObj.mouseenter(function () { $(this).css("backgroundColor","yellow"); }); trObj.mouseleave(function () { $(this).css("backgroundColor",""); }); } }); // 移除表格 $("#btn2").click(function () { $("#div1").empty(); }); // 点击按钮,在table中添加一行 $("#btn3").click(function () { var tr = $("<tr><td>腾讯</td><td><a href='http://www.qq.com'>腾讯</a></td></tr>"); $("#div1").children("table").append(tr); }); }) </script> </head> <body> <input type="button" value="创建表格" id="btn1"> <input type="button" value="移除" id="btn2"> <input type="button" value="添加表格" id="btn3"> <div id="div1"> </div> </body> </html>
效果: