可以設(shè)置cookie（可以加載一個(gè)cookie.min.js，使用起來非常方便）。就是當(dāng)?shù)谝淮芜M(jìn)入頁面的時(shí)候，先去讀取該cookie，如果存在，說明之前已經(jīng)做了更改，把cookie值稍作處理就可以完成初始化了（記得當(dāng)初始化完成后刪除該cookie），如果cookie不存在說明還沒有做過更改。
目前創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、水磨溝網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
HTML5手機(jī)上下滑動(dòng)翻頁特效是一款手機(jī)移動(dòng)端觸屏滑動(dòng)效果實(shí)現(xiàn)完整代碼如下：
1、html5頁面代碼
!DOCTYPE html
htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleHTML5手機(jī)頁面觸屏滑動(dòng)上下翻頁特效/title
meta charset="utf-8"
meta name="apple-touch-fullscreen" content="YES"
meta name="format-detection" content="telephone=no"
meta name="apple-mobile-web-app-capable" content="yes"
meta name="apple-mobile-web-app-status-bar-style" content="black"
meta http-equiv="Expires" content="-1"
meta http-equiv="pragram" content="no-cache"
link rel="stylesheet" type="text/css" href="./hamer_files/main.css"
link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css"
script type="text/javascript" src="./hamer_files/offline.js"/script
meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"
/head
body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;"
section class="u-alert"
? img style="display:none;" src="./hamer_files/loading_large.gif"
? div class="alert-loading z-move"
? ? ? div class="cycleWrap" span class="cycle cycle-1"/span
? ? ? ? ? span class="cycle cycle-2"/spanspan class="cycle cycle-3"/spanspan class="cycle cycle-4"/span
? ? ? /div
? ? ? div class="lineWrap" span class="line line-1"/spanspan class="line line-2"/spanspan class="line line-3"/span
? ? ? /div
? /div
/section
section class="u-arrow"
? p class="css_sprite01"/p
/section
section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;"
? div class="translate-back" style="height: 918px;"
? ? ? div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;"
? ? ? ? ? div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? ? ? div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
? ? ? ? ? div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"/div
? ? ? /div
? /div
/section
section class="u-pageLoading"
? img src="./hamer_files/load.gif" alt="loading"
/section
script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"/script
script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"/script
script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"/script
/body/html
2、css代碼：
@charset "utf-8";
.ad_foot li { margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;}
.ad_foot li a {display:block;}
.ad_foot li .l {width:75px; height:75px; float:left; overflow:hidden;}
.ad_foot li .l img {width:75px; width:75px;}
.ad_foot li .r {width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;}
.ad_foot li .r p {color:#999; font-size:1.2em; }
.ad_foot li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
.lazy-img, .lazy-finish{background-color:#f0eded;}
.page-list{font-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}
.ad_foot{padding:15px 15px 0 15px;}
/*聲音播放按鈕*/
#song_img {width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;}
/*底部推薦*/
.ad_list{margin-top:2em;}.ad_list li {width:46%; background:none; padding:0; float:left;margin-bottom: 1em;}
.ad_list li.r {float:right;}.ad_list li a img {width:100%; height:auto;}
.ad_foot h3 {width:100%; height:48px; line-height:48px; background:#F9F5EC;}
.ad_foot h3 a {display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;}
.ad_foot h3 a.active {color:#FFF; background:#FF9240;}
.magazine_1 li {
width:100%;
margin-bottom: 1em;
font-size: 1.8em;
padding: 15px;
background: #FFF;}
.magazine_1 li a {display:block;}
.magazine_1 li .l {width: 75px;
height: 75px;
float: left;
overflow: hidden;}
.magazine_1 li .l img {width:75px; height:75px;}
.magazine_1 li .r {width: 78%;
float: left;
margin-left: 30px;
color: #666;
overflow: hidden;}
.magazine_1 li .r p {
color: #999;
font-size: 1.2em;
.magazine_1 li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
3、運(yùn)行效果如下：
主要思想：
首先要準(zhǔn)備一張有連續(xù)幀的圖片，然后利用HTML5 Canvas的draw方法在不同的時(shí)間間隔繪制不同的幀，這樣看起來就像動(dòng)畫在播放。
關(guān)鍵技術(shù)點(diǎn)：
JavaScript 函數(shù)setTimeout()有兩個(gè)參數(shù)，第一個(gè)是參數(shù)可以傳遞一個(gè)JavaScript方法，
另外一個(gè)參數(shù)代表間隔時(shí)間，單位為毫秒數(shù)。代碼示例：
setTimeout( update, 1000/30);
Canvas的API-drawImage()方法，需要指定全部9個(gè)參數(shù)：
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);
其中offw, offh是指源圖像的起始坐標(biāo)點(diǎn)，width, height表示源圖像的寬與高，x2,y2表
示源圖像在目標(biāo)Canvas上的起始坐標(biāo)點(diǎn)。
!DOCTYPE?html?
html?
head?
meta?http-equiv="X-UA-Compatible"?content="chrome=IE8"?
meta?http-equiv="Content-type"?content="text/html;charset=UTF-8"?
titleCanvas?Mouse?Event?Demo/title?
link?href="default.css"?rel="stylesheet"?/?
script?
var?ctx?=?null;?//?global?variable?2d?context?
var?started?=?false;?
var?mText_canvas?=?null;?
var?x?=?0,?y?=0;?
var?frame?=?0;?//?22?5*5?+?2?
var?imageReady?=?false;?
var?myImage?=?null;?
var?px?=?300;?
var?py?=?300;?
var?x2?=?300;?
var?y2?=?0;?
window.onload?=?function()?{?
var?canvas?=?document.getElementById("animation_canvas");?
console.log(canvas.parentNode.clientWidth);?
canvas.width?=?canvas.parentNode.clientWidth;?
canvas.height?=?canvas.parentNode.clientHeight;?
if?(!canvas.getContext)?{?
console.log("Canvas?not?supported.?Please?install?a?HTML5?compatible?browser.");?
return;?
}?
//?get?2D?context?of?canvas?and?draw?rectangel?
ctx?=?canvas.getContext("2d");?
ctx.fillStyle="black";?
ctx.fillRect(0,?0,?canvas.width,?canvas.height);?
myImage?=?document.createElement('img');?
myImage.src?=?"../robin.png";?
myImage.onload?=?loaded();?
}?
function?loaded()?{?
imageReady?=?true;?
setTimeout(?update,?1000/30);?
}?
function?redraw()?{?
ctx.clearRect(0,?0,?460,?460)?
ctx.fillStyle="black";?
ctx.fillRect(0,?0,?460,?460);?
//?find?the?index?of?frames?in?image?
var?height?=?myImage.naturalHeight/5;?
var?width?=?myImage.naturalWidth/5;?
var?row?=?Math.floor(frame?/?5);?
var?col?=?frame?-?row?*?5;?
var?offw?=?col?*?width;?
var?offh?=?row?*?height;?
//?first?robin?
px?=?px?-?5;?
py?=?py?-?5;?
if(px??-50)?{?
px?=?300;?
}?
if(py??-50)?{?
py?=?300;?
}?
//var?rate?=?(frame+1)?/22;?
//var?rw?=?Math.floor(rate?*?width);?
//var?rh?=?Math.floor(rate?*?height);?
ctx.drawImage(myImage,?offw,?offh,?width,?height,?px,?py,?width,?height);?
//?second?robin?
x2?=?x2?-?5;?
y2?=?y2?+?5;?
if(x2??-50)?{?
x2?=?300;?
y2?=?0;?
}?
ctx.drawImage(myImage,?offw,?offh,?width,?height,?x2,?y2,?width,?height);?
}?
function?update()?{?
redraw();?
frame++;?
if?(frame?=?22)?frame?=?0;?
setTimeout(?update,?1000/30);?
}?
/script?
/head?
body?
h1HTML?Canvas?Animations?Demo?-?By?Gloomy?Fish/h1?
prePlay?Animations/pre?
div?id="my_painter"?
canvas?id="animation_canvas"/canvas?
/div?
/body?
/html
5.背景音樂音效
H5頁面要炫酷，畫面生動(dòng)還是不夠的，一定要配合生動(dòng)的音樂。因此可以主動(dòng)跟設(shè)計(jì)或產(chǎn)品溝通，讓他們可以提供音樂資源，分分鐘導(dǎo)致UV猛漲有木有!當(dāng)然，有了音樂，前端也不是直接引用的，還是有點(diǎn)要求：
1.音樂不宜過長(zhǎng)，30s為佳，而且音樂要加上漸現(xiàn)漸隱效果，方便循環(huán)播放;
2.音樂體積要小，音質(zhì)和流量，在手機(jī)上還是優(yōu)先考慮流量吧。
一般背景音樂體積可以接受的范圍是200K以下，若太大，可以使用格式工廠等軟件，降低它的比特率和聲道來改變體積。接著，只需要簡(jiǎn)單引用。這里有個(gè)問題，IOS是不能自動(dòng)播放音樂的，一定要觸發(fā)一個(gè)用戶交互事件，例如點(diǎn)擊。
但是有一種hack的方法可以讓IOS微信側(cè)頁面自動(dòng)播放(SAFARI依舊無效)：通過new一張圖片，監(jiān)聽一張圖片的onload事件，結(jié)束后回調(diào)執(zhí)行音頻播放audio.play()即可，原理估計(jì)是動(dòng)了dom結(jié)構(gòu)，相當(dāng)于執(zhí)行了一次交互。(有人也用過createEvent模擬，原理也是動(dòng)了dom。)因此，記得暴露一個(gè)音樂關(guān)閉/打開的按鈕，不然肯定被用戶罵死。
6.有趣的loading
Loading頁還是要有的，萬一用戶網(wǎng)速慢呢?以上做了那么多事，如果沒有資源加載都是玩不來的，因此還需要一個(gè)loading的支持。一般情況下頁面體積大于3m則要加上loading頁。然而loading還是可以做得很有趣的，一般的做法是：
1.引入品牌，例如APP宣傳頁;
2.引入有趣動(dòng)畫，放一個(gè)賤賤的人物跳舞給你看;
3.一切從簡(jiǎn)，用CSS3簡(jiǎn)單動(dòng)畫。
當(dāng)然，真正要做到高效制作動(dòng)態(tài)H5頁面，還是靠積累，因此平時(shí)做好的細(xì)節(jié)動(dòng)畫自己都積累起來，下次分分鐘就能用得上。
1.touchstart、touchmove、touchend可以實(shí)現(xiàn)拖動(dòng)元素2.但是拖動(dòng)元素需要當(dāng)前手指的坐標(biāo)值我們可以使用targetTouchest[0]里面的pageX和pageY
3.移動(dòng)端拖動(dòng)的原理：手指移動(dòng)中，計(jì)算出手指移動(dòng)的距離。然后用盒子原來的位置+手指移動(dòng)的距離
4.手指移動(dòng)的距離：手指滑動(dòng)中的位置減去手指剛開始觸摸的位置拖動(dòng)元素三步曲：
（1）觸摸元素touchstart：獲取手指初始坐標(biāo)，同時(shí)獲得盒子原來的位置
（2）移動(dòng)手指touchmove：計(jì)算手播的滑動(dòng)距離，并且移動(dòng)盒子
（3）離開手指touchend：
注意：手指移動(dòng)也會(huì)觸發(fā)滾動(dòng)屏幕所以這里要阻止默認(rèn)的屏幕滾動(dòng)e.preventDefault（）；
1.常用插件
（1）fastclick解決300ms延遲
(2)Swipper
(3)superslide
(4)iscroll
(5)zy.media.js視頻插件
2.插件使用
（1）引入js插件文件；
（2）按照規(guī)定語法使用；
classList屬性是HTML5新增的一個(gè)屬性，返回元素的類名，但是ie10以上版本支持。
該屬性用于在元素中添加，移除及切換CSS類。有以下方法
移動(dòng)端click事件會(huì)有300ms的延時(shí)，原因是移動(dòng)端屏幕雙擊會(huì)縮放（double tap to zoom）頁面。
解決方案：
（1）禁用縮放，瀏覽器禁用默認(rèn)的雙擊縮放行為并且去掉300ms的點(diǎn)擊延遲；
（2）利用touch事件自己封裝這個(gè)事件解決300ms延遲。
原理就是：
1.當(dāng)我們手指觸摸屏幕，記錄當(dāng)前觸摸時(shí)間
2.當(dāng)我們手指離開屏幕，用離開的時(shí)間減去觸摸的時(shí)間
3.如果時(shí)間小于150ms，并且沒有滑動(dòng)過屏幕，那么我們就定義為點(diǎn)擊
（3）使用插件。fastclick 插件解決300ms延遲
框架，顧名思義就是一套架構(gòu)，它會(huì)基于自身的特點(diǎn)向用戶提供套較為完整的解決方案?？蚣艿目刂茩?quán)在框架本身，使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開發(fā)。
前端常用的框架有Bootstrap、Vue、Angular等。
Bootstrap是一個(gè)簡(jiǎn)潔、直觀、強(qiáng)保的前端開發(fā)框架，它讓web 開發(fā)更迅速、簡(jiǎn)單。
它能開發(fā)PC端，也能開發(fā)移動(dòng)端
BootstrapJS插件使用步驟：
1.引入相關(guān)s文件
2.復(fù)制HTML結(jié)構(gòu)
3.修改對(duì)應(yīng)樣式
4.修改相應(yīng)JS參數(shù)
MUI是一個(gè)專門用于做手機(jī)APP的前端框架。
MUI的UI設(shè)計(jì)理念是：以IOS為基礎(chǔ)，補(bǔ)充Android平臺(tái)特有的控件。因此MUI封裝的控件，UI上更符合app的體驗(yàn)。
對(duì) SVG 圖進(jìn)行縮放和平移的最簡(jiǎn)單方法是使用瀏覽器自帶的縮放和滾動(dòng)功能。在 Internet Explorer 9 中，下表描述了與縮放相關(guān)的鼠標(biāo)和鍵盤快捷方式。 用戶操作 鍵盤快捷鍵 鼠標(biāo)快捷鍵 放...
重慶分公司
重慶分公司
