相冊

来源:http://www.cnblogs.com/-Steven/archive/2017/12/04/7978964.html
-Advertisement-
Play Games

北京的冬越來越冷。但是擋不住戰士們勇往直前激情（一大清早地鐵站依舊還是辣麽多人排隊~激情四射的）。 今天分享兩個電子相冊。 動畫版： 因為圖片地址是本地地址所以賦效果圖給各位大神指點： 各位看客老爺肯定說說好的兩個相冊呢？ O(∩_∩)O哈哈~別急。。請看下一篇博文~ 忘了這個了commom： ...


北京的冬越來越冷。但是擋不住戰士們勇往直前激情（一大清早地鐵站依舊還是辣麽多人排隊~激情四射的）。

今天分享兩個電子相冊。

動畫版：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body,p{
                padding:0;
                margin:0;
            }
            html,body{
                width:100%;
                height:100%;
                overflow: hidden;
            }
            .Box{
                width:100%;
                height:100%;
                background: url(img/bg.png) no-repeat;
                background-size: 100%;
                position: relative;
            }
            .Box>div{
                width: 100px;
                height:100px;
                overflow: hidden;
                border-radius: 50%;
                position: absolute;
                left: 0px;
                right: 0;
                z-index: 10;
                box-shadow: 0 0 20px 2px #999;
            }
            .img{
                width:100%;
                height:100%;
                opacity: 1;
            }
            .start{
                width:100px;
                height:50px;
                text-align: center;
                margin-top: 120px;
                cursor: pointer;
                position: absolute;
                left: 0;
                right: 0;
                z-index: 1;
                font: 40px/50px "微軟雅黑";
            }
            .btn{
                width:100%;
                height:50px;
                background-color: rgba(106,144,203,0.1);
                display: flex;
                justify-content: center;
                padding:10px;
                box-sizing: border-box;
                position: absolute;
                top:0px;
            }
            .btn p{
                height:30px;
                width:130px;
                text-align: center;
                margin-left: 5px;
                margin-right: 5px;
                line-height: 30px;
                cursor: pointer;
                background-color: rgba(255,255,255,.4);
                box-shadow: 0 0 10px 1px ;
                border-radius: 25px;
                /*position: absolute;
                left:0;*/
                
            }
        </style>
        <script id="commomjs" src="commom.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                //獲取元素
                var divs = document.querySelectorAll('.Box>div');
                var start = document.querySelector('.start');
                var btn = document.querySelector('.btn');
                var timer = null;
                var btn_box = document.querySelectorAll('.btn>p');
