资讯专栏INFORMATION COLUMN

图片遮罩翻转

shaonbean / 419人阅读

摘要:效果展示代码。代码以一个为单位,在其周围生成个相同的遮罩。主要是的动画不支持翻转,只能通过来做,需要以边为单位翻转。当所有关联起来的时时候,记录上一个翻转方向,达到连贯性不触发获得相对于中心点的,坐标获得斜率到之间的数

html代码。

  
  • Css效果展示

css代码。

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

js代码
以一个li为单位,在其周围生成8个相同的遮罩。
主要是animation的css动画不支持翻转,只能通过transfrom来做,需要以边为单位翻转。
当所有li关联起来的时时候,记录上一个翻转方向,达到连贯性

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不触发
                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()

        // 获得相对于中心点的 x,y坐标
        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之间的数
        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);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94284.html

相关文章

  • 如何使用CSS和SVG剪切和遮罩技术

    摘要:通过结合使用和遮罩技术,你将会拥有更多的可能性去使用网络图像。在图像上应用遮罩元素为了使用得到一种感觉,我们将在图像上使用遮罩。浏览器支持在我们使用这种新的处理图像的方法之前,注意到浏览器对剪切和遮罩的支持不一致是非常重要的。 本文转载自:众成翻译译者:hidoos链接:http://www.zcfy.cc/article/1100原文:https://getflywheel.com/...

    hover_lew 评论0 收藏0
  • 那是我夕阳下的奔跑,电商网站PC端详情页图片放大效果实现

    摘要:使用鼠标的坐标值减去遮罩层的一半的宽度,从而得到遮罩层显示的位置。最后添加鼠标离开的监听事件,当鼠标离开商品大图时隐藏遮罩层以及放大镜。 在详情页浏览时商品大图还是不能完全看清楚商品的细节,该特效实现鼠标悬停在商品大图上时,在商品大图右侧出现放大镜效果并根据鼠标的位置来改变右侧大图的显示内容,放大镜中的内容和鼠标悬停位置的内容相同。该特效的实现效果图为:showImg(https://...

    ThreeWords 评论0 收藏0
  • 那是我夕阳下的奔跑,电商网站PC端详情页图片放大效果实现

    摘要:使用鼠标的坐标值减去遮罩层的一半的宽度,从而得到遮罩层显示的位置。最后添加鼠标离开的监听事件,当鼠标离开商品大图时隐藏遮罩层以及放大镜。 在详情页浏览时商品大图还是不能完全看清楚商品的细节,该特效实现鼠标悬停在商品大图上时,在商品大图右侧出现放大镜效果并根据鼠标的位置来改变右侧大图的显示内容,放大镜中的内容和鼠标悬停位置的内容相同。该特效的实现效果图为:showImg(https://...

    szysky 评论0 收藏0
  • 那是我夕阳下的奔跑,电商网站PC端详情页图片放大效果实现

    摘要:使用鼠标的坐标值减去遮罩层的一半的宽度,从而得到遮罩层显示的位置。最后添加鼠标离开的监听事件,当鼠标离开商品大图时隐藏遮罩层以及放大镜。 在详情页浏览时商品大图还是不能完全看清楚商品的细节,该特效实现鼠标悬停在商品大图上时,在商品大图右侧出现放大镜效果并根据鼠标的位置来改变右侧大图的显示内容,放大镜中的内容和鼠标悬停位置的内容相同。该特效的实现效果图为:showImg(https://...

    weknow619 评论0 收藏0
  • 透明背景情况下遮罩出不规则图片

    摘要:使用透明蒙版等在四个角画三角形来遮罩出六边形我们来一一试验使用透明蒙版如果纯色背景还可以,但是背景要求透明的,所以第一种看样子不大可能了。 我们在处理图片,比如用户头像的时候,通常上传的都是矩形图片 例如:showImg(https://segmentfault.com/img/bVkHOG); 有时候根据设计师的需求,会要求是圆形或者带圆角,这时候我们通常使用css border-...

    rozbo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<