JS动画框架及案例

2023-05-16


JS动画效果：
综合——运动框架 move.js
1、简单动画
    1-1、速度动画  D01_share.html
    1-2、透明度动画  D02_opacity.html
2、缓冲动画
    2-1、缓冲动画  D03_speed.html
3、多物体动画
    3-1、多物体动画  D04_morespart01.html D04_morespart02.html
    3-2、获取样式  D05_getStyle01.html D05_getStyle02.html
    3-3、任意属性值（一）  D06_anyValue.html
    3-4、任意属性值（二）
4、链式动画
    4-1、链式动画  D07_chainAnimation.html
5、同时运动
    5-1、同时运动 D08_json.html（json的介绍） D08_sametimeMove.html
    5-2、完美运动框架 move.js
6、动画案例

速度动画 D01_share.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>速度动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 250px;
            background-color: #807a62;
            position: relative;
            left: -200px;
            top: 0;
        }
        #div1 span {
            width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
            height: 50px;
            background-color: aquamarine;
            position: absolute;
            left: 200px;
            top: 75px;
            text-align: center;
        }
    </style>

    <script>
        var oDiv;
        window.onload = function() {
            oDiv = document.getElementById('div1');
            /*oDiv.onmouseover = startMoveIn;
            oDiv.onmouseout = startMoveOut;*/

            oDiv.onmouseover = function() {
                //startMove(10, 0);
                startMove02(0);
            };
            oDiv.onmouseout = function() {
                //startMove(-10, -200);
                startMove02(-200);
            };
        };

        var timer=null;
        /*startMoveIn() 和 startMoveOut()方法相似，可以进行提取合成 --> startMove()*/
        /*function startMoveIn() {
            clearInterval(timer);

            timer = setInterval(function() {
                if(oDiv.offsetLeft == 0) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                }
            },30);
        }

        function startMoveOut() {
            clearInterval(timer);

            timer = setInterval(function() {
                if(oDiv.offsetLeft == -200) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
                }
            },30)
        }*/

        function startMove(speed, iTarget) {
            clearInterval(timer);

            timer = setInterval(function() {
                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }

        //除去speed参数
        function startMove02(iTarget) {
            clearInterval(timer);

            var speed;
            if(oDiv.offsetLeft > iTarget) {
                speed = -10;
            } else {
                speed = 10;
            }

            timer = setInterval(function() {
                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }
    </script>
</head>
<body>
    <div id="div1"><span id="share">分享</span></div>
</body>
</html>

透明度动画 D02_opacity.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度动画</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            filter: alpha(opacity=30); /*基于IE*/
            opacity: 0.3; /*基于火狐、Chrome*/
        }
    </style>

    <script>
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function() {
                startMove(100);
            };
            oDiv.onmouseout = function() {
                startMove(30);
            };
        };

        var timer = null;
        var alpha = 30;
        function startMove(iTarget) {
            var oDiv = document.getElementById('div1');

            //解决定时器叠加的问题
            clearInterval(timer);
            timer = setInterval(function() {
                var speed = 0;
                if(alpha > iTarget) {
                    speed = -10;
                } else {
                    speed = 10;
                }

                if(alpha == iTarget) {
                    clearInterval(timer);
                } else {
                    alpha += speed;
                    oDiv.style.filter = 'alpha(opacity='+alpha+')';
                    oDiv.style.opacity = alpha / 100;
                }
            },30);
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

缓冲动画 D03_speed.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓冲动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 250px;
            background-color: #807a62;
            position: relative;
            left: -200px;
            top: 0;
        }
        #div1 span {
            width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
            height: 50px;
            background-color: aquamarine;
            position: absolute;
            left: 200px;
            top: 75px;
            text-align: center;
        }
    </style>

    <script>
        var oDiv;
        window.onload = function() {
            oDiv = document.getElementById('div1');
            /*oDiv.onmouseover = startMoveIn;
             oDiv.onmouseout = startMoveOut;*/

            oDiv.onmouseover = function() {
                //startMove(10, 0);
                startMove02(0);
            };
            oDiv.onmouseout = function() {
                //startMove(-10, -200);
                startMove02(-200);
            };
        };

        var timer=null;

        //除去speed参数
        function startMove02(iTarget) {
            clearInterval(timer);

            timer = setInterval(function() {
                var speed = (iTarget - oDiv.offsetLeft) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(oDiv.offsetLeft == iTarget) {
                    clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        }
    </script>
</head>
<body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>

多物体动画 D04_morespart01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体动画</title>

    <style>
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
        }
    </style>

    <script>
        window.onload = function() {
            var aLi = document.getElementsByTagName('li');
            for(var i = 0; i<aLi.length; i++) {
                aLi[i].timer = null; //为每一个li加一个定时器
                aLi[i].onmouseover = function() {
                    startMove(this,400);
                };
                aLi[i].onmouseout = function() {
                    startMove(this,200);
                };
            }
        };

        //var timer = null;
        function startMove(obj, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var speed = (iTarget - obj.offsetWidth) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(obj.offsetWidth == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }
            },30);
        }


    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

D04_morespart02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体动画</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: red;
            float: left;
            margin: 10px;

            filter: alpha(opacity=30);
            opacity: 0.3;
        }
    </style>

    <script>
        var ds;
        window.onload = function() {
            ds = document.getElementsByTagName('div');

            for(var i = 0; i < ds.length; i++) {
                ds[i].timer = null;
                ds[i].alpha = 30;

                ds[i].onmouseover = function() {
                    startChange(this, 100);
                };
                ds[i].onmouseout = function() {
                    startChange(this, 30);
                };
            }
        }

        function startChange(obj, iTarget) {
            clearInterval(obj.timer);

            obj.timer = setInterval(function() {
                var speed = (iTarget - obj.alpha) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(obj.alpha == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.alpha += speed;
                    obj.style.filter = 'alpha(opacity=' + obj.alpha + ')';
                    obj.style.opacity = obj.alpha / 100;
                }
            }, 30);
        }

    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

