HTML滑屏操作所需知识点

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>

作者：一个普通的天才

HTML滑屏操作所需知识点

猜你喜欢