//                console.log(divs[index])
                //初始化圖片div的初始位置
                reset();
                function reset(){
                    for(var i=0;i<divs.length;i++){
                        divs[i].state = false;
                        divs[i].style.top = (window.innerHeight-divs[i].offsetHeight)/2+'px';
                        divs[i].style.left = (window.innerWidth-divs[i].offsetWidth)/2+'px';
                    }
                        //初始化start的初始位置
                        start.style.top = (window.innerHeight-start.offsetHeight)/2+'px';
                        start.style.left = (window.innerWidth-start.offsetWidth)/2+'px';
                }
                //處理document的預設事件
                document.onmousedown = function(ev){
                    var ev = ev||event
                    ev.preventDefault();
                    return false;
                }
                //點擊開始時圖片移動到右下角
                start.onclick = function(){
                    start.style.display = 'none';
                    for(var i=0;i<divs.length;i++){
                        divs[i].state = false;
                        !function(i){
                            setTimeout(function(){
                                MTween({
                                    obj:divs[i],
                                    attrs:{
                                        top:window.innerHeight-10-divs[i].offsetHeight+'px',
                                        left:(window.innerWidth-start.offsetWidth)/2+'px'
                                    },
                                    duration:400,
                                    callBack:function(){
                                        for(var i=0;i<divs.length;i++){
                                            MTween({
                                                obj:divs[i],
                                                attrs:{
                                                    left:300+i*80+'px',
                                                },
                                                duration:2000,
                                                callBack:function(){
                                                    for(var i=0;i<divs.length;i++){
                                                        divs[i].state = true;    
                                                    }
                                                }
                                            })
                                        }
                                    }
                                })
                            },50*i);
                        }(i)
                    }
                }
                
                //拖拽事件
                for(var i=0;i<divs.length;i++){
                    move(divs[i])
                }
                function move(obj){
                    obj.onmousedown = function(ev){
                        if(!obj.state) return;
                        clearInterval(timer);
                        var ev = ev||event;
                        var x1 = ev.clientX;
                        var y1 = ev.clientY;
                        var l = obj.offsetLeft;
                        var t = obj.offsetTop;
                        this.style.zIndex = 5;
                        document.onmousemove = function(ev){
                            var ev = ev||event;
                            var x2 = ev.clientX;
                            var y2 = ev.clientY;
                            var x = x2-x1+l;
                            var y = y2-y1+t;
                            for(var i=0;i<divs.length;i++){
                                if(x<=80)x=0;
                                if(x>=window.innerWidth-divs[i].offsetWidth-50)x=window.innerWidth-divs[i].offsetWidth;
                                if(y<=80)y=50;
                                if(y>=window.innerHeight-50)y=window.innerHeight-divs[i].offsetHeight;
                            }
                            obj.style.left = x+'px';
                            obj.style.top = y+'px';
                        }
                        document.onmouseup = function(ev){
                            if(!obj.state) return;
                            var m = ev.target;
                            console.log(m.parentNode.className)
                            if(m.parentNode.className=='pic_box'){
                                if(m.parentNode.style.top<window.innerHeight-200+'px'){
                                    m.parentNode.style.borderRadius= '0'
                                    m.parentNode.style.zIndex = '0';
                                    m.parentNode.style.width = '200px';
                                    m.parentNode.style.height = '200px'
                                }
                                
                            }
                            
                            document.onmousemove = null;
                        }
                            return false;
                            document.preventDefault();
                    }
                }
                //處理相冊的排序
                var Reset = document.querySelectorAll('.btn>p')[0];
                var random = document.querySelectorAll('.btn>p')[1];
                var dir = document.querySelectorAll('.btn>p')[2];
                var seriation = document.querySelectorAll('.btn>p')[3];
                var freedom = document.querySelectorAll('.btn>p')[4];
                
                //將所有div放入數組中
                var arr = []; 
                for(var i=0;i<divs.length;i++){
                    arr.push(divs[i]);
                }
                //處理圖片放大後在縮放回圓形
                function zoom(){
                    for(var i=0;i<divs.length;i++){
                        divs[i].style.borderRadius= '50%'
                        divs[i].style.zIndex = '10';
                        divs[i].style.width = '100px';
                        divs[i].style.height = '100px'
                    }
                }
                //集合按鈕動畫處理
                Reset.onclick = function(){
                    clearInterval(timer);
                    start.style.display = 'block';
                    for(var i=0;i<divs.length;i++){
                        divs[i].state = false
                        zoom()
                        MTween({
                            obj:divs[i],
                            attrs:{
                                top:(window.innerHeight-divs[i].offsetHeight)/2+'px',
                                left:(window.innerWidth-divs[i].offsetWidth)/2+'px'
                            },
                            duration:500,
                        })
                    }
                };
                //隨機擺放動畫處理
                random.onclick = function(){
                    for(var i=0;i<divs.length;i++){
                        if(!divs[i].state) return;
                    }
                    start.style.display = 'none';
                    zoom();
                    clearInterval(timer);
                    for(var i=0;i<divs.length;i++){
                        MTween({
                            obj:divs[i],
                            attrs:{
                                top:50+Math.round(Math.random()*(window.innerHeight-150))+'px',
                                left:Math.round(Math.random()*(window.innerWidth-100))+'px',
                            },
                            duration:500,
                        })
                    }
                }
                //處理自由活動動畫
                freedom.onclick = function(){
                    for(var i=0;i<divs.length;i++){
                        if(!divs[i].state) return;
                    }
                    start.style.display = 'none';
                    zoom();
                    clearInterval(timer);
                    for(var i=0;i<divs.length;i++){
                        clearInterval(timer);
                        timer = setInterval(function(){
                            for(var i=0;i<divs.length;i++){
                                MTween({
                                    obj:divs[i],
                                    attrs:{
                                        top:50+Math.round(Math.random()*(window.innerHeight-150))+'px',
                                        left:Math.round(Math.random()*(window.innerWidth-100))+'px',
                                    },
                                    duration:2000,
                                })
                            }
                        },10)
                    }
                }
                //處理向左向右看齊
                dir.onclick = function(){
                    for(var i=0;i<divs.length;i++){
                        if(!divs[i].state) return;
                    }
                    start.style.display = 'none';
                    zoom();
                    arr.reverse();
                    clearInterval(timer);
                    for(var i=0;i<divs.length;i++ ){
                        MTween({
                            obj:arr[i],
                            attrs:{
                                top:(window.innerHeight-divs[i].offsetHeight)/2+'px',
                                left:200+i*110+'px'
                            },
                            duration:1000,
                        })
                    }
                }
                //處理循序排列
                seriation.onclick = function(){
                    for(var i=0;i<divs.length;i++){
                        if(!divs[i].state) return;
                    }
                    start.style.display = 'none';
                    zoom();
                    clearInterval(timer);
                    for(var i=0;i<divs.length;i++){
                         MTween({
                        obj:arr[i],
                        attrs:{
                            top:((window.innerHeight-divs[i].offsetHeight)/2-divs[i].offsetHeight)+(i*100)-(parseInt(i/3)*300)+'px',
                            left:((window.innerWidth-divs[i].offsetWidth)/2-divs[i].offsetWidth)+(parseInt(i/3)*100)+'px'
                        },
                        duration:1000,
                    })
                }
            }
        }
        </script>
    </head>
    <body>
        <section class="Box">
            <header class="btn">
                <p class="reset">集合</p>
                <p class="random">隨機擺放</p>
                <p class="dir">向左向右看齊</p>
                <p class="seriation">站隊</p>
                <p class="freedom">自由活動</p>
            </header>
            <p class="start">start</p>
            <div class="pic_box">
                <img class="img" src="img/1.jpg" alt="" />
            </div>
            <div class="pic_box">
                <img class="img" src="img/2.jpg" alt="" />
            </div>
            <div class="pic_box">
                <img class="img" src="img/3.jpg" alt="" />
            </div>
            <div class="pic_box">
                <img class="img" src="img/4.jpg" alt="" />
            </div>
            <div class="pic_box">
                <img class="img" src="img/5.jpg" alt="" />
            </div>
            <div class="pic_box">
                <img class="img" src="img/6.jpg" alt="" />
            </div>
            <div class="pic_box">
                <img class="img" src="img/7.jpg" alt="" />
            </div>
            <div class="pic_box">
                <img class="img" src="img/8.jpg" alt="" />
            </div>
            <div class="pic_box">
                <img class="img" src="img/9.jpg" alt="" />
            </div>
        </section>
    </body>
