zoukankan      html  css  js  c++  java
  • 图形的滚动及颜色区域的拉移

    首先准备两个盒子:

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

    再写样式:

      body{
                 2000px;
                height: 2000px;
            }
            .box{
                 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

  • 相关阅读:
    POJ3259
    常见OJ评判结果对照表
    python初尝试,写一个简单的爬虫程序
    springboot整合swagger,前后端接口规范
    idea 简单添加springmvc
    idea 搭建web项目
    java实现二分查找
    python语法
    kafka linux 常用操作指令
    spring 容器
  • 原文地址:https://www.cnblogs.com/dzlx/p/8120516.html
Copyright © 2011-2022 走看看