5.3.1 网页字体大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin:0; padding:0; } .msg {width:300px; margin:100px; } .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;} .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;font-size:12px;color:white; } #para{border: 1px solid #000;padding: 5px;} .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;} </style> <script src="jQuery环境/jquery-3.2.1.min.js"></script> </head> <body> <div class="msg"> <div class="msg_caption"> <span class="bigger" >放大</span> <span class="smaller" >缩小</span> </div> <div> <p id="para" > This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div> </div> </body> </html>
通过控制按钮控制文字大小
<script> $(function(){ $("span").click(function(){ // 当文档加载完毕后，为所有 <span> 元素绑定单击事件 var thisEle = $("#para").css("font-size"); var textFontSize = parseFloat(thisEle,10); // 获取 id 为 "para" 的字体大小，获取的值将是返回的数字和单位，即16px，用parseFloat() 去掉单位，parseFloat() 第二个参数表示10进制 var unit = thisEle.slice(-2); // 获取 px 单位 var cName = $(this).attr("class"); if(cName == "bigger"){ if(textFontSize <= 22){ // 判断 textFontSize 如果小于等于22 则增大 textFontSize +=2; } }else if(cName == "smaller"){ if(textFontSize >=12){ textFontSize -=2; } } // 判断单击的当前 <span> 元素的 class 值，并赋值 // textFontSize +=2 相当于 textFontSize = textFontSize +2; $("#para").css("font-size",textFontSize +unit); // 再次获取 "pare" 并为它的 font-size 属性赋值，并且要拼接上单位 }) }) </script>
5.3.2 网页选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} .tab { width:240px;margin:50px;} .tab_menu { clear:both;} .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;} .tab_menu li.hover { background:#DFDFDF;} .tab_menu li.selected { color:#FFF; background:#6D84B4;} .tab_box { clear:both; border:1px solid #898989; height:100px;} .hide{display:none} </style> <script src="jQuery环境/jquery-3.2.1.min.js"></script> </head> <body> <div class="tab"> <div class="tab_menu"> <ul> <li class="selected">时事</li> <li>体育</li> <li>娱乐</li> </ul> </div> <div class="tab_box"> <div>时事</div> <div class="hide">体育</div> <div class="hide">娱乐</div> </div> </div> </body> </html>
通过隐藏和显示来切换不同内容。
$(function(){ // 首先为 <li> 元素绑定事件 var $div_li = $("div.tab_menu ul li"); $div_li.click(function(){ // 绑定事件 $(this).addClass("selected") //当前 <li> 元素高亮 .siblings().removeClass("selected"); //去掉其他同辈元素的高亮显示 var index = $div_li.index(this); //获取当前单击的 <li> 元素在全部元素中的索引 $("div.tab_box > div") //选取子节点 .eq(index).show() //显示 <li> 对应的 <div> 元素 .siblings().hide(); //隐藏其他同辈的 <div> 元素 }); })
以上基本功能完成。
如果想加强效果，例如鼠标滑入滑出效果，可以增加 hover 事件
$(function(){ // 首先为 <li> 元素绑定事件 var $div_li = $("div.tab_menu ul li"); $div_li.click(function(){ // 绑定事件 $(this).addClass("selected") //当前 <li> 元素高亮 .siblings().removeClass("selected"); //去掉其他同辈元素的高亮显示 var index = $div_li.index(this); //获取当前单击的 <li> 元素在全部元素中的索引 $("div.tab_box > div") //选取子节点 .eq(index).show() //显示 <li> 对应的 <div> 元素 .siblings().hide(); //隐藏其他同辈的 <div> 元素 }).hover(function(){ // 添加光标滑过效果 $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); })
5.3.3 网页换肤
自定义皮肤更换
<style> *{ margin:0px; padding:0px; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #div_side_0,#div_side_1 { float:left; width:120px; height:450px; } #skin { margin:10px; padding:5px; width:210px; padding-right:0px; list-style:none; border: 1px solid #CCCCCC; overflow:hidden; } #skin li{ float:left; margin-right:5px; width:15px; height:15px; text-indent:-999px; overflow:hidden; display:block; cursor:pointer; background-image:url(theme.gif); } #skin_0{ background-position:0px 0px; } #skin_1{ background-position:15px 0px; } #skin_2{ background-position:35px 0px; } #skin_3{ background-position:55px 0px; } #skin_4{ background-position:75px 0px; } #skin_5{ background-position:95px 0px; } #skin_0.selected{ background-position:0px 15px !important; } #skin_1.selected{ background-position:15px 15px !important; } #skin_2.selected{ background-position:35px 15px !important; } #skin_3.selected{ background-position:55px 15px !important; } #skin_4.selected{ background-position:75px 15px !important; } #skin_5.selected{ background-position:95px 15px !important; } .title { cursor:pointer;} h1{ margin:10px; padding:10px 20px; width:60px; color:#ffffff; font-size:14px; } a:link { text-decoration: none; color: #333333; } a:visited { color: #333333; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } </style> <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /> </style> <script src="jQuery环境/jquery-3.2.1.min.js"></script> </head> <body> <ul id="skin"> <li id="skin_0" title="灰色" class="selected">灰色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色">天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> <div id="div_side_0"> <div id="news"> <h1 class="title">时事新闻</h1> </div> </div> <div id="div_side_1"> <div id="game"> <h1 class="title">娱乐新闻</h1> </div> </div>
创建一个 CSS 文件夹，用来存放不同颜色背景的CSS文件
为皮肤选择按钮添加单击事件
① 当皮肤选择按钮被单击后，当前皮肤被勾选
② 将网页内容换肤
$(function(){ var $li =$("#skin li"); $li.click(function(){ $("#"+this.id).addClass("selected") //当前<li>元素选中 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中 $("#cssfile").attr("href","css/"+this.id+".css"); //设置不同皮肤 }) })