</html>

因為圖片地址是本地地址所以賦效果圖給各位大神指點：

各位看客老爺肯定說說好的兩個相冊呢？

O(∩_∩)O哈哈~別急。。請看下一篇博文~

 

忘了這個了commom：

var commomjs = document.querySelector('#commomjs');

require(commomjs);

function require(obj){

    var comSrc = obj.src;

    //找最後一個 / 位置
    var index = comSrc.lastIndexOf('/');
    var _dir = comSrc.slice(0,index+1)+'tween.js';

    var script = document.createElement('script');
    script.src = _dir;

    obj.parentNode.insertBefore(script,obj);
}


/*
* 獲取css屬性方法
* */
function getStyle(){

    var obj = arguments[0];
    var arr = arguments.length>2?{}:'';

    if(typeof arr=='string'){
        arr = !obj.currentStyle?getComputedStyle(obj)[arguments[1]]:obj.currentStyle[arguments[1]];
    }else{
        for(var i=1;i<arguments.length;i++){
            //arr.height = '';
            arr[arguments[i]] = !obj.currentStyle?getComputedStyle(obj)[arguments[i]]:obj.currentStyle[arguments[i]];
        }
    }



    return arr;
}

/*
* 獲取元素集合
* */
function $(str){

    var dom;//儲存找到的元素

    if(str.charAt(0)=='.'){
        dom = document.getElementsByClassName(str.slice(1));

    }else if(str.charAt(0)=='#'){
        dom = document.getElementById(str.slice(1));
    }else{
        dom = document.getElementsByTagName(str);
    }

    return dom;//把獲取到的元素給到需要用的人
}


