1.王者荣耀英雄展示图
效果图：
图片素材：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
#content {
width: 800px;
height: 69px;
margin: 10px auto;
padding: 10px;
background: url(img/bg.png);
}
#content ul li {
width: 69px;
height: 69px;
float: left;
margin-left: 10px;
overflow: hidden;
border-radius: 5px;
}
#content ul .current {
width: 224px;
}
#content ul .current .big {
display: block;
}
#content ul .current .small {
display: none;
}
.small {
width: 69px;
height: 69px;
}
.big {
display: none;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#content>ul>li").mouseover(function() {
//让当前li变宽，然后让里面的大图标显示，小图标隐藏
$(this).stop().animate({
width: 224,
});
$(this).find(".big").stop().fadeIn();
$(this).find(".small").stop().hide();
$(this).siblings().stop().animate({
width: 69,
});
$(this).siblings().find(".big").stop().hide();
$(this).siblings().find(".small").stop().fadeIn();
});
})
</script>
</head>
<body>
<div id="content">
<ul>
<li class="current">
<img src="img/c.png" class="big">
<img src="img/c1.jpg" class="small">
</li>
<li>
<img src="img/h.png" class="big">
<img src="img/h1.jpg" class="small">
</li>
<li>
<img src="img/l.png" class="big">
<img src="img/l1.jpg" class="small">
</li>
<li>
<img src="img/m.png" class="big">
<img src="img/m1.jpg" class="small">
</li>
<li>
<img src="img/t.png" class="big">
<img src="img/t1.jpg" class="small">
</li>
<li>
<img src="img/w.png" class="big">
<img src="img/w1.jpg" class="small">
</li>
<li>
<img src="img/z.png" class="big">
<img src="img/z1.jpg" class="small">
</li>
</ul>
</div>
</body>
</html>
2.图书分类下拉列表
效果图：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none; //去除无序标签前面的圆点
}
a {
text-decoration: none; //去除下划线
}
#main {
width: 350px;
border: 1px darkgrey solid;
margin: 10px auto;
overflow: auto; //自适应
}
#head {
width: 350px;
height: 50px;
line-height: 50px; //垂直居中且值与高度的值相等
background-color: darkgray;
}
#head h2 {
float: left;
margin-left: 10px;
}
#head span {
display: block;
/* 行内标签转化为块级标签 */
width: 25px;
height: 12.5px;
background: url(img/pic.png);
float: right;
margin-top: 18px;
margin-right: 10px;
}
#content {
padding: 10px;
overflow: auto; //自适应
}
#content ul li {
width: 110px;
height: 25px;
line-height: 25px;
float: left;/* 垂直居中且值与高度的值相等 */
}
#foot a {
display: block;/* 行内标签转化为块级标签 */
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;/*垂直居中且值与高度的值相等 */
float: right;
margin-right: 10px;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#pic").click(function() {
//需要判断一种状态如果是a那么变成b,否则变成a
var index = $(this).attr("index");
if (index == 0) {
//完成图片更换和下面部分隐藏
$(this).css("background", " url(img/pic.png) 0 12.5px")
$("#content").slideUp(1000);
$("#foot").slideUp(1000);
//改编本身的标记
$(this).attr("index", 1);
} else {
完成图片更换和下面部分显示
$(this).css("background", " url(img/pic.png) 0 12.5px")
$("#content").slideDown(1000);
$("#foot").slideDown(1000);
//改编本身的标记
$(this).attr("index", 0);
}
});
//菜单简化
$("#foot a").click(function() {
//判断ul li是否有隐藏状态的
if (!$("#content>ul>li").is(":hidden")) {
//点击的时候，li索引大于4的隐藏
$("#content>ul>li:gt(4)").not(":last").hide();
//内容变为更多
$(this).text("更多☛");
} else {
//点击的时候，所有的li显示
$("#content>ul>li").show();
//内容变为更多
$(this).text("简化☚")
}
//设置a标签不能跳转
return false
})
});
</script>
</head>
<body>
<div id="main">
<div id="head">
<h2>图书分类</h2>
<span id="pic" index="0">
</span>
</div>
<div id="content">
<ul>
<li><a href="#">小说</a><i>(1110)</i></li>
<li><a href="#">文艺</a><i>(2350)</i></li>
<li><a href="#">青春</a><i>(1985)</i></li>
<li><a href="#">少儿</a><i>(1102)</i></li>
<li><a href="#">生活</a><i>(2350)</i></li>
<li><a href="#">社科</a><i>(5684)</i></li>
<li><a href="#">管理</a><i>(1256)</i></li>
<li><a href="#">计算机</a><i>(2135)</i></li>
<li><a href="#">教育</a><i>(3120)</i></li>
<li><a href="#">工具书</a><i>(4213)</i></li>
<li><a href="#">引进版</a><i>(1752)</i></li>
<li><a href="#">其他类</a><i>(9872)</i></li>
</ul>
</div>
<div id="foot">
<a href="">简化☚</a>
</div>
</div>
</body>
</html>
3.页面元素的综合操作
效果图：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面元素的综合操作</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var data = [{
"id": 1,
"name": "方便面",
"price": 3.5,
"brand": "白象"
},
{
"id": 2,
"name": "火腿肠",
"price": 1.5,
"brand": "双汇"
},
{
"id": 3,
"name": "牛奶",
"price": 4.5,
"brand": "蒙牛"
},
{
"id": 4,
"name": "瓜子",
"price": 6.5,
"brand": "金鸽"
},
{
"id": 5,
"name": "辣条",
"price": 5.5,
"brand": "卫龙"
},
{
"id": 6,
"name": "面包",
"price": 3.5,
"brand": "盼盼"
},
];
//1.点击刷新，把上面的数据显示到页面的标签元素中
$("#refresh").click(function() {
//先把List岁而页面元素清空
$("#list").empty();
//定义变量进行字符串的拼接
var dom = "";
//遍历数组
for (var i = 0; i < data.length; i++) {
//获取data数组的一条数据
var goods = data[i];
//把该条数据的值取出来拼装成一个tr的信息
dom += "<tr>" +
"<td><input type= 'checkbox' class= 'check' /></td>" +
"<td>" + goods.id + "</td>" +
"<td>" + goods.name + "</td>" +
"<td>" + goods.price + "</td>" +
"<td>" + goods.brand + "</td>" +
"<td>" +
"<a href ='#'> 修改 </a> " +
"<button>删除</button>" +
"</td>" +
"</tr>"
}
//向list中添加元素
$("#list").append(dom);
});
//2.click事件只能绑定到文档一开始存在的元素的标签上，动态生成的元素不能进行事件绑定
//动态生成的网页元素只能通过on()进行事件绑定
//语法：元素.on('事件名称','给里面哪个元素'，功能函数)；
$("#list").on('click','tr td button',function(){
//当前点击的button执行删除他的父类元素且名字是tr
$(this).parents("tr").remove();
});
//3.点击全选，选中所有的数据行
$("#checkAll").click(function(){
//1.点击全选获取的选中状态
var flag=$(this).prop("checked");
//2.让list 里面所有class为check的复选框设置相同的状态
$("#list .check").prop("checked",flag);
});
//4.删除选中的行
$("#batchDel").click(function(){
$("#list .check:checked").parents("tr").remove();
});
});
</script>
</head>
<body>
<button id="refresh">刷新</button>
<hr />
<table>
<thead>
<tr>
<th>勾选</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>品牌</th>
<th>操作</th>
</tr>
</thead>
<tbody id="list">
<tr>
</tr>
</tbody>
</table>
<div>
<input type="checkbox" id="checkAll" class="check" />
<span>全选 </span>
<button id="batchDel">删除选中</button>
</div>
</body>
</html>
4.轮播图
效果图：
图片素材：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#content{
width: 500px;
height: 350px;
margin: 10px auto;
position: relative;
}
#content img{
width: 100%;
height: 100%;
}
#before{
display: block;
width: 100px;
height: 35px;
position: absolute;
left: 20px;
top: 150px
}
#after{
display: block;
width: 100px;
height: 35px;
position: absolute;
right: 20px;
top: 150px;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
//1.使用数组存储图片的地址，使用索引循环取出地址
// var pic=["img/case1.jpg","img/case2.jpg","img/case3.jpg",
// "img/case4.jpg","img/case5.jpg","img/case6.jpg"];
// var n=0;
// setInterval(function(){
// n++;
// //如果大于5，重新从第0个开始
// if(n>5){
// n=0;
// }
// //从数组中取出地址，设置图片的链接
// $("#content img").attr("src",pic[n]);
// },1000);
//2.每隔多少毫秒直接修改图片的地址编号
var n=1;
setInterval(function(){
n++;
if(n>6){
n=1;
}
$("#content img").attr("src","img/case"+n+".jpg");
},5000);
//点击播放上一页
$("#before").click(function(){
//1.首先需要知道当前播放的是哪一张图片的地址 找到编号 3 让3-1 就是上一张
var src=$("#content img").attr("src");
//2.查找地址字符串中最后的.jpg的位置索引 img/case1.jpg
var index=src.lastIndexOf(".jpg");
//3.使用.jpg的索引-1 就是图片编号的索引位置，根据索引拿到数字编号字符，再转换成整数
var num=parseInt(src.charAt(index-1));
var n
if(num==1){
n=6; //如果第一张，显示第6张
}else{
n=num-1; //如果不是第一张，显示第-1张
}
//4.让数字编号-1 重新设置图片的地址，就是上一张的操作
$("#content img").attr("src","img/case"+(n)+".jpg")
});
//点击播放上一页
$("#after").click(function(){
//1.首先需要知道当前播放的是哪一张图片的地址 找到编号 3 让3+1 就是下一张
var src=$("#content img").attr("src");
//2.查找地址字符串中最后的.jpg的位置索引 img/case1.jpg
var index=src.lastIndexOf(".jpg");
//3.使用.jpg的索引-1 就是图片编号的索引位置，根据索引拿到数字编号字符，再转换成整数
var num=parseInt(src.charAt(index-1));
var n
if(num==6){
n=1;
}else{
n=num+1;
}
//4.让数字编号-1 重新设置图片的地址，就是上一张的操作
$("#content img").attr("src","img/case"+(n)+".jpg")
});
});
</script>
</head>
<body>
<div id="content">
<img src="img/case1.jpg" />
<button id="before">上一页</button>
<button id="after">下一页</button>
</div>
</body>
</html>源代码
