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>
源代码