//封裝move
function move(obj,attr,speed,end,callBack){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var attrVal = parseFloat(getStyle(obj,attr));

        var s = attrVal+speed;//下一幀的位置


        if(speed<0){
            if(s<=end){
                s=end;
                clearInterval(obj.timer);
            }
        }

        if(speed>0){
            if(s>=end){
                s=end;
                clearInterval(obj.timer);
            }
        }


        obj.style[attr] = s +'px';


//            if(s==end){
//                if(callBack){
//                    callBack();
//                }
//               callBack&&callBack();
//            }

        if(s==end&&callBack){
            //如果到達了目標點，並且有回調函數的情況就執行；
            callBack();
        }

    },30);
}



//MTween 時間版的運動函數
/*function  MTween(obj,attr,begin,end,duration,unit,way,callBack){



    if(obj.isAnim) return;

    //obj開始運動了  自定義屬性
    obj.isAnim = true;

    if(!way){ //如果用戶沒有選擇運動方式就預設勻速
        way = 'linear';
    }

    if(!unit){ //如果用戶沒有傳入單位，預設為空
        unit = '';
    }

    // console.log(getStyle(obj,'transform'));

    var start = parseFloat(begin)||parseFloat(getStyle(obj,attr))||0;//起始位置  如果begin未傳值，那就就嘗試獲取傳入的屬性值，如果屬性值獲取失敗，就預設為0
//        console.log(start);
//        var end = 1000;//目標點
//        var duration = 1000;//動畫執行的總時間 單位是毫秒
    var startTime = Date.now();

    var s = end - start; //總路程

//        var v = s/duration; //計算出來的速度


    //每次20ms走一幀
    clearInterval(timer);
    var timer = 0;
    timer = setInterval(function(){

        // console.log(attr);

        var endTime = Date.now();

        //計算出當前時間
        var t = endTime-startTime;

        if(t>=duration){
            t = duration;
            clearInterval(timer);//到達目標點要清除定時器
        }
//            console.log(t,start,s,duration);
//            console.log(Tween[way](t,start,s,duration));

        obj.style[attr] = Tween[way](t,start,s,duration)+unit;

        //透明度的相容處理
        if(attr=='opacity'){
            obj.style.filter = 'Alpha(opacity='+Tween[way](t,start,s,duration)*100+')';
        }

        //如果是transform的情況
        //transform.scale  ==> ['transform','scale']

        var attr1 = attr.split('.');

        // console.log(attr1);

        if(attr1.length>1&&attr1[0]=='transform'){
            //js設置transform的方式：
            // obj.style.tranform = 'scale(n)';
            // console.log(1);
            if(attr1[1]=='scale'){
                obj.style[attr1[0]] = attr1[1]+'('+Tween[way](t,start,s,duration)+')';
            }else if(attr1[1]=='rotateZ'){
                obj.style[attr1[0]] = attr1[1]+'('+Tween[way](t,start,s,duration)+'deg)';
            }

        }




        if(t==duration){
            obj.isAnim = false;
            //等到上一個動畫完成 然後再調用
            if(callBack){
                callBack();
            }
        }


    },20);
}*/

