个人主页 文章新闻 电子商务 动漫卡通 旅游风景 学校相关 音乐网页 美食网页 文化习俗 影视作品 明星偶像 特色主题 体育运动 军事武器 游戏娱乐 公司团体
前端开发 软件推荐 其他心得
当前位置:主页 > 学习笔记 > 前端开发 >

仿QQ拉拽去掉消息提示

仿QQ拖拽去掉消息提示

效果图:

 

HTML:
<!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>
</head>
<body>
    <ul>
        <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">1</span>
                    </div>
               </div>
            </div>
        </li>
        <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">12</span>
                    </div>
               </div>
            </div>
        </li>
        <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">66</span>
                    </div>
               </div>
            </div>
        </li>
        <li>
                <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
                <div class="f1">
                   <div class="df">
                       <div class="f1 tit">群通知</div>
                       <div class="c3">上午9:00</div>
                   </div>
                   <div class="df">
                        <div class="f1 c3">hugeannex 申请加入javascript</div>
                        <div>
                            <span class="dot">99+</span>
                        </div>
                   </div>
                </div>
            </li>
            <li>
                <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
                <div class="f1">
                <div class="df">
                    <div class="f1 tit">群通知</div>
                    <div class="c3">上午9:00</div>
                </div>
                <div class="df">
                        <div class="f1 c3">hugeannex 申请加入javascript</div>
                        <div>
                            <span class="dot">99+</span>
                        </div>
                </div>
                </div>
            </li>
            <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">99+</span>
                    </div>
               </div>
            </div>
        </li>
        <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">99+</span>
                    </div>
               </div>
            </div>
        </li>
        <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">99+</span>
                    </div>
               </div>
            </div>
        </li>
        <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">99+</span>
                    </div>
               </div>
            </div>
        </li>
        <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">99+</span>
                    </div>
               </div>
            </div>
        </li>
        <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">99+</span>
                    </div>
               </div>
            </div>
        </li>
        <li>
            <img src="http://www.zerogzs.com/uploads/allimg/190410/2159302191-1.jpg" alt="" />
            <div class="f1">
               <div class="df">
                   <div class="f1 tit">群通知</div>
                   <div class="c3">上午9:00</div>
               </div>
               <div class="df">
                    <div class="f1 c3">hugeannex 申请加入javascript</div>
                    <div>
                        <span class="dot">99+</span>
                    </div>
               </div>
            </div>
        </li>
    </ul>
    <canvas></canvas>
    <script src="http://www.zerogzs.com/uploads/allimg/190410/215930O34-13.jpg"></script>
</body>
</html>

JavaScript:

