首页 > 代码库 > 底图与蒙版的过渡效果transition

底图与蒙版的过渡效果transition

2024-09-19 15:03:05   216人阅读

我用2种方法写了底图与蒙版的过渡效果

方法一：用js方法

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>transition</title>    </head>    <body>        <div class="part" id="part" style="width: 30%;margin: 0 auto;position: relative;">    <!--此处为底图-->    <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style="width: 100%">    <!--此处为蒙版部分-->            <div class="maskPart" id="maskPart" style="width: 100%;position: absolute;left: 0;bottom: 0;display:none;">        <!--蒙版图片-->        <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style="width: 100%;">        <!--蒙版文字-->        <div style="position: absolute;bottom: 0;left: 0;width: 95%;text-align: center;margin: 0 auto;color: #FFFFFF;padding-bottom: 1em;">            <p style="margin: 0;padding: 0;">此处为标题部分</p>            <p style="margin: 0;padding: 0;">此处为副标题部分</p>        </div>    </div></div>        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>    </body></html>
        $("#part").hover(function () {            $("#maskPart").fadeIn(‘solw‘)        },function () {            $("#maskPart").fadeOut(‘slow‘)        });

效果图：http://runjs.cn/detail/cqzb6bir

 

方法二：用css方法

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>transition</title>    </head>    <body>        <div class="part" id="part" style="width: 30%;margin: 0 auto;position: relative;">    <!--此处为底图-->    <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/ayqgy4nj.png" style="width: 100%">    <!--此处为蒙版部分-->    <div class="maskPart" id="maskPart" style="width: 100%;position: absolute;left: 0;bottom: 0;opacity: 0;">        <!--蒙版图片-->        <img src="http://sandbox.runjs.cn/uploads/rs/322/57sddaje/j5fe3wv3.png" style="width: 100%;">        <!--蒙版文字-->        <div style="position: absolute;bottom: 0;left: 0;width: 95%;text-align: center;margin: 0 auto;color: #FFFFFF;padding-bottom: 1em;">            <p style="margin: 0;padding: 0;">此处为标题部分</p>            <p style="margin: 0;padding: 0;">此处为副标题部分</p>        </div>    </div></div>        <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>    </body></html>
        $("#part").hover(function () {            console.log("opacity=0");            $("#maskPart").css({                "transition": "opacity 1s",                "-webkit-transition": "opacity 1s",                "-moz-transition": "opacity 1s",                "-o-transition": "opacity 1s",                "-ms-transition": "opacity 1s",                "opacity": "1"            });        },function () {            console.log("opacity=1");            $("#maskPart").css({                "opacity": "0"            });        });

效果图：http://runjs.cn/detail/yvc7rajt

--------------------------------

我尝试用transition方法写display方法，好像是行不通。于是用opacity方法代替

用js方法：当鼠标 悬浮与离开 的操作来回重复多次切速度很快，js方法会多次调用，有点繁琐

用css方法：当鼠标执行相同的操作，css只会调用最后一次的操作，比较简洁

底图与蒙版的过渡效果transition


联系
我们