获取样式 D05_getStyle01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取样式</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            border: 2px solid #000;
            font-size: 12px;
            color: #fff;
        }
    </style>

    <script>
        var oDiv;
        window.onload = function() {
            oDiv = document.getElementById('div1');
            setInterval(function() {
                //oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 1 + 'px';
                oDiv.style.fontSize = parseInt(getStyle(oDiv, 'fontSize')) + 1 + 'px';
            }, 30);
        };

        //获取样式
        function getStyle(obj, attr) {
            if(obj.currentStyle) { //currentStyle 针对IE浏览器
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj,false)[attr]; //getComputedStyle 针对火狐浏览器
            }
        }
    </script>
</head>
<body>
    <div id="div1">font-size</div>
</body>
</html>

D05_getStyle02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取样式</title>
    <style>
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 1px solid yellowgreen;
        }

        ul li:hover {
            box-shadow: 0 0 7px 2px #0CC;
        }
    </style>
    <script>
        var aLi;
        window.onload = function() {
            aLi = document.getElementsByTagName('li');

            for(var i = 0; i < aLi.length; i++) {
                aLi[i].timer = null;
                aLi[i].onmouseover = function() {
                    startChange(this, 400);
                };
                aLi[i].onmouseout = function() {
                    startChange(this, 200);
                };
            }
        };

        function startChange(obj, iTarget) {
            clearInterval(obj.timer);

            obj.timer = setInterval(function() {
                var icur = parseInt(getStyle(obj, 'width'));
                var speed = (iTarget - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(icur == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.width = icur + speed + 'px';
                }
            }, 30);
        }

        function getStyle(obj, attr) {
            if(obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
</head>
<body>

</body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</html>

任意属性值 D06_anyValue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任意属性值</title>
    <style>
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 1px solid yellowgreen;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }

        ul li:hover {
            box-shadow: 0 0 7px 2px #0CC;
        }
    </style>
    <script>
        var li1, li2, li3;
        window.onload = function() {
            li1 = document.getElementById('li1');
            li2 = document.getElementById('li2');
            li3 = document.getElementById('li3');

            li1.onmouseover = function() {
                startChange(this, 'height', 400);
            };
            li1.onmouseout = function() {
                startChange(this, 'height', 100);
            };
            li2.onmouseover = function() {
                startChange(this, 'width', 400);
            };
            li2.onmouseout = function() {
                startChange(this, 'width', 200);
            };
            li3.onmouseover = function() {
                startChange(this, 'opacity', 100);
            };
            li3.onmouseout = function() {
                startChange(this, 'opacity', 50);
            };
        };

        function startChange(obj, attr, iTarget) {
            clearInterval(obj.timer);

            obj.timer = setInterval(function() {
                var icur = 0;
                if(attr == 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, attr))*100);
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }

                var speed = (iTarget - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(icur == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    if(attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                        obj.style.opacity = (icur + speed) / 100;
                    } else {
                        obj.style[attr] = icur + speed + 'px';
                    }
                }
            }, 30);
        }

        function getStyle(obj, attr) {
            if(obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    </script>
</head>
<body>

</body>
<ul>
    <li id="li1"><p>我是高度改变~</p></li>
    <li id="li2"><p>我是宽度改变~</p></li>
    <li id="li3"><p>我是透明度改变~</p></li>
</ul>
</html>

JS动画框架 move.js

/**
 * Created by DreamBoy on 2016/1/22.
 */
//获取对象样式，如 getStyle(obj, 'width')
function getStyle(obj, attr) {
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

//动画效果，如 startMove(obj, 'width', 200)
// fn是回调函数，如果fn有传入的话，动画结束后会执行给函数——》可以形成 链式动画
/*function startMove(obj, attr, iTarget, fn) {
    clearInterval(obj.timer);

    obj.timer = setInterval(function() {
        //1.取当前的值
        var icur = 0;
        if(attr == 'opacity') {
            icur = Math.round(parseFloat(getStyle(obj, attr))*100);
        } else {
            icur = parseInt(getStyle(obj, attr));
        }

        //2.计算速度
        var speed = (iTarget - icur) / 10;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        //3.检测停止
        if(icur == iTarget) {
            clearInterval(obj.timer);
            if(fn) {
                fn();
            }
        } else {
            if(attr == 'opacity') {
                obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                obj.style.opacity = (icur + speed) / 100;
            } else {
                obj.style[attr] = icur + speed + 'px';
            }
        }
    }, 30);
}*/

//修改——> 不同属性变化的同时运行（使用json  属性值:目标值）
// startMove(ojb,{attr1:itarget1, attr2:itarget2},fn)
function startMove(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;
        for(var attr in json) {
            //1.取当前的值
            var icur = 0;
            if(attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj, attr))*100);
            } else {
                icur = parseInt(getStyle(obj, attr));
            }

            //2.计算速度
            var speed = (json[attr] - icur) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //3.检测停止
            if(icur != json[attr]) {
                flag = false;

                if(attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
        }

        if(flag) {
            clearInterval(obj.timer);
            //obj.timer = null;
            if(fn) {
                fn();
            }
        }
    }, 30);
}

