相冊

来源: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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類