欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JS實現(xiàn)動態(tài)跟隨特效的示例代碼

 更新時間：2022年06月20日 08:18:26   作者：肥學  
這篇文章主要介紹了如何利用JavaScript實現(xiàn)動態(tài)跟隨特效，文中的示例代碼講解詳細，對我們學習JS有一定的幫助，感興趣的小伙伴可以了解一下

演示

技術(shù)棧

這次用到了關(guān)于css的一些功能，和jQuery。

CSS3中添加的新屬性animation是用來為元素實現(xiàn)動畫效果的，但是animation無法單獨擔當起實現(xiàn)動畫的效果。承載動畫的另一個屬性——@keyframes。使用的時候為了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前綴以適應不同的瀏覽器。

創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

通過 @keyframes 規(guī)則，您能夠創(chuàng)建動畫。

@keyframes定義一個動畫，并定義具體的動畫效果，比如是放大還是位移等等。

@keyframes 它定義的動畫并不直接執(zhí)行，需要借助animation來運轉(zhuǎn)。

在動畫過程中，您能夠多次改變這套 CSS 樣式。

以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 “from” 和 “to”，等價于 0% 和 100%。

源碼

css部分

.container{
	text-align:center;
	perspective:500px;
	-webkit-perspective:500px;
	border: 1px solid;
}
.example{
	display:table-cell;
	vertical-align:middle;
	color: #fff;
	width: 150px;
	height: 150px;
	background:url(../images/01.jpg) no-repeat;
}

@-webkit-keyframes topenter {
    from {
        -webkit-transform-origin:top;
        -webkit-transform:rotateX(-90deg);
    }
    to {
        -webkit-transform-origin:top;
        -webkit-transform:rotateX(0deg);
    }
}
@keyframes topenter {
    from {
        transform-origin:top;
        transform:rotateX(-90deg);
    }
    to {
        transform-origin:top;
        transform:rotateX(0deg);
    }
}
@-webkit-keyframes topleave {
    from {
        -webkit-transform-origin:top;
        -webkit-transform:rotateX(0deg);
    }
    to {
        -webkit-transform-origin:top;
        -webkit-transform:rotateX(-90deg);
    }
}
@keyframes topleave {
    from {
        transform-origin:top;
        transform:rotateX(0deg);
    }
    to {
        transform-origin:top;
        transform:rotateX(-90deg);
    }
}
@-webkit-keyframes bottomenter {
    from {
        -webkit-transform-origin:bottom;
        -webkit-transform:rotateX(90deg);
    }
    to {
        -webkit-transform-origin:bottom;
        -webkit-transform:rotateX(0deg);
    }
}
@keyframes bottomenter {
    from {
        transform-origin:bottom;
        transform:rotateX(90deg);
    }
    to {
        transform-origin:bottom;
        transform:rotateX(0deg);
    }
}
@-webkit-keyframes bottomleave {
    from {
        -webkit-transform-origin:bottom;
        -webkit-transform:rotateX(0deg);
    }
    to {
        -webkit-transform-origin:bottom;
        -webkit-transform:rotateX(90deg);
    }
}
@keyframes bottomleave {
    from {
        transform-origin:bottom;
        transform:rotateX(0deg);
    }
    to {
        transform-origin:bottom;
        transform:rotateX(90deg);
    }
}
@-webkit-keyframes leftenter {
    from {
        -webkit-transform-origin:left;
        -webkit-transform:rotateY(90deg);
    }
    to {
        -webkit-transform-origin:left;
        -webkit-transform:rotateY(0deg);
    }
}
@keyframes leftenter {
    from {
        transform-origin:left;
        transform:rotateY(90deg);
    }
    to {
        transform-origin:left;
        transform:rotateY(0deg);
    }
}
@-webkit-keyframes leftleave {
    from {
        -webkit-transform-origin:left;
        -webkit-transform:rotateY(0deg);
    }
    to {
        -webkit-transform-origin:left;
        -webkit-transform:rotateY(90deg);
    }
}
@keyframes leftleave {
    from {
        transform-origin:left;
        transform:rotateY(0deg);
    }
    to {
        transform-origin:left;
        transform:rotateY(90deg);
    }
}
@-webkit-keyframes rightenter {
    from {
        -webkit-transform-origin:right;
        -webkit-transform:rotateY(-90deg);
    }
    to {
        -webkit-transform-origin:right;
        -webkit-transform:rotateY(0deg);
    }
}
@keyframes rightenter {
    from {
        transform-origin:right;
        transform:rotateY(-90deg);
    }
    to {
        transform-origin:right;
        transform:rotateY(0deg);
    }
}
@-webkit-keyframes rightleave {
    from {
        -webkit-transform-origin:right;
        -webkit-transform:rotateY(0deg);
    }
    to {
        -webkit-transform-origin:right;
        -webkit-transform:rotateY(-90deg);
    }
}
@keyframes rightleave {
    from {
        transform-origin:right;
        transform:rotateY(0deg);
    }
    to {
        transform-origin:right;
        transform:rotateY(-90deg);
    }
}