链式动画 D07_chainAnimation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式动画</title>

    <style>
        body, ul, li{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid #000;
            filter: alpha(opacity=30);
            opacity: 0.3;
        }
    </style>

    <script src="move.js"></script>
    <script>
        window.onload = function() {
            var li1 = document.getElementById('li1');
            li1.onmouseover = function() {
                startMove(li1, 'width', 400, function() {
                    startMove(li1, 'height', 200, function() {
                        startMove(li1, 'opacity', 100);
                    });
                });
            };
            li1.onmouseout = function() {
                startMove(li1, 'opacity', 30, function() {
                    startMove(li1, 'height', 100, function() {
                        startMove(li1, 'width', 200);
                    });
                });
            }
        };
    </script>
</head>
<body>
    <ul>
        <li id="li1"></li>
    </ul>
</body>
</html>

json介绍 D08_json.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json介绍</title>
    <script>
        //定义一个json
        var json = {
            a:12,
            b:13
        };

        //遍历json
        for(var i in json) {
            document.write(i + ":" + json[i] + "<br/>");
        }
    </script>
</head>
<body>

</body>
</html>

同时运动 D08_sametimeMove.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同时运动</title>
    <style>
        ul {
            list-style: none;
        }
        ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid #000;
            filter: alpha(opacity=30);
            opacity: 0.3;
        }
        ul li:hover {
            box-shadow: 0 0 7px 4px #ccc;
        }
    </style>
    <script src="move.js"></script>
    <script>
        window.onload = function() {
            var oLi = document.getElementById("li1");
            oLi.onmouseover = function() {
                startMove(oLi, {'width':400, 'height':200, 'opacity': 100}, function() {
                    startMove(oLi, {'width': 600});
                });
            };
            oLi.onmouseout = function() {
                startMove(oLi, {'width':200, 'height':100, 'opacity': 30});
            };
        }
    </script>