//MTween 時間版的運動函數
function  MTween(opt){

    //end   unit  begin

    var option = {
        obj:'',
        begins:{},
        attrs:{},
        duration:0,
        way:'linear',
        callBack:function(){}
    };

    //用傳入的參數覆蓋預設值
    for(var key in option){
        if(opt[key]){
            option[key] = opt[key];
        }
    }

    // console.log(option);

    //為了不再修改下麵更多的代碼，在這裡做一次變數的適配
    var obj = option.obj;
    var attrs = option.attrs;
    var duration = option.duration;
    var way = option.way;
    var callBack = option.callBack;
    var begins = option.begins;

//        console.log(Tween[way],way,option.way);
//
//        return;



    if(obj.isAnim) return;

    //obj開始運動了  自定義屬性
    obj.isAnim = true;


    var starts = {};

    //獲取傳入屬性的開始位置
    for(var key in attrs){
//            console.log(key);
        starts[key] = parseFloat(begins[key])||parseFloat(getStyle(obj,key))||0;
    }

    // console.log(starts);

    //對應的單位
    var uintes = {};
    for(var key in attrs){
//            console.log(attrs[key]);
        //不是字元串的直接跳出
        if(typeof attrs[key]!='string') continue;

        var num = parseFloat(attrs[key]);
        var arr = attrs[key].split(num);
//            console.log(arr);
        uintes[key] = arr[1];
    }

    // console.log(uintes);

//        var start = parseFloat(begin)||parseFloat(getStyle(obj,attr))||0;//起始位置  如果begin未傳值，那就就嘗試獲取傳入的屬性值，如果屬性值獲取失敗，就預設為0
//        console.log(start);
//        var end = 1000;//目標點
//        var duration = 1000;//動畫執行的總時間 單位是毫秒
    var startTime = Date.now();

    //所有的屬性的總路程
    var allS = {};
    for(var key in attrs){
        if(key=='transform.scale'){
            console.log(attrs[key]);
        }
        allS[key] = parseFloat(attrs[key])-starts[key]||0;
    }

    // console.log(allS);
//        var s = end - start; //總路程

//        var v = s/duration; //計算出來的速度


    //每次20ms走一幀
    // console.log(timer);
    clearInterval(timer);
    var timer = 0;
    timer = setInterval(function(){

        // console.log(attr);

        var endTime = Date.now();

        //計算出當前時間
        var t = endTime-startTime;

        if(t>=duration){
            t = duration;
            clearInterval(timer);//到達目標點要清除定時器
        }
//            console.log(t,start,s,duration);
//            console.log(Tween[way](t,start,s,duration));

        //運動的屬性
        for(var key in attrs){

            obj.style[key] = Tween[way](t,starts[key],allS[key],duration)+(uintes[key]||'');


            //透明度的相容處理
            if(key=='opacity'){
                obj.style.filter = 'Alpha(opacity='+Tween[way](t,starts[key],allS[key],duration)*100+')';
            }

            //處理scrollTop
            if(key=='scrollTop'||key=='scrollLeft'){
                obj[key] = Tween[way](t,starts[key],allS[key],duration)+(uintes[key]||'');
            }


            //transform 的處理
            var attr1 = key.split('.');
            if(attr1.length>1&&attr1[0]=='transform'){
                if(attr1[1]=='scale'){
                    obj.style[attr1[0]] = attr1[1]+'('+Tween[way](t,starts[key],allS[key],duration)+')';
                }else if(attr1[1]=='rotateZ'){
                    obj.style[attr1[0]] = attr1[1]+'('+Tween[way](t,starts[key],allS[key],duration)+'deg)';
                }

            }


        }




        if(t==duration){
            obj.isAnim = false;
            //等到上一個動畫完成 然後再調用
            if(callBack){
                callBack(obj);
            }
        }


    },20);


    obj.clearInterval = function(){
        clearInterval(timer);
        obj.isAnim = false;
    };
}



//抖動函數：
/*
 * obj: 抖動的對象
 * attr: 抖動的屬性
 *
 * */
function shake(obj,attr,s,f,callBack){
//        var s = 40; //最大偏移量
//        var f = 10; //衰退值
//        console.log(obj.isShake);
    if(obj.isShake) return;
    obj.isShake = true;

    var oldSite = parseFloat(getStyle(obj,attr));//抖動之前的位置

//    var arr = [-10,10,-5,5,0];
    var arr = [];

//    for(var i=0;i<?;i++){
//        arr[i] = -s;
//        arr[i+1] = s;
//    } for迴圈無法實現 改用while迴圈

    while(s>0){ //創造抖動的偏移量集合
        arr[arr.length] = -s;
        arr[arr.length] = s;
        s -= f;
    }
    arr[arr.length] = 0;//加上一個0
//        console.log(arr);

    var num = 0;
    clearInterval(timer);
    var timer = 0;
    timer = setInterval(function(){

        obj.style[attr] = oldSite+arr[num]+'px';
        if(arr[num]==0){
            clearInterval(timer);
            obj.isShake = false;
            callBack&&callBack();
        }
        num++;
    },30);
}


