你的位置:首页 > Java教程

[Java教程]js特效第九天


offset家族(获取元素尺寸)

offsetWidth得到对象的宽度,自己的,与他人无关

offsetWidth = width+border+padding,不包含margin

offsetHeight得到对象的高度,自己的,与他人无关

offsetHeight = Height+border+padding,不包含margin

注意:直接demo .style.width是无法得到宽度的,只可以使用demo.offsetWidth,或者使用行内样式,但是不建议使用。offsetWidth、offsetHeight是活的,可以动态检测宽度和高度。活的,可以动态检测宽度和高度。

注意:一定要先清样式*{margin=0;padding=0;}

对于在以前遇到的案例中,盒子的一半,例如轮播图下面的小li,都是left:50%同时还要调margin,但是现在就可以先检测自己盒子的宽度,然后盒子的一半就可以。

offsetWidth = width + border + padding

div { width:220px; border-left:2px solid red; padding:10px;}

div.offsetWidth = 220 + 2 + 20

为什么不用 div.style.width 因为东西 只能得到行内的数值不能有padding和border。

offsetLeft,返回距离上级盒子(带有定位,什么定位都可以)左边的位置。

注意:如果父级都没有定位则以body为准,这里的父级指的是所有的上一级,不仅仅指的是父亲。如果父级有定位,则以父级为准。

注意:只有左和上,没有右和下,jq也是一样的。

注意:因为带有自身的宽以及padding,所以就记为,子盒子边框与有定位的父盒子边框与边框之间的距离即可。

offsetTop与offsetLeft的情况是一样的。

筋斗云案例

筋斗云随鼠标移动原理:鼠标移动时,得到当前位置的offsetLeft值,并且让target等于当前offsetLeft。

鼠标没有点,筋斗云自动回到原处,或者鼠标点击了,当鼠标移动后移开时,筋斗云自动回到上次点击的地方的原理:回归原处target=0;回到上次点击地方是点击了哪里要把那里的位置存下来,然后target等于这个位置。

<style>
         *{margin: 0; padding: 0;}
         ul {list-style:none;}
         body {
             background-color: #000;
         }
         .nav {
             width: 800px;
             height: 42px;
             background:url("images/rss.png") no-repeat right center #fff;
             margin: 100px auto;
             border-radius: 5px;
             position: relative;
         }
         .cloud {
             width: 83px;
             height: 42px;
             position: absolute;
             top: 0;
             left: 0;
             background: url(images/cloud.gif) no-repeat;
         }
         .nav ul {
             position: absolute;
             top: 0;
             left: 0;
         }
         .nav li {
             float: left;
             width: 83px;
             height: 42px;
             line-height: 42px;
             text-align: center;
             color: #000;
             cursor: pointer;
         }
     </style>
</head>
<body>
<div class="nav" id="nav">
     <span class="cloud" id="cloud"></span>
     <ul>
         <li>首页新闻</li>
         <li>师资力量</li>
         <li>活动策划</li>
         <li>企业文化</li>
         <li>招聘信息</li>
         <li>公司简介</li>
         <li>上海校区</li>
         <li>广州校区</li>
     </ul>
</div>
</body>
</html>
<script>
     var cloud  = document.getElementById("cloud");  // 云彩
     var nav = document.getElementById("nav");
     var lis = nav.children[1].children;
     var current = 0;   // 用于存放点击时候的 offsetLeft
     //alert(lis.length);
     for(var i=0; i<lis.length;i++) {
         lis[i].onmouseover = function() {
             // alert(this.offsetLeft);
             target = this.offsetLeft;  // 把左侧的位置 ,给 target
         }
         lis[i].onmouseout = function() {
             target = current;     // 鼠标离开  target 是 刚才我们点击的位置
             /* target=0;  //筋斗云回到最前面*/
         }
         lis[i].onclick = function() {
            current = this.offsetLeft;   //  点击的时候 吧当前位置 存贮一下
         }
     }
     // 缓动公式
     var leader = 0, target = 0;
     setInterval(function(){
         leader = leader + (target - leader ) / 10;
         cloud.style.left = leader + "px";
     },10);
</script>

offsetParent

返回该对象的父级,如果当前元素的父级没有定位,那么就以body为定位。如果有定位,则取最近的那个父级元素。

parentNode必须是亲父亲

offsetParent是带有定位的父亲,不一定是亲的。

offsetTop/ style.top区别

一、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right

二、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

style.left = 300px parseInt(300px) 结果 300