</head>
<body>
    <ul>
        <li id="li1"></li>
    </ul>
</body>
</html>

JS动画案例 D09_JSAnimationDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS动画案例</title>

    <style>
        #move {
            width: 300px;
            border: 1px solid #ccc;
            margin: 0 auto;
            padding: 10px;
            overflow: hidden;
        }

        #move a {
            float: left;
            color: red;
            font-size: 10px;
            /*border: 1px solid #00CCCC;*/
            padding: 35px 30px 0 30px;
            margin: 20px 0 20px 10px;

            position: relative;
            text-decoration: none;
            line-height: 25px;
            overflow: hidden;
        }

        #move a i{
            position: absolute;
            top: 20px;
            left: 0;
            display: inline-block;
            width: 100%;
            text-align: center;
            filter: alpha(opacity=100);
            opacity: 1;
        }

        #move a:hover {
            box-shadow: 0 0 7px 4px #ccc;
        }
    </style>

    <script src="move.js"></script>
    <script>
        window.onload = function() {
            var oMove = document.getElementById('move');
            var aLi = oMove.getElementsByTagName('a');

            var k=0;
            for(var i = 0; i < aLi.length; i++) {
                aLi[i].onmouseover = function() {
                    var _this = this.getElementsByTagName('i')[0];
                    startMove(_this, {'top':-25, 'opacity': 0}, function() {
                        _this.style.top = 35 + 'px';
                        startMove(_this, {'top':20, 'opacity': 100});
                    });
                };
            }
        };
    </script>
</head>
<body>
    <div id="move">
        <a href="#"><i><img src="img/caipiao.png"></i><p>彩票</p></a>
        <a href="#"><i><img src="img/movie.png"></i><p>电影</p></a>
        <a href="#"><i><img src="img/music.png"></i><p>音乐</p></a>
        <a href="#"><i><img src="img/jiaofei.png"></i><p>缴费</p></a>
        <a href="#"><i><img src="img/licai.png"></i><p>理财</p></a>
        <a href="#"><i><img src="img/food.png"></i><p>外卖</p></a>
    </div>
</body>
</html>

结果演示：

鼠标移动到图标处，发生动画效果：

原素材如下：

caipiao.png movie.png music.png jiaofei.png licai.png food.png

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

JS动画框架及案例的相关文章

Android调用手机自带图库选择图片

这里我们采用的布局文件中有一个ImageView xff08 set pic xff09 和Button xff0c 布局较为简单 xff08 这里就不再给出 xff09 其中Button用于打开手机自带图库进行选择图片 xff0c 而I
Android自定义TextView字体

