欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

jquery 水波涟漪动画特效

程序员文章站 2022-06-09 17:02:09
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水波涟漪特效</title>
    <!-- 引入jquery库 -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <!-- 引入jquery.ripples库 -->
    <script src="https://cdn.bootcss.com/jquery.ripples/0.5.3/jquery.ripples.js"></script>
</head>
<style>
    * {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    color: #fff;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-image: url('./images/壁纸.jpg');
    background-size: cover;
    background-position: 50% 0;
    height: 100%;
    text-align: center;
}
body:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
p {
    text-align: left;
    margin-top: 20px;
}
a {
    color: #ff6800;
}
pre {
    text-align: left;
    margin-top: 20px;
}
.error {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #000;
    color: #f00;
    padding: 5px;
    max-width: 50%;
}
.disable {
    position: fixed;
    bottom: 0;
    right: 0;
    max-width: 50%;
}
</style>
<body>
        <main>
            </main>
</body> 
<script>
    $(document).ready(function() {
    try {
        $('body').ripples({
            resolution: 512,
            dropRadius: 20, //px
            perturbance: 0.04,
        });
        $('main').ripples({
            resolution: 328,
            dropRadius: 10, //px
            perturbance: 0.04,
        });
    } catch (e) {
        $('.error').show().text(e);
    }

    $('.disable').show().on('click', function() {
        $('body, main').ripples('destroy');
        $(this).hide();
    });

    // Automatic drops
    setInterval(function() {
        var $el = $('main');
        var x = Math.random() * $el.outerWidth();
        var y = Math.random() * $el.outerHeight();
        var dropRadius = 20;
        var strength = 0.04 + Math.random() * 0.04;

        $el.ripples('drop', x, y, dropRadius, strength);
    }, 800);
});
</script>
</html>

上一篇： Java 创建bat命令文件运行可执行jar包

下一篇： Linux下gcc编译生成动态链接库*.so文件并调用它

推荐阅读