H5前端開發筆記(一)

2021-07-02 22:10:44 字數 2439 閱讀 5727

用於首頁火柴效果與雲彩效果

經測驗css3的寫法可以完美實現幀動畫,儘管ie8及以下不支援,而使用jquery會有明顯的卡頓。

@-webkit-keyframes fire 

5% 10%

15%

20%

25%

30%

35%

40%

45%

50%

55%

60%

65%

70%

75%

80%

84%

88%

92%

96%

100%

}.fire

定義了大量的絕對定位的雲彩div,然後每乙個讓其原地緩慢旋轉。

@-webkit-keyframes cloud

to}

如果是不支援animation的低版本ie,則採用簡單的jquery動畫實現線性移動。

$("#cloud1").animate(, 5000);

$("#cloud1").animate(, 5000);

$(function

() else

if(t1>=0)

else

if(t2>=0)

else

}setinterval(gettime,1000);

});

js**:

$(document).ready(function

(e) ,2000);

不需要自動滾動,去掉即可***/

linum = $('.mainlist li').length;//數量

w = linum * 198;//ul寬度

$('.piclist').css('width', w + 'px');//ul寬度

$('.swaplist').html($('.mainlist').html());//複製內容

$('.og_next').click(function

() if($('.mainlist li').length>5));//交換放在顯示區域右側

$('.mainlist').animate(,'slow');//預設滾動

if(ml==(w-990)*-1),'slow');//交換滾動}}

else)//預設放在顯示區域右

$('.swaplist').animate(,'slow');//交換滾動

if(sl==(w-990)*-1),'slow');//預設滾動}}

}})

$('.og_prev').click(function

() if($('.mainlist li').length>5));

$('.mainlist').animate(,'slow');

if(ml==0),'slow');}}

else);

$('.swaplist').animate(,'slow');

if(sl==0),'slow');}}

}})

});$(document).ready(function

(),function

())})

html:

class="carousel">

class="carousel_title">div>

class="box">

class="picbox">

div>

class="og_prev">div>

class="og_next">div>

div>

div>

關於觸屏滑動的解決方案,最便捷的是zepto,除此外還有乙個外掛程式叫做touchswipe。成熟卻臃腫的jquery mobile只支援左右滑動。

這裡採用了外掛程式:

callback:function()

});}

替換:

$("#q1_b>img").attr("src","");

螢幕翻頁:

settimeout("$('.section').animate(,600)",200,'linear');

當運用css3完成動畫時,可通過js呼叫不同的class來完成事件觸發。

(1)不影響清晰度的前提下盡量壓縮、.css和.js檔案。

(2)將外鏈js的檔案放在**底部延時載入,確保頁面結構先載入好再涉及到動效。

(3)儘量減少頁面原有的dom節點數量,通過js動態載入來填充。

(4)在寫頁面時,盡量用更簡潔更「高階」的寫法,減少**量以及切圖量。

H5開發筆記

這兩天h5靜態頁面開發過程中的問題總結。1.viewport 移動開發必須的配置 內容寬為裝置寬度,初始化縮放倍數為1 不縮放 2.rem和px 1 px是相對於顯示器螢幕解析度而言的相對長度單位。2 rem是相對根元素的font size大小的相對單位,可以做到只修改根元素font size大小就...

移動端 h5 開發筆記

1.禁止縮放 禁止快取 2.webkit 定製css 更多參考 webkit touch callout none webkit user select none webkit text size adjust none webkit tap highlight color rgba 0,0,0,1...

開發筆記 微信h5設定分享utils

private static string accesstoken private static long lastaccesstokentime 0 獲取全域性的accesstoken public static synchronized string getpublicaccesstoken r...