我们可以使用Android中的Typeface使用ttf字体文件设置字体首先 xff0c 我们先下载一个Android字体 xff0c 然后在工程项目下的assets文件下创建一个fonts文件 xff0c 在该文件下放置刚下好的字体现
Android仿QQ中的“我的空间”做出ScrollView滑动修改标题栏颜色操作

今天上午做了一个这样的效果 xff1a 移动滚动条时 xff0c 标题栏颜色发生变化 xff08 仿QQ中的我的空间那种效果 xff09 现在来说一下 xff0c 如何简单做出这种效果 xff08 可惜这里还未做出颜色渐变的效果后来改
android关于EditText与其光标

xff08 该文属整合性文章 xff09 android EditText插入字符串到光标所在位置在安卓中处理文本编辑的时候 xff0c 我们一般都是用EditText控件 xff0c 除了基本的输入文字功能之外 xff0c 我们很可能还
Android中利用ViewHolder优化自定义Adapter的典型写法（讨论ViewHolder的修饰方式）

转载自 xff1a 点击打开链接利用ViewHolder优化自定义Adapter的典型写法最近写Adapter写得多了 xff0c 慢慢就熟悉了用ViewHolder xff0c 主要是进行一些性能优化 xff0c 减少一些不必要的重
Android TextView内容过长加省略号，点击显示全部内容

在Android TextView中有个内容过长加省略号的属性 xff0c 即ellipsize xff0c 用法如下 xff1a 在xml中 xff1a android ellipsize 61 34 end 34 省略号在结尾 andr
Android Listview中显示不同的视图布局

1 使用场景在重写ListView的BaseAdapter时 xff0c 我们常常在getView 方法中复用convertView xff0c 以提高性能 convertView在 Item为单一的同种类型布局时 xff0c 能够回收并
Android的ListView中判断其内容已滚动到最顶部或者最底部

Android 的ListView中 xff0c 如何判断其内容已滚动到最顶部或者最底部 xff1f 根据这个方法检测 xff1a getListView setOnScrollListener new OnScrollListener 6
Python爬虫淘宝基于selenium抓取淘宝商品数据2021年测试过滑动验证

配置一下 34 可能需要修改的参数 34 xff0c 就可以食用底部代码了 ps 可能已失效本文章代码功能准备工作Python用到的库和准备工作可能需要修改的参数在CMD中打开一个Chrome浏览器并启用端口给Selenium调用导入模
通过CSS名称取元素的方法

总结了几种方法 xff0c 先放方法 xff0c 后面介绍区别 1 doucment getElementsByClassName 34 cssName 34 cssName为css的名称 2 1 document querySelecto
Android-Google自己的下拉刷新组件SwipeRefreshLayout

感谢原文作者 xff1a http stormzhang github io android 2014 03 29 android swiperefreshlayout API doc xff1a http developer androi
SwipeRefreshLayout和ListView的EmptyView共存冲突的问题

转载自 xff1a 点击打开链接 SwipeRefreshLayout是android官方的下拉刷新控件 xff1b 它内部有且只能有一个子控件 xff1b 当一个ListView嵌入到它内部时 xff0c 就不能为ListView带一个E
MySQL的触发器创建之注意事项（有关delimiter）

今天晚上在自己的数据库上做了一个触发器由于自己之前是使用SQL Server2005学习SQL语句的 xff0c 所以在这个简单的触发器设计出现了一些自己意想不到的BUG 现在我来简单的说一下 xff1a 这里使用到 diary表 com
使用CSS将图片转换成黑白(灰色、置灰)

转载请注明来自张鑫旭鑫空间鑫生活 http www zhangxinxu com http www zhangxinxu com wordpress p 61 2547 可能早就知道 xff0c 像汶川这种糟糕的日子网站全灰在IE下是
CSS中常用的四种选择器