parseInt(style.left) + parseInt(style.left)

三、offsetTop 只读,而 style.top 可读写。只读就是可以得到值,但是不能更改值。可读写是可以更改值,也可以得到值。

如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便

事件对象

我们学过一些事件 : onmouseover onmouseout onclick .....

btn.onclick = function(event) { 语句 }

event 单词翻译过来 事件 的意思

event 就是事件的对象 指向的是 事件 是 onclick

再触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。

比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。

普通浏览器支持 event

ie 678 支持 window.event

所以我们 采取兼容性的写法 :

var event = event || window.event;

属性

作用

data

返回拖拽对象的URL字符串(dragDrop)

width

该窗口或框架的高度

height

该窗口或框架的高度

pageX

光标相对于该网页的水平位置(ie无)

pageY

光标相对于该网页的垂直位置(ie无)

screenX

光标相对于该屏幕的水平位置

screenY

光标相对于该屏幕的垂直位置

target

该事件被传送到的对象

type

事件的类型

clientX

光标相对于该网页的水平位置 (当前可见区域)

clientY

光标相对于该网页的水平位置

pageX clientX screenX 区别

screen X screenY 是以我们的电脑屏幕 为基准点测量

pageX pageY 以我们的文档(绝对定位)的基准点对齐。如果有滚动条,那么点击处到页面最顶端的距离就会更长。ie678 不认识

clientX clientY以 可视区域为基准点,类似于固定定位。

坐标案例

<style>
         *{margin:0; padding:0;}
         .demo {
             width: 400px;
             height: 400px;
             background-color: pink;
             margin: 100px;
         }
     </style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
<script>
     var div = document.getElementsByTagName("div")[0];
     div.onmousemove = function(){
        var event= event ||window.event;
         var x = event.clientX - this.offsetLeft;
         var y =event.clientY - this.offsetTop;
         this.innerHTML = x+"px"+y+"px";
     }
</script>

点击跟随鼠标案例

<style>
         #image {
             width: 99px;
             position: absolute;
             top:0;
             left: 0;
         }
     </style>
</head>
<body>
<img src="img.jpg" alt="" id="image"/>
</body>
</html>
<script>
     var image = document.getElementById("image");
     document.onclick = function(event) {
         var event = event || window.event;
         targetX = event.clientX - image.offsetWidth /2;
         targetY = event.clientY - image.offsetHeight /2;
     }
     // 缓动
     var     leaderX = 0,
             leaderY= 0,
             targetX = 0,
             targetY = 0;
     setInterval(function() {
         leaderX = leaderX + (targetX - leaderX) / 10;
         leaderY = leaderY + (targetY - leaderY) / 10;
         image.style.left = leaderX + "px";
         image.style.top = leaderY + "px";
      },10)
</script>

常用事件

onmouseover onmouseout onclick

onmousemove 当鼠标移动的时候 就是说,鼠标移动一像素就会执行的事件

div.onmousemove = function() { 语句 }

当鼠标再div 身上移动的时候,就会执行。

得到在某个盒子内的坐标:

div.onmouseover 和 div.onmousemove 区别

他们相同点 都是 经过 div 才会触发

div.onmouseover 只触发一次

div.onmousemove 每移动一像素,就会触发一次

onmouseup 当鼠标弹起

onmousedown 当鼠标按下的时候

1.拖动 原理 == 鼠标按下 接着 移动鼠标 。

bar.onmousedown = function(){

document.onmousemove = function(){

}

}

当我们按下鼠标的时候,就要记录当前 鼠标 的位置 - 大盒子的位置
算出 bar 当前 在 大盒子内的距离 。

防止选择拖动

我们知道 按下鼠标然后拖拽可以选择文字 的。

清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

京东放大镜案例

布局要点:首先有一个大盒子,大盒子里面装一个小盒子和一个大盒子2,小盒子里面放小图,大盒子2里放大图,然后再小盒子里面在相对定位一个小方块透明。大盒子2相对定位大盒子到右边。

cursor:move;变成十字光标

特效要点:小黄色的小方块的坐标等于鼠标的动态坐标。以及判断小图的x和y不让其超出小盒子。还要注意大盒子与小盒子图片显示的比例。

