整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
介：網站編輯器中有許多按鈕，這些按鈕的形狀與Word有點不一樣，下面給大家簡單的總結一下。
工具：安徽省基礎教育資源應用平臺后臺編輯器
一、HTML文件代碼圖標
二、段落格式圖標
1.選中段落
2.點擊對應的格式
三、字體圖標
系統提供了幾種常見的字體，如：宋體、 仿宋、 楷體 、雅黑等等
四、清除html代碼按鈕
五、插入程序代碼按鈕
默認為javascript語言，也可以選擇其它的語言
六、取消超級鏈接按鈕圖標
注：其它圖標的含義與Word工具欄上的按鈕基本類似
SS偽元素主要是指HTML中沒有定義、存在的元素，偽元素本身不是真正的頁面元素，但是偽元素在使用過程中，其用法與效果與其他真正頁面元素是一樣的。偽元素只能在定義基礎上動態顯示其運行效果，在HTML源文件中并沒有該元素的真正代碼。CSS3中所定義的所有偽元素與偽類描述如下圖所示：
CSS偽元素與偽類
ripple波紋
按鈕的波紋效果主要是指按鈕在點擊時展示出的動態效果。在實現效果過程中可行的方法方式較多，例如可以使用JavaScript、CSS動畫、JQuery等。網上目前按鈕波紋實現效果較多，部分樣式效果展示如下：
波紋效果展示
CSS偽類波紋效果主要借助于before、after偽類與hover懸停選擇器等實現類似波紋效果，本文主要借助after及hover等實現按鈕的波紋效果，本例設計兩種類似波紋效果，最終實現效果展示如下圖所示：
設計樣式1
設計樣式2
本文設計實現的兩類波紋效果樣式描述如上圖gif所示，其實現過程描述如下：
1、按鈕基本樣式設計
本例按鈕基本樣式主要包括寬度、高度、背景顏色等。使用元素選擇器與類選擇器定義了按鈕元素的基本樣式，其樣式實現代碼描述如下：
button,.button2,.button{width: 200px; height: 50px; background-color: green;border: 0; cursor: pointer;color: #FFF; font-size: 16px; position: relative;}
.button類主要用以實現設計樣式1，.button2類主要用于實現設計效果2，兩類按鈕定義描述如下：
<button type="button" class="button">Ripple1</button> <button type="button" class="button2">Ripple2</button>
2、after偽元素使用
after偽元素主要用于實現在指定元素的后面添加新的內容。本例提供的兩種設計方式都是在button元素的后面添加新的類似div的新元素，其中樣式1，新添加的元素與button本身重合，尺寸也一致。設計樣式2中after元素位于button的底部位置，寬度與button相同，高度為指定尺寸5px。兩個設計中after元素樣式為實現動態展開效果都涉及寬度width為0。after元素的樣式定義如下：
.button::after{content: " "; width: 0; height: 50px; position: absolute; left:50%;top: 0%;background-color: red;opacity: 0; transition: all .4s; }
.button2::after{content: " "; width: 0; height: 5px; position: absolute; left:50%;top: 100%;background-color: red;transition: all .4s; }
after元素CSS樣式定義中使用了transition屬性實現動畫效果，即在0.4s內實現寬度從0改變為100%。
3、hover選擇器的使用
hover選擇器為懸停選擇器，主要對鼠標在HTML元素懸停時樣式進行設置。本例兩個涉及效果都是借助hover懸停選擇器對after樣式進行設置，在初始化設置寬度為0的基礎上寬度改變為100%，最終實現兩端伸展的效果。hover選擇器定義after元素樣式描述如下所示：
.button:hover::after{left:0%; width: 100%; opacity: 0.6;}
.button2:hover::after{left:0%; width: 100%;}
以上給出了CSS偽元素實現波紋效果，主要借助了after、before偽元素與hover懸停選擇器等。設計實現效果完整源文件截圖如下：
案例完整代碼
以上給出了JavaScript中的事件基本概念及案例分析，如有問題可在評論區討論。本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！相關文章鏈接如下：
前端開發-JavaScript中的事件（Event）及事件處理總結
前端開發-CSS3動畫實現焦點(圖文輪播)圖效果
前端開發-JavaScript DOM動態生成文本框
前端設計-教你如何快速繪制HTML5動畫
前端設計-響應式頁面開發基礎
前端設計-Ajax技術及實例展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 300px;
height: 300px;
border: 2px solid black;
background-color: yellow;
}
</style>
<script>
var w;
var h;
// currentStyle IE
var i=1;
var j=1;
var c=0;
function cool(name,value){
var odiv=document.getElementById('box');
var obj_w=getComputedStyle(odiv,false).width;
var obj_h=getComputedStyle(odiv,false).height;
var obj_c=getComputedStyle(odiv,false).backgroundColor;
if(name=='width'){
w=parseInt(obj_w)+parseInt(value)*i+'px';
i+=1;
odiv.style[name]=w;
}
else if(name=='height'){
h=parseInt(obj_h)+parseInt(value)*j+'px';
j+=1;
odiv.style[name]=h;
}else if(name=='backgroundColor')
{
if(c==value.length)
c=0;
odiv.style[name]=value[c]
c+=1;
}
}
</script>
</head>
<body>
<input type="button" value="變寬" onclick="cool('width','100');"/>
<input type="button" value="變高" onclick="cool('height','100');"/>
<input type="button" value="變紅" onclick="cool('backgroundColor',['red','yellow','pink','purple']);"/>
<br>
<div id="box"></div>
</body>
</html>*請認真填寫需求信息，我們會在24小時內與您取得聯系。
