PC端網站開發總結-css方面

時間 2019-11-17

標籤網站開發總結 css 方面欄目網站開發简体版

原文原文鏈接

作了兩個PC端網站【都是公司官網，兼容主流瀏覽器】。

圖片循環輪播

由於不想引入swiper，以爲不必，就本身寫了個。javascript

首先聲明這裏沒有使用transform:translate3d()，圖片數量也沒有增長，一共6張。css

實現方式：html

點擊下一張時java

var $lastLi = $('.show-photo li').first() //獲取第一個li節點
var liHtml = '<li>' + $('.show-photo li').first().html() + '</li>' 
$(".show-photo ul").append(liHtml) //將第一個li節點內容append到最後去，這裏對界面不會產生影響，
由於ul寬度很大，目的是爲了讓全部的li在同一水平上。注意這裏重複了第一張圖片
var selected = $('.show-photo li.active') 
selected.removeClass('active').addClass('leaderSkrinkImg').siblings().removeClass('leaderSkrinkImg') //給正在active的img加一個縮小的動畫
selected.next().removeClass('leaderSkrinkImg').addClass('active') //給將要active的img加放大的動畫
$lastLi.animate({
    marginLeft: '-160px' //讓整個ul的內容向左滑動
}, 1000,function(){
    $lastLi.remove() //這裏必須動畫完了以後才能夠執行，不然會影響向左滑動。向左滑動動畫完成後，將多餘的li移除掉
})
複製代碼

點擊上一張時css3

var liHtml = '<li style="margin-left:-160px">' + $('.show-photo li').last().html() + '</li>' //這裏優先加了個margin的做用是爲了避免影響佈局
$(".show-photo ul").prepend(liHtml)
var $lastLi = $('.show-photo li').first() //獲取prepend以後的第一個li節點
var selected = $('.show-photo li.active')
selected.removeClass('active').addClass('leaderSkrinkImg').siblings().removeClass('leaderSkrinkImg')
selected.prev().removeClass('leaderSkrinkImg').addClass('active')
$lastLi.animate({
    marginLeft: '0'
}, 1000)
$('.show-photo li').last().remove() //將最後一個重複的li移除
複製代碼

其實最開始是直接先remove節點，而後執行動畫的。猶豫點擊下一張時，第一張圖片會先消失而後再移動，感受怪怪的，因此改爲先執行動畫，再移除節點。segmentfault

關於swiper插件圖片自動循環輪播原理解讀

待寫瀏覽器

關於插件chromagallery.js全屏預覽圖片畫廊原理解讀

待寫app

使用hover出現的問題

須要實現的效果是：hover龍貓的這張圖片，紅塊從左邊出來而後鼠標停留在紅塊上能夠點擊跳轉，鼠標離開紅塊，紅塊再消失wordpress

出現的問題如圖：hover龍貓這張圖片紅塊的確會出現，可是鼠標無法停留，只有鼠標離開龍貓區域紅塊就消失了。函數

解決方案：給紅塊加個hover態，hover在紅塊上時，使得紅塊一直是出現的狀態。在這裏是使其left值爲0。

至於其餘的動畫都是使用css3的幾個動畫屬性來操做的，這裏想對着幾個動畫屬性作個知識總結。

animation

CSS動畫：animation、transition、transform、translate傻傻分不清

CSS3 animation屬性中的steps功能符深刻介紹

animation中的steps()逐幀動畫

transform

transition

查看兩篇文章，以爲寫的很全了，就直接拿來記錄下，哈哈

CSS transition 過渡詳解

深刻理解CSS過渡transition

幾個不足：

須要事件觸發，因此無法在網頁加載時自動發生
是一次性的，不能重複發生，除非一再觸發
只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態

瀏覽器兼容性問題解決方案 · 總結

仍是借鑑別人的，平時沒總結，好尷尬

juejin.im/post/59a3f2…

那些年咱們常常遇到的瀏覽器兼容性問題

函數節流和函數去抖

鼠標滾輪事件有用到

參考輕鬆理解JS函數節流和函數防抖

使用正則表達進行模板渲染

var str=`<div> <p>{{username}}</p> <p>{{pwd}}</p> </div>`
var data = { username: 'haha',pwd: 123 }
//將data中的數據替換到str字符串中
//解決方案
var render = function(str,data){
    return str.replace(/{{([\w]+)}}/g,function(all,key){
        return data[key]
})
}
//最終結果是：
str = `<div> <p>haha</p> <p>123</p> </div>`複製代碼