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>`复制代码