<style>
         * {margin: 0;padding: 0;}
         .box {
             width: 350px;
             height: 350px;
             margin:100px;
             border: 1px solid #ccc;
             position: relative;
         }
         .big {
             width: 450px;
             height: 450px;
             position: absolute;
             top: 0;
             left: 360px;
             border: 1px solid #ccc;
             overflow: hidden;
             display: none;
         }
         .mask {
             width: 100px;
             height: 100px;
             background: rgba(255, 255, 0, 0.4);
             position: absolute;
             top: 0;
             left: 0;
             cursor: move;
             display: none;
         }
         .small {
             position: relative;
         }
         .big img {
             position: absolute;
             top: 0;
             left: 0;
         }
     </style>
</head>
<body>
<div class="box" id="fdj">
     <!--小盒子-->
     <div class="small">
         <img src="images/001.jpg" alt=""/>
         <div class="mask"></div>
     </div>
     <div class="big">
         <img src="images/0001.jpg" alt=""/>
     </div>
</div>
</body>
</html>
<script>
    var fdj = document.getElementById("fdj");  // 获得最大的盒子
     var small = fdj.children[0];  // 获得small 小图片 350盒子
     var big = fdj.children[1];  // 获得 大图片 800 盒子
     var mask = small.children[1];  // 小的黄色盒子
    var bigImage = big.children[0]; // 大盒子里面的图片
     small.onmouseover = function() {   // 鼠标经过显示出他们
         mask.style.display = "block";
         big.style.display = "block";
     }
     small.onmouseout = function() {
         mask.style.display = "none";
         big.style.display = "none";
     }
     //  鼠标在small 内移动
    var x = 0;
    var y = 0;
     small.onmousemove = function(event) {
         var event = event || window.event;
          x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;  // 再某个盒子内的坐标
          //alert(this.offsetLeft);
          y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
          if(x < 0)
          {
              x = 0;
          }
          else if(x > small.offsetWidth - mask.offsetWidth)
          {
              x = small.offsetWidth - mask.offsetWidth;
          }
          if(y<0)
          {
             y = 0;
          }
          else if(y > small.offsetHeight - mask.offsetHeight)
          {
              y = small.offsetHeight - mask.offsetHeight;
          }
          mask.style.left = x + "px";
          mask.style.top = y + "px";
          /*计算  :  夫子 一顿吃 2个馒头    娇子  一顿 5个馒头
          问  夫子今天吃了 3个馒头  娇子应该吃几个?  */
          /*计算出他们的倍数   4 / 2    2倍
           3 * 2 */
          /* 大图 /  小图  倍数
           我们 再小图移动的距离 *  倍数  ==  大图的位置*/
          bigImage.style.left =  -x *  big.offsetWidth /small.offsetWidth + "px";
          bigImage.style.top =  -y *  big.offsetHeight /small.offsetHeight + "px";
     }
</script>

水平滚动条拖动案例

<style>
         * {margin:0;padding:0;}
         .scroll {
             width: 400px;
             height: 8px;
             background-color: #ccc;
             margin: 100px;
             position: relative;

         }
         .bar {
             width: 10px;
             height: 22px;
             background-color: #369;
             position: absolute;
             top: -7px;
             left: 0;
             cursor: pointer;
         }
         .mask {
             width: 0;
             height: 100%;
             background-color: #369;
             position: absolute;
             top: 0;
             left: 0;
         }
     </style>
</head>
<body>
<div class="scroll" id="scrollBar">
     <div class="bar"></div>
     <div class="mask"></div>
</div>
<div id="demo"></div>
</body>
</html>
<script>
     var scrollBar = document.getElementById("scrollBar");
     var bar  = scrollBar.children[0];
     var mask = scrollBar.children[1];
     var demo = document.getElementById("demo");
    /* document.onmousedown = function() {
         alert(11);
     }*/
     bar.onmousedown = function(event) {
         var event = event || window.event;
         var leftVal = event.clientX - this.offsetLeft;
        // alert(11);
         // 拖动一定写到 down 里面才可以
         var that = this;
         document.onmousemove = function(event) {
             var event = event || window.event;
             that.style.left = event.clientX - leftVal  + 'px';
             //alert(that.style.left);
             var val = parseInt(that.style.left);
             if(val < 0)
             {
                 that.style.left = 0;
             } else if(val > 390)
             {
                 that.style.left = "390px";
             }
             mask.style.width = that.style.left;  // 遮罩盒子的宽度
             //计算百分比
             demo.innerHTML = "已经走了:"+ parseInt(parseInt(that.style.left) / 390 * 100) + "%";
             window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
         }
         document.onmouseup = function() {
             document.onmousemove = null;   // 弹起鼠标不做任何操作
         }
     }

</script>