图形的滚动及颜色区域的拉移

2018-06-24 01:09:46来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

首先准备两个盒子:

 <div id = "oDiv" style = "top:40px;" class = "box">
        <div id = "ldiv" style="height:30px ;background: chartreuse "></div>
    </div>

再写样式:

  body{
            width: 2000px;
            height: 2000px;
        }
        .box{
            width: 150px;
            height: 200px;
            position: absolute;
            right: 20px;
            border: 1px solid red;
        }
        .aff{
            transition:all 1s;
        }

最后是js代码部分:

function scrollEvent(obj,xEvent,fun){
        if(obj.attachEvent){
            obj.attachEvent("on"+xEvent,fn);
            }
            if(obj.addEventListener){
                obj.addEventListener(xEvent,fn, true);//addEventListener  w3c标准。
        }
    }
    window.onload = function (){
        dom.addClass($("oDiv"),"aff");
        var top = $("oDiv").style.top;
        top = parseInt(top);
        scrollEvent(document,"scroll",function(){
            var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
            var h = scrollTop+top+"px";
            $("oDiv").style.top = h;
        });
        
        $("lDiv").onmousedown = function(){
            dom.removeClass($("oDiv"),"aff");
            var ev = window.event||event;
            var sjw = ev.clienX - $("oDiv").offsetLeft;
            var sjw = ev.clienY - $("oDiv").offsetTop;
                document.onmousemove = function(){
                    ev = window.event||event;
                    var x = ev.clienX;
                    var y = ev.clienY;
                    $("oDiv").style.left = (x-sjw)+"px";
                    $("oDiv").style.top = (y-sjw)+"px";
                }
        }
        $("lDiv").onmouseup = function(){
            dom.addClass($("oDiv"),"aff");
            document.onmousemove = null;
        }
    }

演示效果:http://localhost:63342/demo/work7.html

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js 时间戳转换为‘yyyy-MM-dd hh:mm’格式(es6语法)

下一篇:JavaScript