整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
務8：全屏模式的切換。
這張就是第八，第八小姐就是講關(guān)于全屏模式的切換。回到頁面，希望有個按鈕，一點全屏娛樂模式，這一點就切換回來。可能我個人不太喜歡這種模式，但有的人會用，還是把它設計進去。
然后就在這個地方加一個圖標，有空再找一下。找了一個圖標，就找這個。jump through screen one，這有了嗎？有了，還挺好。然后就稍小了一點，再給它大一點，size，就不要說是二十，可以。點它，現(xiàn)在沒效果，來做這個效果。
首先給它定一個變量叫is war screen，是不是全屏的？它肯定是響應數(shù)據(jù)了，i e f，它不是默認，當然響應數(shù)據(jù)這邊可以給它添類型，比如它是birch，填birch。如果它不是，還找一個相對的，跟它相反的按鈕，收回來的按鈕，就用這個。
off for screen one，就這個，給它來復制一下，把它放松，就是衣服regan in the first three，如果它真的，就顯示上面的，否則就顯示下面的。來看一下，這邊有一個方法，就這樣可以，可能還做其他的，記得就給它定一個top切換螺絲功能，它是一個，然后再調(diào)整這個方法就行了。
就要投screen，點，沒效果，為啥沒效果？是不是點錯了？這邊點這上面，再說下面一個，放到槍上，點，看有切換效果了。怎么樣給它切換？這個是節(jié)食里面固定的方法，如果它的值，直接給它切換，就是document，the element，點a request，press greet plug，就是全屏切換。
這里切換了，這點沒效果只按a xe，所以這邊也不對，所以希望它變成這個時候就把它縮回來，這邊就要做一個判斷了，就是來判斷它是不是已經(jīng)縮放了，如果它已經(jīng)是展開了，就把它縮回來，也是，這個就退出，否則就把它刪遠，就簡單的刪遠，刪除就可以了。
試一下，點，點，回來了，點，點，再配合原來的一點，就全屏顯示了，舒服了，點回來。這一章就講完了，就把頁面布局都弄好了，包括動態(tài)生成菜單頁，瀏覽歷史頁，面包穴導航，把整個布局就全做好了。
下一張開始做具體業(yè)務了，首先叫做用戶的登錄，注冊新用戶，還有一個重置密碼。這節(jié)課就講到這里，拜拜。
了點時間寫的，蠻長時間了。個人很喜歡，一段很簡單的代碼，卻能夠?qū)崿F(xiàn)很多功能。（因為代碼文字呈現(xiàn)沒有格式，難以閱讀，以后小編提供的代碼都以截圖方式呈現(xiàn)，底部有源碼鏈接）。
到底多簡單，先來看代碼
基于jQuery
基于jQuery
拖拽實例圖：
拖拽實例圖
將代碼剝離，只要寫5行就可以實現(xiàn)拖拽了，是不是很簡單：
調(diào)用方式
放大、縮小
我們給拖拽增加點功能，支持放大、縮小，先看實例圖:
放大、縮小
將代碼剝離，原先的代碼保留不變，增加一個綁定事件：
放大、縮小
這樣來實現(xiàn)放大、縮小、拖拽是不是很簡單，還能實現(xiàn)很多其他效果，大家慢慢領悟。
原理分析：
放大、縮小、拖拽都離不開在網(wǎng)頁上拖動鼠標，對于前端來說就是 document 的 mousemove，當鼠標在網(wǎng)頁上移動的時候，無時無刻不在觸發(fā) mousemove 事件，當鼠標觸發(fā)事件時，什么時候需要執(zhí)行我們特定的操作，這就是我們要做的了。我在 mousemove 中增加了幾個對象來判定是否進行操作：
move：是否執(zhí)行觸發(fā)操作
move_target：操作的元素對象
move_target.posix：操作對象的坐標
call_down：mousemove的時候的回調(diào)函數(shù)，傳回來的this指向document
call_up：當鼠標彈起的時候執(zhí)行的回調(diào)函數(shù)，傳回來的this指向document
小提示：
簡單的操作，只需要設定 move_target 對象，設置 move_target 的時候不要忘記了 move_target.posix 哦；
復雜的操作可以通過call_down、call_up進行回調(diào)操作，這個時候是可以不用設置 move_target 對象的
深入研究
拖拽和放大、縮小實現(xiàn)了，但是有個問題，當我們鼠標點擊并滑動的時候，是會選中文本的，為了避免這個問題，大家可以自行百度
css 阻止文本選中
css 阻止文本選中
網(wǎng)頁的放大、縮小、拖拽事件就研究到這里了，小編不再對如何拓展進行深入講解，一切靠大家自行研究，權(quán)當課后作業(yè)了。～～
源碼鏈接地址：
http://orzcss.com/posts/d554a392/
本文內(nèi)容均屬個人原創(chuàng)作品，轉(zhuǎn)載此文章須附上出處及原文鏈接。
加關(guān)注，定時推送，互動精彩多，若你有更好的見解，歡迎留言探討！
在越來越多用到HTML5,用HTML做的頁面很炫，有些功能也很容易實現(xiàn)了。比如HTML5實現(xiàn)視頻音頻播放。
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。
當前，video 元素支持三種視頻格式：
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>視頻播放</title>
</head>
<body>
<div style="text-align:center;">
<button onclick="playPause()">播放/暫停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="/項目名字/upload/Video_1509549323159.mp4" type="video/mp4" />
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
//播放暫停
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
//視頻放大
function makeBig()
{
myVideo.width=560;
}
//視頻中等
function makeSmall()
{
myVideo.width=320;
}
//視頻縮小
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