js部分

$(function () {
     //initialize
     $('.container').css({
         'perspective-origin': '50% 0%',
         '-webkit-perspective-origin': '50% 0%'
     });
     $('.container .example').css({
         'animation': 'topleave 400ms forwards',
         '-webkit-animation': 'topleave 400ms forwards'
     });

     $('.container').bind('mouseenter mouseleave', function (e) {
         var dir = getDirection($(this), e),
             enter = e.type === 'mouseenter',
             topPerspectiveOrigin = {
                 'perspective-origin': '50% 0%',
                 '-webkit-perspective-origin': '50% 0%'
             },
             rightPerspectiveOrigin = {
                 'perspective-origin': '100% 50%',
                 '-webkit-perspective-origin': '100% 50%'
             },
             bottomPerspectiveOrigin = {
                 'perspective-origin': '50% 100%',
                 '-webkit-perspective-origin': '50% 100%'
             },
             leftPerspectiveOrigin = {
                 'perspective-origin': '0% 50%',
                 '-webkit-perspective-origin': '0% 50%'
             },
             $target = $(this).find('.example');
         switch (dir) {
             case 0:
                 if (enter) {
                     $(this).css(topPerspectiveOrigin);
                     $target.css({
                         'animation': 'topenter 400ms forwards',
                         '-webkit-animation': 'topenter 400ms forwards'
                     });
                 } else {
                     $(this).css(topPerspectiveOrigin);
                     $target.css({
                         'animation': 'topleave 400ms forwards',
                         '-webkit-animation': 'topleave 400ms forwards'
                     });
                 };
                 break;
             case 1:
                 if (enter) {
                     $(this).css(rightPerspectiveOrigin);
                     $target.css({
                         'animation': 'rightenter 400ms forwards',
                         '-webkit-animation': 'rightenter 400ms forwards'
                     });
                 } else {
                     $(this).css(rightPerspectiveOrigin);
                     $target.css({
                         'animation': 'rightleave 400ms forwards',
                         '-webkit-animation': 'rightleave 400ms forwards'
                     });
                 };
                 break;
             case 2:
                 if (enter) {
                     $(this).css(bottomPerspectiveOrigin);
                     $target.css({
                         'animation': 'bottomenter 400ms forwards',
                         '-webkit-animation': 'bottomenter 400ms forwards'
                     });
                 } else {
                     $(this).css(bottomPerspectiveOrigin);
                     $target.css({
                         'animation': 'bottomleave 400ms forwards',
                         '-webkit-animation': 'bottomleave 400ms forwards'
                     });
                 };
                 break;
             case 3:
                 if (enter) {
                     $(this).css(leftPerspectiveOrigin);
                     $target.css({
                         'animation': 'leftenter 400ms forwards',
                         '-webkit-animation': 'leftenter 400ms forwards'
                     });
                 } else {
                     $(this).css(leftPerspectiveOrigin);
                     $target.css({
                         'animation': 'leftleave 400ms forwards',
                         '-webkit-animation': 'leftleave 400ms forwards'
                     });
                 };
                 break;
         }

     });
 })

 function getDirection($element, event) {
     var w = $element.width(),
         h = $element.height(),
         x = (event.pageX - $element.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
         y = (event.pageY - $element.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
         direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
     return direction;
 }

到此這篇關(guān)于基于JS實現(xiàn)動態(tài)跟隨特效的示例代碼的文章就介紹到這了,更多相關(guān)JS動態(tài)跟隨特效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論