前端知识整理

学习前端的零零碎碎的知识.

¶问题解决方案

1. 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

记得要把npm安装的执行文件目录添加至环境变量.

2. webstorm 快捷键

格式化快捷键: Ctrl+Alt+l

3. 雪花特效

//   生成雪花
            function snow() {
                //1、定义一片雪花模板
                var flake = $("<div>").css({
                    "position": "absolute",
                    "color": "#fff"
                }).html("❄");

                //获取页面的宽度，利用这个数来算出，雪花开始时left的值
                var documentWidth = $(document).width();

                //获取页面的高度 相当于雪花下落结束时Y轴的位置
                var documentHieght = $(document).height();

                //定义生成一片雪花的毫秒数
                var millisec = 100;
                //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
                setInterval(function() {
                    //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
                    var startLeft = Math.random() * documentWidth;

                    //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
                    var endLeft = Math.random() * documentWidth;

                    //随机生成雪花大小
                    var flakeSize = 5 + 20 * Math.random();

                    //随机生成雪花下落持续时间
                    var durationTime = 4000 + 7000 * Math.random();

                    //随机生成雪花下落 开始 时的透明度
                    var startOpacity = 0.7 + 0.3 * Math.random();

                    //随机生成雪花下落 结束 时的透明度
                    var endOpacity = 0.2 + 0.2 * Math.random();

                    //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
                    flake.clone().appendTo($("body")).css({
                        "left": startLeft,
                        "opacity": startOpacity,
                        "font-size": flakeSize,
                        "top": "-25px",
                    }).animate({ //执行动画
                        "left": endLeft,
                        "opacity": endOpacity,
                        "top": documentHieght
                    }, durationTime, function() {
                        //4、当雪花落下后，删除雪花。
                        $(this).remove();
                    });
                }, millisec);
            };
            snow();

4. 水波特效

<!-- css样式 -->
  /* 涟漪 */
        section {
            /* background-image:; */
            background-size: cover;
            height: 100vh;
            z-index: 100 !important;
        }
<!-- 引用的外部js库 -->
 <script src="js/jquery.ripples-min.js"></script>
<!-- 执行代码 -->
    $('section').ripples({
                //imageUrl: null,   //要用作背景的图像的URL。如果没有，插件将尝试使用计算的background-imageCSS属性的值。也接受数据URI。
                dropRadius: 10, //通过在画布上单击或移动鼠标而产生的拖放的大小（以像素为单位）。
                perturbance: 0.5, //基本上由波纹引起的折射量。0表示没有折射。
                resolution: 512, //要呈现的WebGL纹理的宽度和高度。此值越大，渲染越平滑，涟漪传播越慢。
                interactive: true,//鼠标点击和鼠标移动是否会触发效果。
                //crossOrigin: "",  //用于受影响图像的crossOrigin属性。
            });

    
    

5. JavaScript 取消滚动条

::-webkit-scrollbar{width:0px};
/* 更好的方法 */
body{
    overflow: hidden;
    }

6. JavaScript 自动播放音乐

对于chrome是无法自动播放音乐的,必须需要有用户触发的条件才可以.

7. chrome开发者工具替换文本.

首先不是ctrl+H,貌似没有对应的快捷键…如果实在是想实现,只能用插件…

8. 樱花特效

HTML5制作响应式3D樱花漫天飞舞动画特效