整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
東IT優(yōu)就業(yè)
接下來(lái)，廣州IT培訓(xùn)老師講一下，如何用HTML+CSS技術(shù)，來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)滑動(dòng)門(mén)效果。
一、什么是滑動(dòng)門(mén)
大家在網(wǎng)頁(yè)中經(jīng)常會(huì)見(jiàn)到這樣一種導(dǎo)航效果,因?yàn)槭褂妙l率廣泛，所以廣大的程序員給它起了一個(gè)名字，叫做滑動(dòng)門(mén)。在學(xué)習(xí)滑動(dòng)門(mén)之前，首先你要了解什么是滑動(dòng)門(mén)。
小米官網(wǎng)，網(wǎng)頁(yè)滑動(dòng)門(mén)效果
二、實(shí)現(xiàn)滑動(dòng)門(mén)所需技術(shù)
1.簡(jiǎn)單HTML基礎(chǔ)知識(shí)
2.簡(jiǎn)單的CSS基礎(chǔ)樣式
3.CSS定位
三、如何實(shí)現(xiàn)滑動(dòng)門(mén)
1.準(zhǔn)備好一段HTML代碼
2.給當(dāng)前HTML結(jié)構(gòu)添加一些樣式
3.使用定位實(shí)現(xiàn)滑動(dòng)門(mén)效果
根據(jù)廣州IT培訓(xùn)老師上面分享的步驟，就可以實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)門(mén)效果，快去試試吧。
廣東IT優(yōu)就業(yè)
出處：www.cnblogs.com/shsxt/p/8206115.html
更多IT精彩推薦：
月入過(guò)萬(wàn)的WEB工程師是如何煉成的?http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009338
多人可能都用過(guò)Web編輯器，比如Ckedit等，除了Word等本地編輯器外Web編輯器也是最常用最方便Web內(nèi)容來(lái)源。這些在線編輯器的一個(gè)短板限制很多，不能實(shí)時(shí)反饋在線效果。本文蟲(chóng)蟲(chóng)給大家介紹一種很簡(jiǎn)單的無(wú)限制在線Html編輯器，實(shí)現(xiàn)所寫(xiě)即所得UI和樣式實(shí)時(shí)刷新，JS代碼也能進(jìn)行熱加載執(zhí)行重新渲染，而且這些實(shí)現(xiàn)都非常簡(jiǎn)單，只用到了很少的html和css代碼。
要使Html可以編輯實(shí)際上很簡(jiǎn)單只要一個(gè)body標(biāo)簽就足矣。contenteditable這個(gè)body屬性可能鮮為人知，實(shí)際上它的功能就是實(shí)現(xiàn)Html文檔可編輯。我們新建一個(gè)Html文檔（Cc.html），然后將如下代碼復(fù)制粘貼到文檔中：
<body contenteditable="true"></body>
通過(guò)瀏覽器打開(kāi)這個(gè)文檔，怎么樣，神奇的事情發(fā)生了把？
你可以在這個(gè)頁(yè)面任意輸入文本甚至還可以粘貼圖片。（兼容基本上所有的瀏覽器，IE也可以）。還可以支持Ctr+Z撤銷(xiāo)和重做。
我們知道<div>…</div>和<p>…</p>標(biāo)簽內(nèi)的文字都會(huì)在頁(yè)面顯示，而<script>…</script>和<style>…</style>中的都是引用的前端腳本的代碼（JS）等需要通過(guò)瀏覽器引擎執(zhí)行渲染顯示出來(lái)的，那么這些代碼是不是可以在顯示出來(lái)呢？實(shí)際上在大多數(shù)瀏覽器只是通過(guò)CSS樣式隱藏起來(lái)的，我們通過(guò)重寫(xiě)在div>…</div>中增加script, style { display: block; }即可：
<body>
<style>
script, style { display: block; }
</style>
<script>
console.log("Hello Chongchong!");
</script>
</body>
通過(guò)將其粘貼到html文件并在瀏覽器中打開(kāi)它，顯示如下：
而且，我們也可以將這個(gè)頁(yè)面也設(shè)置為contenteditable，并且<style></ style>增加樣式顯示，比如我們修改字體的大小為20pt，顏色為綠色：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt;color: green}
</style>
<script>
console.log("Hello ChongChong!");
</script>
</body>
現(xiàn)在我們可以，通過(guò)在線編輯style{}的內(nèi)容，讓頁(yè)面的呈現(xiàn)實(shí)時(shí)變化，比如字體再增加10pt，顏色變成藍(lán)色。
注意，輸入時(shí)候內(nèi)容會(huì)實(shí)時(shí)變化的，比如你修改20pt為30pt途中，你字體會(huì)變成2，很小很小，繼續(xù)刪除2就會(huì)恢復(fù)成默認(rèn)正常默認(rèn)，你不用理會(huì)繼續(xù)輸入30字體就會(huì)變成30pt，其他參數(shù)也類(lèi)似。
該方法可以實(shí)時(shí)刷新樣式顯示<style></ style>標(biāo)簽，對(duì)于JS代碼，由于其只會(huì)在頁(yè)面加載時(shí)候執(zhí)行一次，你可以修改<script>…</script>內(nèi)容，但是不能實(shí)時(shí)執(zhí)行生效。
上面我也說(shuō)，JS代碼的修改需要重新加載才能執(zhí)行。為了實(shí)現(xiàn)重新加載，我們首先使用簡(jiǎn)單的按鍵（Shift+enter）觸發(fā)重新加載的方法：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt; color: green}
</style>
<script>
//alert("Hello ChongChong!");
document.onkeydown = function(e) {
var key = window.event ? event : e;
if (key.shiftKey && key.keyCode == 13) {
eval(window.getSelection().focusNode.parentNode.innerHTML);
}
};
</script>
</body>
通過(guò)瀏覽器打開(kāi)，并且編輯去掉//alert("Hello ChongChong!")前面的//注釋,然后按鍵shift時(shí)按Enter鍵。
結(jié)果如上圖就可以彈出一個(gè)消息窗口。
通過(guò)上面的方法我們實(shí)現(xiàn)了一個(gè)可編輯上面在線編輯器。在前面代碼的基礎(chǔ)上，我們提供一個(gè)基礎(chǔ)的模版供大家使用，完整代碼如下：
<body contenteditable="true" spellcheck="false">
<title>editor</title>
<style>script,
style {
display: block;
white-space: pre-wrap;
background-color: #eeeeee;
border: solid;
border-radius: 10px;
padding: 20px;
}
body {
font-family: Menlo, Monaco, monospace;
font-size: 12pt;
tab-size: 4;
}
script.success {
background-color: #ccffcc;
border: solid, #00cc00;
}
script.error {
background-color: #ffcccc;
border: solid, #ff1111;
}
</style>
<script type="text/javascript" class="success">
//alert("Hello Chongchong!");
document.onkeydown = function(e) {
var key = window.event ? event : e;
var node = window.getSelection().focusNode;
if (key.shiftKey) {
if (key.keyCode == 13) {
node.parentNode.classList.remove("error");
node.parentNode.classList.remove("success");
try {
eval(node.parentNode.innerHTML);
node.parentNode.classList.add("success");
} catch (e) {
node.parentNode.classList.add("error");
}
return false;
}
} else {
if (key.keyCode == 13) {
document.execCommand("insertHTML", false, "\n");
return false;
}
if (key.keyCode == 9) {
document.execCommand("insertHTML", false, "\t");
return false;
}
}
}
</script>
</body>
將上面代碼保存為html，然后用瀏覽器打開(kāi)就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的在線html編輯器。
該在線編輯器模版還非常簡(jiǎn)陋，如果能增加語(yǔ)法高亮和自動(dòng)完成等一些功能可能很好，但是這是很大工作量，有興趣的可以嘗試著做下。也可以通過(guò)引入一些第三方的庫(kù)來(lái)做下，比如使用微軟的language-server-protocol 庫(kù)來(lái)實(shí)現(xiàn)自動(dòng)完成功能。
至于語(yǔ)法高亮，一般做法是將所有內(nèi)容填充到標(biāo)簽中并對(duì)其進(jìn)行著色（大多數(shù)其他基于html的編輯器都這樣做），但是這樣會(huì)破壞自動(dòng)刷新和熱加載功能的簡(jiǎn)單性。
你可能還希望處理實(shí)際內(nèi)容，而不僅僅是編輯本身。這個(gè)簡(jiǎn)單，只需在contenteditable body中添加另一個(gè)元素，該操作可以通過(guò)JS腳本實(shí)現(xiàn)該操作。還可以添加更多元素，例如一個(gè)按鈕或者只是通過(guò)修改快速HTML框來(lái)實(shí)現(xiàn)。這些都可以在提供的模版的基礎(chǔ)上按需增加修改。
本文我們?cè)赾ontenteditable屬性的基礎(chǔ)上實(shí)現(xiàn)了，在線Html的編輯器實(shí)現(xiàn)內(nèi)容和樣式的實(shí)時(shí)更新、實(shí)現(xiàn)了JS代碼的熱加載。雖然此在線編輯器還非常簡(jiǎn)陋，但是以此作為一個(gè)想法和基礎(chǔ)"拋磚引玉"，希望大家可以實(shí)現(xiàn)一個(gè)功能完善，更加實(shí)用的在線編輯器。
作這幾個(gè)很常用的CSS3網(wǎng)頁(yè)小效果。最近寫(xiě)JS的時(shí)間比例比較多，不過(guò)我還是比較鐘情于CSS3。所以我還是堅(jiān)持分享一些實(shí)用的CSS3小例子。
正文
第一種效果：
由于錄制gif圖片會(huì)掉幀，所以看起來(lái)不流暢，很卡，但其實(shí)實(shí)際效果還是不錯(cuò)的，有彈性一些。
html代碼：
<span class="shake">彈</span>
css代碼:
.shake{ width:40px; height:40px; display:block; background:lightgreen; border-radius:50%; margin:5px; color:#fff; font-size:24px; text-align:center; line-height:40px; cursor:pointer; -webkit-transition:all 0.25s; }.shake:hover{ -webkit-animation:shake 0.25s; background: lightblue; }@-webkit-keyframes shake{ 0%,10%,55%,90%,94%,98%,100%{ -webkit-transform:scale(1,1); } 30%{ -webkit-transform:scale(1.14,0.86); } 75%{ -webkit-transform:scale(0.92,1.08); } 92%{ -webkit-transform:scale(1.04,0.96); } 96%{ -webkit-transform:scale(1.02,0.98); } 99%{ -webkit-transform:scale(1.01,0.99); }}昨晚看到某人的個(gè)人博客網(wǎng)站的回到頂部按鈕懸浮效果就是這樣子的，還是比較有趣的，不過(guò)人家的效果可能比我的好一些，大家不妨試一下。
第二種效果：
這種效果其實(shí)目前線上很多網(wǎng)站都在用了，不管是使用CSS3，還是jQuery，都是可以實(shí)現(xiàn)的。那這里我只是簡(jiǎn)單地使用CSS3來(lái)實(shí)現(xiàn)。
html代碼：
<input class="search" type="text" placeholder="搜索...">
CSS代碼：
.search{ width:80px; height:40px; border-radius:40px; border:2px solid lightblue; position: absolute; right:200px; outline:none; text-indent:12px; color:#666; font-size:16px; padding:0; -webkit-transition:width 0.5s; }.search:focus{ width:200px; }一般旁邊都會(huì)有一個(gè)按鈕，這里我就不做了。
第三種效果：
這種效果也是很常用，比較多還是個(gè)人網(wǎng)站偏多。
html代碼：
<div class="banner"> <a href="javascript：;">博</a> <span>這是我的個(gè)人博客</span></div>
css代碼:
.banner{ width:234px; height:34px; border-radius:34px; position:absolute; top:400px; left:200px; }.banner a{ display:inline-block; width:30px; height:30px; line-height:30px; border-radius:50%; border:2px solid lightblue; position:absolute; left:0px;top:0px; background:lightgreen; color:#fff; text-align:center; text-decoration:none; cursor:pointer; z-index:2; }.banner a:hover + span{ -webkit-transform:rotate(360deg); opacity:1; }.banner span{ display:inline-block; width:auto; padding:0 20px; height:34px; line-height:34px; background:lightblue; border-radius:34px; text-align: center; position:absolute; color:#fff; text-indent:25px; opacity:0; -webkit-transform-origin:8% center; -webkit-transition:all 1s; }限時(shí)!！免費(fèi)送Dreamweaver、js等前端教程
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
