1、padding属性
. padding是内边距的意思,相对于margin外边距。我们用CSS的 padding 属性定义元素边框与元素内容之间的空白区域。
padding 接受长度值或百分比值,但不允许使用负值。示例:如果希望所有内边距都是10 像素,只需要设置:padding:10px; 就可以了。 也可以分别设置4个边的内边距,只需通过它们的单独属性,分别设置上、右、下、左内边距: padding-toppadding-,right,padding-bottom,padding-left,简写就是:padding:1px 2px 3px 4px; (上右下左),此写法符合标准,推荐使用。margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)。
2、overflow 属性
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
3、touch-action 属性
auto:当触控事件发生在元素上时,由浏览器来决定进行哪些操作,比如对viewport进行平滑、缩放等。
none:当触控事件发生在元素上时,不进行任何操作。
4、transition属性
例子:
https://images2015.cnblogs.com/blog/946317/201608/946317-20160802233807075-749236437.png
transition:height 2s;
div:hover
{
height:900px;
}
5、attr方法;
$(selector).attr(attribute,value)
attribute 规定属性的名称。
value 规定属性的值。
6、鼠标滚轮插件:
$(’#my_elem’).on(‘mousewheel’, function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
deltaX:值为负的(-1),则表示滚轮向左滚动。值为正的(1),则表示滚轮向右滚动。
deltaY:值为负的(-1),则表示滚轮向下滚动。值为正的(1),则表示滚轮向上滚动。
deltaFactor:增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。
currentPage:当前页面;
7、transform属性:
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translate() 属性:方法转换画布的用户坐标系统。
translate(x,y)函数是将整个canvas水平移动x距离,垂直移动y距离。
canvas是以(0,0)为默认原点,其原点默认在屏幕左上角;通过translate(x,y)把点(x,y)作为原点。
需要注意的是:是在原点的基础上分别偏移x和y。
例子:原点假如落在(1,1),那么translate(10,10)就是在原点(1,1)基础上分别在x轴、y轴移动10,则原点变(11,11)。
参考代码:
style:
<style>
.wrapper {
height: 100%;
touch-action: none;
transition: all 3000ms ease;
}
.page {
height: 100%;
width: 100%;
}
.page0 {
background: #551A8B;
}
.page1 {
background: #FF8247;
}
.page2 {
background: #CD919E;
}
.page3 {
background: #98FB98;
}
</style>
<script type="text/javascript">
$(function() {
$('.container').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
var currentPage = parseInt($('.active').attr('data-page'));
if (event.deltaY > 0) { //鼠标上移动
var prevpage = currentPage - 1;
if (prevpage >=0) {
$('.page' + prevpage).addClass('active');
$('.page' + currentPage).removeClass('active');
$('.wrapper').css({
'transform': 'translate(0,' + (prevpage * 100) + '%)'
});
}
} if (prevpage <0) { //鼠标上移动
var nextpage = currentPage + 1;
if (nextpage < 4) {
$('.page' + nextpage).addClass('active');
$('.page' + currentPage).removeClass('active');
$('.wrapper').css({
'transform': 'translate(0,' + (nextpage * -100) + '%)'
});
}
}
});
});
</script>
作者:一个普通的天才