Css中常用的四种选择器 1 类选择器 xff08 class 选择器 xff09 基本使用 xff1a 类选择器属性名属性值案例 xff1a 类选择器 s1 background color pink font weight bol
Apache的下载安装（主要说的 64位）及问题

今天重装完win10系统 xff0c 就重新下载安装 Apache 虽说之前有安装过Apache xff08 原来系统是win7 64位 xff09 xff0c 也成功运行过Apache服务器 xff0c 但是让我重新下载安装 xff0c
使用PHP实现文件下载

这里写了如何使用PHP实现文件下载的程序 xff0c 主要是为了方便自己查找 xff0c 也为了方便大家查阅学习 xff08 当然网上也有其他类似的代码 xff09 其中详细解析看原程序注释 PHP实现文件下载程序 xff1a FileDo
向Web站点发送GET请求、POST请求，并从Web站点取得响应

建议在查看以下代码之前 xff0c 先去了解有关HTTP请求和HTTP响应的相关知识 xff08 如请求与响应的内容 xff09 这里提供了一个发送GET POST请求的工具类 xff0c 源代码摘抄自疯狂 Android讲义 xff08
使用PHP进行图片的copy

今天学习了PHP的文件编程 xff0c 其中PHP自身提供了复制文件的函数 xff08 copy xff09 自己也写了一个功能差不多的复制图片的函数 xff0c 以此在这里记录一下在说该函数之前 xff0c 先介绍一下使用PHP创建删
使用PHP实现文件上传

这里使用PHP实现文件的上传 xff0c 由在浏览器这边选择文件 xff0c 上传到服务器其中 xff0c 在上传文件中 xff0c 考虑到对上传文件大小的限制类型限制等问题 xff08 当然可以根据我们需要修改对上传的文件的限制 xf

随机推荐

电子爱好者必备，强烈推荐这些常用工具

工欲善其事 xff0c 必先利其器 xff01 要想 DIY xff0c 工具同样重要 xff01 下面按照工具的必须程度从初学者至发烧友逐级提出建议 xff0c 供大家参考 xff01 首先明确一点 xff1a 本配置是针对电子类
php中的绘图技术

在php中 xff0c 使用php绘图 xff0c 在访问php文件时可以出现我们绘制的图像 php绘图技术可以应用于报表的开发验证码的设计在介绍php绘图技术之前 xff0c 我们首先需要了解一下php中的绘图坐标系 xff1a ph
jpgraph绘图库的安装与配置

以前用 PHP作图时必须要掌握复杂抽象的画图函数 xff0c 或者借助一些网上下载的画柱形图饼形图的类来实现没有一个统一的chart类来实现图表的快速开发现在我们有了一个新的选择 xff1a JpGraph 专门提供图表的类库它使
图像的灰度变换——图像旋转、图像的反色处理、对比度拉伸

这次我们要处理的是对图像进行旋转操作 xff0c 具体要求 xff0c 如下 xff1a 自定义一个图像的仿射变换函数 xff0c 用于旋转给定的输入图像 xff0c 该函数的输入参数包括处理前的图像和旋转角度输入的角度为正数 xff
Android+PHP 使用HttpClient提交POST的请求，使用JSON解析响应

这里介绍一下如何让自己的Android程序具有联网功能当然首先要有一台服务器 xff0c 如果只是进行测试的话 xff0c 可以使用局域网代替 xff08 手机连电脑wifi xff09 要求电脑已配置好Apache 43 PHP环境下
Android Google开源库——Volley的简单使用

介绍一下Android Google开源库 Volley的简单使用 volley 项目地址 https github com smanikandan14 Volley demo JSON xff0c 图像等的异步下载 xff1b 网络请求的
Mysql远程登陆及常用命令