//補0函數：
function format(num){
    return num<10?'0'+num:''+num;
}


//修改search某一個值的函數 如果不傳任何參數，將返回一個包含search屬性值的對象
function editSearch(name,value,bool){
    var search = window.location.search;// typeof => string

    console.log(search);

    //如果要修改某個值  先把字元串轉成對象

    //?user=yinwei&pwd=123456

    var info = search.substring(1);


    //把對應的信息分組
    var info = info.split('&');


    var searchObj = {};

    //info已經是一個數組，需要遍歷拆分
    for(var i=0;i<info.length;i++){
        var arr = info[i].split('=');


        searchObj[arr[0]] = arr[1];
    }


    if(arguments.length==0){
        //如果沒有傳入任何參數，那麼程式就假定用戶可能是需要search的對象
        return searchObj;
    }



    searchObj[name] = value;//改值

    //把改好的值在拼接回字元串
    var arr = [];
    var n = 0;
    for(key in searchObj){
        arr[n] = key + '=' +searchObj[key];
        n++;
    }

    console.log(arr);
    search = '';
    for(var i=0;i<arr.length;i++){
        search += arr[i]+'&';
    }

//        console.log(search.slice(0,-1));

    if(bool){ //有時候並不希望直接刷新頁面
        return search.slice(0,-1);
    }


    window.location.search = search.slice(0,-1);

}

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於調用jquery利用ajax驗證數據，返回亂碼的問題
    以前遇到一個問題，頁面編碼沒問題，後臺返回的編碼也沒問題，但是ajax返回的json就是不講道理的亂碼，查看過http響應頭信息發現請求編碼與頁面編碼不一致 網上搜了好多方法，包括改編碼，重新建頁面都不行！ 最後解決方法： 加上了 contentType: "application/x-www-fo ...
  • 前端工程化思考與實踐（二）
    4. 前端工程化開發實踐 由於Nodejs 、npm的環境搭建往上很多，這裡就不過多介紹它們了。 這裡我們將更多介紹FIS3、RequireJS 、r.js。 4.1 模塊化開發： 4.1.1 開發目錄結構 左圖為開發目錄結構， 右圖中新增js 目錄、fis-conf.js文件，js 目錄用來存放r ...
  • JavaScript ECMAScript版本介紹
    介紹ECMAScript各版本的內容，以及使用Babel把ES6及以上的代碼編譯為ES5. ...
  • ckeditor：新增時會得到上次編輯的內容
    參考網址：http://blog.sina.com.cn/s/blog_6961ba9b0102wwye.html 第一次新增時沒有問題，編輯器裡面內容為空，編輯數據時，也是正常，但是第二次點擊新增時會出現編輯時的內容。 分析可能是第二次新增時還是取的上次的實例，即使用CKEDITOR.instan... ...
  • js閉包理解
    為了完全理解這個老生常談的東西，查來查去，算是初步知道這是個什麼鬼，怎麼用，為什麼用 閉包： 外部函數定義的內部函數就是閉包。 閉包的作用及好處： 閉包給訪問外部函數定義的內部變數創造了條件。也將關於函數的一切封閉到了函數內部，減少了全局變數，這也是閉包的真實含義。 在理解閉包之前.最好能先理解一下 ...
  • Web前端學習——CSS
    一、CSS簡介CSS全稱cascading style sheeding，層疊樣式列表。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。二、CSS組成1、選擇器（1）標簽選擇器 （2）ID選擇器 （3）class選擇器 （4）關聯選擇器（層級選擇器，空格）類似spa ...
  • express學習（三）—— cookie和session
    express學習（三）—— cookie和session cookie存在瀏覽器中，最大隻能保存4K數據，不安全 session存在伺服器中，不能獨立（先讀取cookie再讀取session），較安全 cookie 工具 發送cookie： 基本的東西先寫好： 讀取cookie 接著，用cooki ...
  • js重載的實現
    在JavaScript高級程式設計書中看到 因此，要模擬出重載的效果，只有兩種方法：1.參數的類型；2.參數的數量 本人一開始學會的通過參數類型來實現重載的方法 用Switch 語句通過參數類型來模擬出重載效果。 關於Switch 語句還有個有個小技巧：case的連續執行 當執行函數sum('sum ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類