• Web API (window里面的内置对象) 、 (三大系列)、(自调用函数)、(拖拽的模态框)、(放大镜效果)


    一 、window里面的内置对象  :

    1.  location :

    location属性用于获取或设置    窗体的URL ,可以解析UrL  ,这个属性返回的是location对象 ;

    URL语法格式  :

    (1)  location . href  :只要是赋值用来跳转页面的 ,获取的是地址栏的 url ;

    (2)  location . search :获取 url 后面的参数  ?后面的都是参数  ;

    (3)  location . reload () 刷新 ,不写参数或者写 false 代表的是普通刷新 ,

                有缓存就用缓存 ,没有缓存就去请求服务器 ,

                设置true强制刷新 ,直接请求服务器 ;

    (4)  location . assign () 跳转页面  ;

    (5)  location . replace () 跳转 ,不存在历史记录中 ,就不能进行回退  ;

    (6)  substr('起始位置' ,截取几个字符);

    (7)  split ('  ')利用什么分割成数组 ;

     

    2. navigation :

    (1)  userAgent  获取的是客服端的类型  (浏览器  、手机 、平板、);

    (2)判断用户在哪个终端打开 :

    3. history :

    (1)  history . forward ()前进 ;

    (2)  history . back ()后退 ;

    (3)  history . go ()  整数代表的是前进 ,负数代表的是后退 ;

    二 、三大系列 :

    1.offset系列 :

    (1)element . offsetTop |  offsetLeft    ;获取的是元素的偏移量 ,参照的是带有定位的父辈元素 ,如果父辈元素没有定位 ,参照的是 body ;

    (2)element . offsetWidth |  offsetHeight   ;获取的是元素的宽高 ,padding + border + 内容   ;

    (3)element . offsetParent  ;获取的是带有定位的最近的父辈元素 ,如果父辈元素都没有定位 ,那么获取的是body  ;

    2.client新列 :

    (1)element . clientLeft |  clientTop   ;获取的是左边框 |  上边框的高度   ;

    (2)element . clientWidth |  clientHeight   ;获取的是元素的宽高 ,padding + 内容  ;

    三 、自调用函数  :

    (1)(  function( ){}  )(   ) ;

    (2)好处 :防止命名污染  ;

    四 、拖拽的模态框 : 

    1. 先获取到按钮的对象 ,获取登录窗口的对象  ;

    2.给按钮注册点击事件   (让登录窗口进行显示);

    3.获取叉叉的按钮 ,并且注册点击事件  (让登录窗口进行隐藏) ;

    4.给登录框注册一个 鼠标按下事件  mousedown  :

      (1)我要获取鼠标在盒子中的距离  = 鼠标在页面的距离 - 登录窗口距离页面的距离  ;

      (2)我还要给 document 对象绑定一个鼠标移动事件 :

           a :在移动事件里面获取鼠标在页面中的位置   ;

           b :用这个值 - 鼠标在盒子中的移动的距离   ;

           c :把这个值赋值给 登录窗口  ;

    5.还需要给 document 绑定一个鼠标抬起事件 mouseup   (注销 移动事件 );

    五 、放大镜效果  :

    1.获取相关元素对象 (preview_img  (大盒子) ,mask(遮罩),bigImg(大图片));

    2.给 大盒子注册 鼠标移入和鼠标移出事件 :

    (1)移入事件里面 ,让遮罩和大图片进行显示 ;

    (2)移出事件里面 ,让遮罩和大图片进行隐藏 ;

    3.在移入事件里面  ;

      (1)获取到当前鼠标在  大盒子中的位置 ;

      (2)拿到鼠标在盒子中的位置后 ,X坐标 - 盒子的宽度 ,Y轴坐标 - 盒子的高度 ,此时鼠标才在盒子的中间  ;

      (3)做边界的校验   水平方向有一个最小值和最大值 , 垂直方向有一个最小值和最大值 :

         a :最小值 就是0  ,最大值就是 :大盒子的宽度 - 遮罩的宽度 ;

         b :如果说当前的偏移量小于 0 ,那么我就让这个偏移量等于 0  ;

         c :如果说当前的偏移量大于  最大值 , 那么我就让这个偏移量等于这个最大值 ;

      (4)把校验的这个值 设置给 遮罩 的 left 和top 的偏移量  ;

      (5)遮罩在移动的时候,大图应该也会相应的移动,他们移动的不是相等的像素,而是存在一个比例关系 :

         a :遮罩移动的距离 / 遮罩能移动的最大距离  =  大盒子移动的距离 / 大盒子能移动的最大距离  ;

         b :大盒子的移动距离 = 遮罩移动的距离 / 遮罩能移动的最大距离  * 大盒子能移动的最大距离  ;

         c :在这个公式里面, 直接可以用的有: 遮罩移动的距离,遮罩能移动的最大距离  ;

         d :大盒子能移动的最大距离与我们算遮罩移动最大距离是一样的  ;

         e :设置给 大图片的left 和 top 偏移量即可    值 是负值,因为大图片是往左走 ;

          

  • 相关阅读:
    EventBus--介绍
    EventBus--出现的问题
    File存对象--android 的File存储到SD卡();
    SharePrecences--(json+sharePrecences)存list 或对象
    缓存AsimpleCache -- 解决Android中Sharedpreferences无法存储List数据/ASimpleCache
    ViewPager--左右可滑动的
    git之win安装git和环境配置及常用命令总结
    mySql事务_ _Java中怎样实现批量删除操作(Java对数据库进行事务处理)?
    eclispe---快捷键设置
    bug_ _org.json.JSONException: End of input at character 0 of
  • 原文地址:https://www.cnblogs.com/piyangtao/p/11545434.html
Copyright © 2020-2023  润新知