上次我们租用了阿里云的服务器 xff0c 使用windows系统 xff0c 在其服务器上安装了wamp xff0c 对于Mysql数据库这方面的远程登陆知识有些缺欠 Mysql数据库的远程登陆可使我们在自己电脑上连接服务器的数据库 xff
让网页装进Android手机（将html+css+js打包成Android应用）（简单的）

今晚尝试了一下 xff0c 将自己简单写的网页 xff08 html 43 css 43 js xff09 打包成Android应用装进手机 xff08 当然如果网页做得好的话 xff0c 采用响应式布局 xff0c 即可在手机上完美展示
图像的直方图均衡化和比特平面分层

xff08 1 xff09 自定义一个函数 xff0c 当输入为一幅图像 EXP3 1 tif 时 xff0c 能输出该图像的直方图计算输入图像的直方图 getHist function H 61 getHist pho ima 61 i
空间域滤波：图像平滑和锐化

xff08 1 xff09 自定义一个空间域平滑滤波函数 xff0c 以达到滤除指定类型噪声如高斯噪声和椒盐噪声等的目的 xff0c 该函数的输入参数包括滤波器类型filter type 如高斯均值滤波中值滤波最大小值滤波等
图像的频率域高斯低通滤波

xff08 1 xff09 自定义一个图像的频率域高斯低通滤波处理函数 xff0c 要求该函数的输入参数包括处理前的图像ima和距频率矩形中心的距离D0 截止频率 xff0c 输出参数为滤波处理后的图像im2 自定义的高斯低通滤波器 xff
2021-07-28_Ubuntu18.04如何关闭Xorg图形界面使用tty纯命令跑程序？

痛点1 xff1a 显卡只有8G xff0c 经常gradient overflow或者CUDA OOM 痛点2 xff1a 主机连接数4k显示器 xff0c 经常系统卡住 xff0c 只有鼠标能动 xff0c 某度知道热心网友说等几分钟试
彩色图像的空间域滤波

xff08 1 xff09 RGB彩色空间向 HSI 彩色空间的转换 xff1a 自定义一个函数 xff0c 实现RGB 彩色空间向 HSI 彩色空间的转换 xff0c 要求该函数的输入参数为RGB彩色图像 xff0c 输出参数为HSI
Android中使用Handler造成内存泄露的分析和解决

转载自 xff1a http www linuxidc com Linux 2013 12 94065 htm 什么是内存泄露 xff1f Java使用有向图机制 xff0c 通过GC自动检查内存中的对象 xff08 什么时候检查由虚拟机决
Java中的Scanner类

转载自 xff1a http bbs itheima com thread 90856 1 1 html http blog sina com cn s blog 7014ad5c01018sov html java util Scanne
第一次了解GitHub，在Windows下使用GitHub

心血来潮看了一下关于版本管理工具Git 要使用GitHub xff08 一个程序员的社区网站 xff0c 基于Git用于托管软件库 xff09 xff0c 个人觉得要先理解Git和GitHub 这里有两个参考网站 xff0c 可以做了解
CSS中的选择器优先级考虑

先来看个例子 xff1a css02 html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt t
CSS中的定位——position属性

CSS定位指的是改变元素在页面中的位置 CSS定位机制 xff1a 普通流 xff1a 元素按照其在HTML中的位置顺序决定排布的过程 xff08 也就是我不对元素进行定位的默认排布 xff09 浮动绝对布局 CSS定位包含的属性有 x
CSS中父div与子div——子div有内容，父div高度却为0？

我们可能在审查网页元素时 xff0c 会发现这样的一种情况 xff1a 案例 HTMLAndCSS html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta
JS动画框架及案例

JS动画效果 xff1a 综合运动框架 move js 1 简单动画 1 1 速度动画 D01 share html 1 2 透明度动画 D02 opacity html 2 缓冲动画 2 1 缓冲动画 D03 speed html 3

JS动画框架及案例

JS动画框架及案例 的相关文章

随机推荐

热门标签

JS动画框架及案例的相关文章