圖片遮罩翻轉(zhuǎn)

shaonbean 發(fā)布于2019-08-22 16:21 / 590人閱讀

摘要：效果展示代碼。代碼以一個(gè)為單位，在其周圍生成個(gè)相同的遮罩。主要是的動畫不支持翻轉(zhuǎn)，只能通過來做，需要以邊為單位翻轉(zhuǎn)。當(dāng)所有關(guān)聯(lián)起來的時(shí)時(shí)候，記錄上一個(gè)翻轉(zhuǎn)方向，達(dá)到連貫性不觸發(fā)獲得相對于中心點(diǎn)的，坐標(biāo)獲得斜率到之間的數(shù)

html代碼。

css代碼。

.hf-reversal .hf-item .hf-cover.hf-hover{
    transform: rotate(0deg) !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
}

js代碼
以一個(gè)li為單位，在其周圍生成8個(gè)相同的遮罩。
主要是animation的css動畫不支持翻轉(zhuǎn)，只能通過transfrom來做，需要以邊為單位翻轉(zhuǎn)。
當(dāng)所有l(wèi)i關(guān)聯(lián)起來的時(shí)時(shí)候，記錄上一個(gè)翻轉(zhuǎn)方向，達(dá)到連貫性

var initImgCover = function(){
    var directionObj = {
        "top-left":"rotate(-90deg)",
        "left-top":"rotate(90deg)",
        "top-right":"rotate(90deg)",
        "right-top":"rotate(-90deg)",
        "bottom-left":"rotate(90deg)",
        "left-bottom":"rotate(-90deg)",
        "bottom-right":"rotate(-90deg)",
        "right-bottom":"rotate(90deg)"
    };
    function transFormByDirection(element,direction,isEnter){

        var currentCoverName= element.attr("cover-name")||"",item = element.closest("li"),currentCover;
        function transFormCover(defaultName){
            var name = null;
            var arr = ["top","right","bottom","left"];
            for(var i=0;i< arr.length;i++){
                if(element.hasClass(arr[i])){
                    name = direction +"-"+ arr[i];
                    break;
                }
            }

            if(!name || !directionObj[name]){
                name = defaultName;
            }

            element.removeClass("top left right bottom").addClass(direction);
            if(isEnter){
                currentCoverName = name;
                currentCover = item.find(".hf-clone."+currentCoverName);
                currentCover.addClass("hf-hover");

            }else{
                var cssText = item.find(".hf-clone."+name)[0].style.cssText;
                currentCover = item.find(".hf-clone."+currentCoverName);
                currentCover[0].style.cssText = cssText;
                currentCover.removeClass("hf-hover");
                currentCoverName = name;
            }
            element.attr("cover-name",currentCoverName);
        }
        function getDefaultCoverName(defaultName,num){
            var name = defaultName[0],coverName="";
            if(isEnter){
                var  ul = item.closest("ul"),index = item.index() +num,prevItem,prevCoverName;
                if(index >=0 && index < 9 ){
                    prevItem = ul.children("li:eq("+index+")");
                    prevCoverName = prevItem.find(".hf-cover:not(.hf-clone)").attr("cover-name");
                    if(prevCoverName){
                        coverName = direction + "-"+ prevCoverName.split("-")[1];
                    }
                }
            }else{
                coverName = direction + "-"+currentCoverName.split("-")[1];
            }
            if(defaultName.indexOf(coverName)!= -1){
                name = coverName;
            }

            return name;
        }

        switch (direction){
            case "top":
                // -3
                transFormCover( getDefaultCoverName(["top-right","top-left"],-3));
                break;
            case "right":
                // +1
                transFormCover(getDefaultCoverName(["right-bottom","right-top"],1));
                break;
            case "bottom":
                // +3
                transFormCover(getDefaultCoverName(["bottom-left","bottom-right"],3));
                break;
            case "left":
                // -1
                transFormCover(getDefaultCoverName(["left-top","left-bottom"],-1));
                break;
        }

    }

    function initCover(element){
        element.find(".hf-clone").remove();
        var cover = element.find(".hf-cover:not(.hf-clone)");
        $.each(directionObj,function(k,v){
            var clone = cover.clone();
            var obj = {
                "transform-origin":k.replace("-"," "),
                "transform":v,
                "display":"block"
            };
            clone.removeAttr("cover-name").addClass("hf-clone").addClass(k).css(obj).appendTo(element);
        });
    }

    $(".hf-reversal .hf-item").bind({
        "pointerenter":function(e){
            var chromePointerEvents = typeof PointerEvent === "function";
            if (chromePointerEvents) {
                if (e.pointerId === undefined) {
                    return;
                }
                // mouseleave不觸發(fā)
                this.setPointerCapture(e.pointerId);
            }
            var item = $(this), cover = item.find(".hf-cover:not(.hf-clone)");
            initCover(item);
            item.mDirection(e,function(direction){
                transFormByDirection(cover,direction,true);
            })
        },
        "pointerleave":function(e){
            var that = this,item = $(this),cover = item.find(".hf-cover:not(.hf-clone)");
            $(this).mDirection(e,function(direction){
                transFormByDirection(cover,direction,false);
                var chromePointerEvents = typeof PointerEvent === "function";
                if (chromePointerEvents) {
                    if (e.pointerId === undefined) {
                        return;
                    }
                    that.releasePointerCapture(e.pointerId);
                }
            })
        }
    })

}

