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

Shania發表於2018-11-22
網站CSS
做了兩個PC端網站【都是公司官網，相容主流瀏覽器】。

圖片迴圈輪播

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

因為不想引入swiper，覺得沒必要，就自己寫了個。

首先宣告這裡沒有使用transform:translate3d()，圖片數量也沒有增加，一共6張。

實現方式：

點選下一張時

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移除掉
})
複製程式碼

點選上一張時

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節點，然後執行動畫的。猶豫點選下一張時，第一張圖片會先消失然後再移動，感覺怪怪的，所以改成先執行動畫，再移除節點。

關於swiper外掛圖片自動迴圈輪播原理解讀

待寫

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

待寫

使用hover出現的問題

需要實現的效果是：hover龍貓的這張圖片，紅塊從左邊出來然後滑鼠停留在紅塊上可以點選跳轉，滑鼠離開紅塊，紅塊再消失

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

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

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


至於其他的動畫都是使用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>`複製程式碼

總結過程中查閱到別人的經驗與總結，哈哈，拿來記錄下~



相關文章