var cvs=document.querySelector("canvas"),
             width,
             height,
             ctx,
             ball1=new Ball(0,0,5),
             ball2=new Ball(0,0,5),
             maxDistance=100,
             dpr=window.devicePixelRatio||1,
             spring=0.2,
             friction=0.9,
             drag={
                 isMove:false,
                 target:null,
                 radius:0,
                 distance:0,
                 x:0,
                 y:0,
                 offsetX:0,
                 offsetY:0,
                 scrollTop:0
             };

        function resize(){
            cvs.width=width=innerWidth*dpr;
            cvs.height=height=innerHeight*dpr;
            ctx=cvs.getContext("2d");

            maxDistance=Math.min(width,height)*0.2;
        }

        window.addEventListener("resize",resize,false);

        if(typeof window.onmousedown!=="undefined")
        {
            window.addEventListener("mousedown",pointerDownHandle,false);

            window.addEventListener("mousemove",pointerMoveHandle,false);

            window.addEventListener("mouseup",pointerUpHandle,false);

            window.addEventListener("mouseleave",pointerUpHandle,false);
        }
        else{
            window.addEventListener("touchstart",function(e){
                e.clientX=e.targetTouches[0].clientX;
                e.clientY=e.targetTouches[0].clientY;
                pointerDownHandle(e);
            },{passive: true});
            window.addEventListener("touchmove",function(e){
                e.clientX=e.targetTouches[0].clientX;
                e.clientY=e.targetTouches[0].clientY;
                pointerMoveHandle(e);
            },{passive: true});
            window.addEventListener("touchend",pointerUpHandle,{passive: true});
            window.addEventListener("touchcancel",pointerUpHandle,{passive: true});
        }

        function pointerDownHandle(e){
            var t=e.target;
            if(t.className==="dot"){
                drag.scrollTop=scrollY;
                document.documentElement.classList.add("locked");
                document.body.scrollTop=drag.scrollTop;
                drag.isMove=true;
                drag.target=t;
                drag.x=e.clientX;
                drag.y=e.clientY;

                setBalls(t);
                drag.offsetX=drag.x*dpr-ball2.x;
                drag.offsetY=drag.y*dpr-ball2.y;

                cvs.style.display="block";
            }
        }

        function pointerMoveHandle(e){
            if(drag.isMove){                
                var t=drag.target,
                    cx=e.clientX,
                    cy=e.clientY;

                setTranslate(t,cx-drag.x,cy-drag.y);  
                ball1.x=cx*dpr-drag.offsetX;
                ball1.y=cy*dpr-drag.offsetY;  
                draw(); 
            }
        }

        function pointerUpHandle(e){
            if(drag.isMove){

                drag.isMove=false;

                //回弹,或者消失动画
                if(drag.distance>maxDistance){
                    //消失动画
                    ctx.clearRect(0,0,width,height);
                    drag.target.classList.add("dot_hide");
                    cvs.style.display="none";
                    document.documentElement.classList.remove("locked");
                    window.scrollTo(0,drag.scrollTop);

                }
                else{
                    setBounce(drag.target);
                } 
                drag.target=null;   

            }        
        }

        resize();

        function setBalls(el){
            var bound=el.getBoundingClientRect();
            ball1.radius=ball2.radius=bound.height*0.5*dpr;
            ball1.x=ball2.x=(bound.left+bound.width*0.5)*dpr;
            ball1.y=ball2.y=(bound.top)*dpr+ball2.radius;

            drag.radius=ball2.radius;

        }

        function setTranslate(el,x,y){
            var ts="translate(";
            ts+=x;
            ts+="px,";
            ts+=y;
            ts+="px)";

            el._tx=x;
            el._ty=y;
            el.style.transform=el.style.webkitTransform=ts;
        }

        function setBounce(el){
            var tx=el._tx,
                ty=el._ty,
                vx=0,
                vy=0,
                timer;

            function run(){
                timer=requestAnimationFrame(run);

                vx+=tx*spring;
                vy+=ty*spring;
                vx*=friction;
                vy*=friction;

                tx-=vx;
                ty-=vy;
                ball1.x-=vx*dpr;
                ball1.y-=vy*dpr;

                if(Math.abs(tx)<1 && Math.abs(ty)<1){
                    setTranslate(el,0,0);
                    cancelAnimationFrame(timer);
                    cvs.style.display="none";
                    document.documentElement.classList.remove("locked");
                    window.scrollTo(0,drag.scrollTop);
                }
                else{
                    setTranslate(el,tx,ty);
                    draw();
                }

            }
            run();
        }

        function draw(){
            ctx.clearRect(0,0,width,height);

            //计算球2的半径
            var distance=Math.hypot(ball2.x-ball1.x,ball2.y-ball1.y);

            drag.distance=distance;

            if(!distance || distance>maxDistance){
                return;
            }

            ball2.radius=drag.radius*(1-distance/maxDistance*0.7);
            ball2.draw(ctx);

            //metaball数据
            var data=metaball(ball1, ball2,maxDistance);
            if(data){
                var cutDots=data.cutDots,
                    ctrlDots=data.ctrlDots;
                ctx.beginPath();
                  ctx.moveTo(cutDots[0].x,cutDots[0].y);
                  ctx.bezierCurveTo(ctrlDots[0].x,ctrlDots[0].y,ctrlDots[3].x,ctrlDots[3].y,cutDots[3].x,cutDots[3].y);
                  ctx.lineTo(cutDots[2].x,cutDots[2].y);
                  ctx.bezierCurveTo(ctrlDots[2].x,ctrlDots[2].y,ctrlDots[1].x,ctrlDots[1].y,cutDots[1].x,cutDots[1].y);
                ctx.closePath(); 
                ctx.fill();     
            }        
        }

        function Ball(x,y,radius){
            this.x=x;
            this.y=y;
            this.radius=radius;
        }

        Ball.prototype.draw=function(ctx){
            ctx.beginPath();
            ctx.fillStyle="red";
            ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
            ctx.fill();
        };

以上是演示截图和代码,分享给大家!转载请注明网址:http://www.zerogzs.com/z/qianduankaifa/20190410/175.html


 


我们更专业、更了解你的需求

通过浏览本站作品您会发现,我们提供的每一个作品从内容到设计均是完全贴切于学生作品的。而且每一个作品 均由本站精心制作。我们的作品制作优良,代码简单易懂,界面美观,功能强大。个别作品我们会提供设计文档,供初学者学习使用。

我们自己开发了完善的客户系统,注册本站后通过记录您的所在学校,可以防止其他同校的人与您购买相同作品。

我们只记录学校名称,不记录其他任何信息,保证您的隐私。