if (typeof jQuery === "undefined") {
    throw new Error("mDirection JavaScript requires jQuery")
}
+function ($) {
    "use strict";

    var Direction = function(element){
        this.$element = element;
    };

    Direction.DEFAULTS = {

    };

    Direction.prototype.init = function (enterObj,leaveObj) {
        var $this = this
        var $el = this.$element
        $el.addEventListener("mouseenter",function(e){
            var directionNumber = $this.getDirectionNumber(e);
            var funArray = [enterObj.top,enterObj.right,enterObj.bottom,enterObj.left];
            funArray[directionNumber]($el);
        },false);

        $el.addEventListener("mouseleave",function(e){
            var directionNumber = self.main(e);
            var funArray = [leaveObj.top,leaveObj.right,leaveObj.bottom,leaveObj.left];
            funArray[directionNumber]($el);
        },false);
    };

    Direction.prototype.getDirectionNumber = function(e){
        var $el = this.$element
        var width = $el.width()
        var height = $el.height()

        // 獲得相對于中心點(diǎn)的 x，y坐標(biāo)
        var x = (e.pageX - $el.offset().left-( width / 2 )) * (width >height ? (height / width ):1);
        var y = (e.pageY- $el.offset().top -( height / 2 )) * (height >width ? (width / height):1);
        // Math.atan2(y,x) 獲得斜率 -PI 到PI之間的數(shù)
        var number = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4;
        return number;
    }

    Direction.prototype.getDirection = function(e){
        var directionNumber = this.getDirectionNumber(e);
        var direction = "";
        switch (directionNumber)
        {
            case 0 :
                direction =  "top";
                break;
            case 1:
                direction = "right";
                break;
            case 2:
                direction =  "bottom";
                break;
            case 3:
                direction =  "left";
                break;
        }
        return direction;
    }


    $.fn.mDirection   = function(e,callback){
        var $element = this;
        var mDirection = new Direction($element);
        if(callback){
            callback.call($element,mDirection.getDirection(e));
        }else{
            return mDirection.getDirection(e);
        }
    };
    
    $.fn.mDirection.Constructor =  function(element,enterObj,leaveObj){
        var $element = $(element);
        var mDirection = new Direction($element);
        mDirection.init(enterObj,leaveObj)
    }


}(jQuery);

云服務(wù)器 GPU云服務(wù)器圖片遮罩圖片遮罩代碼html 字符翻轉(zhuǎn) 翻轉(zhuǎn)動畫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94284.html

發(fā)表評論

登陸后可評論

0條評論

shaonbean

男|高級講師

我要關(guān)注我要私信

TA的文章

cocokk289大贏家單邊掃貨籃球足球?qū)_蘇打水火狐籃球偷分皇冠跟單

閱讀 6214·2021-11-22 15:32
基于Zynq-7000系列之硬件開發(fā)學(xué)習(xí)教程——Xilinx Vivado HLS案例（2）

閱讀 829·2021-11-11 16:54
用Python搓一個(gè)太陽系

閱讀 3167·2021-10-13 09:40
華納云：(hncloud)-cn2+bgp線路香港雲(yún)服務(wù)器，18元/月，簡單測評

閱讀 2173·2021-09-03 10:35
CloudCone：洛杉磯CN2 GIA線路服務(wù)器15-100M不限流量$82/月起

閱讀 1843·2021-08-09 13:47
表單label兩端對齊之css實(shí)現(xiàn)

閱讀 1881·2019-08-30 15:55
如何用自己喜歡的 CSS 風(fēng)格重置網(wǎng)站的樣式

閱讀 1941·2019-08-30 15:43
小程序?qū)W習(xí)筆記(1)

閱讀 2463·2019-08-29 17:06

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

圖片遮罩翻轉(zhuǎn)

相關(guān)文章

如何使用CSS和SVG剪切和遮罩技術(shù)

那是我夕陽下的奔跑，電商網(wǎng)站PC端詳情頁圖片放大效果實(shí)現(xiàn)

那是我夕陽下的奔跑，電商網(wǎng)站PC端詳情頁圖片放大效果實(shí)現(xiàn)

那是我夕陽下的奔跑，電商網(wǎng)站PC端詳情頁圖片放大效果實(shí)現(xiàn)

透明背景情況下遮罩出不規(guī)則圖片

發(fā)表評論

0條評論

shaonbean

男|高級講師

TA的文章

cocokk289大贏家單邊掃貨籃球足球?qū)_蘇打水火狐籃球偷分皇冠跟單

基于Zynq-7000系列之硬件開發(fā)學(xué)習(xí)教程——Xilinx Vivado HLS案例（2）

用Python搓一個(gè)太陽系

華納云：(hncloud)-cn2+bgp線路香港雲(yún)服務(wù)器，18元/月，簡單測評

CloudCone：洛杉磯CN2 GIA線路服務(wù)器15-100M不限流量$82/月起

表單label兩端對齊之css實(shí)現(xiàn)

如何用自己喜歡的 CSS 風(fēng)格重置網(wǎng)站的樣式

小程序?qū)W習(xí)筆記(1)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

圖片遮罩翻轉(zhuǎn)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！