JS做的一款动感超酷banner

最新推荐文章于 2022-09-04 23:43:41 发布

PMO大会进步使者

最新推荐文章于 2022-09-04 23:43:41 发布

阅读量250

点赞数

分类专栏：前端技术文章标签： JS banner 广告制作通栏广告超酷banner

本文链接：https://blog.csdn.net/pmo2020/article/details/89753917

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

banner

正在学习banner制作，参考技术大牛的代码，修改增加了超链接，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS做的一款动感超酷banner</title>
</head>
<body>
<div class="container2">
    <div class="banner2" style="cursor:pointer" onclick="window.open('http://www.chinapmo.com/pmo2019/')" ></div>
</div>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>

    (function(win){

        function fnBanner(data){
            var con_height=data.con_height || 400;
            var ban_height=con_height*0.7;
            var con_padding=con_height*0.15;

            $(data.banner2).css({
                height:ban_height+"px",
                width:"80%",
                margin:"0 auto",
                transition:"transform 0.1s"

            }).css("background","url("+data.url+") no-repeat center").css(
                "background-size","contain2").css("box-shadow","0 0 15px rgba(0,0,0,0.3)")

            $(data.container2).css({height:con_height+"px",
                padding:con_padding+"px 0",
                width:"100%",
                background:"white",
                border:"1px solid gray",
                perspective:"1000px"
            }).css("box-sizing","border-box")

            $(data.container2).on("mousemove",function(e){
                var offset=$(data.container2).offset();
                var x=e.pageX-offset.left;
                var y=e.pageY-offset.top;

                var centerX=$(data.container2).outerWidth()/2;
                var centerY=$(data.container2).outerHeight()/2;

                var distanceX=x-centerX;
                var distanceY=y-centerY;

                var perX=distanceX/centerX;
                var perY=distanceY/centerY;

                var initDeg=data.initDeg || 10;


                $(data.banner2).css({
                    transform:'rotateX('+initDeg*-perY+'deg) rotateY('+initDeg*perX+'deg)'
                })

            })

            $(data.container2).on("mouseleave",function(){
                $(data.banner2).css({
                    transform:''
                })
            })

            console.log("ok");
        }

        win.B=fnBanner;
    })(window);

</script>
<script type="text/javascript">
    B({
        container2:".container2",
        banner2:".banner2",
        initDeg: 10,
        url: "http://www.ali88888.top/wp-content/uploads/2019/04/PMO大会2.png",
        con_height: 400
    });
</script>
</body>
</html>