web基础学习之路

第七周第二天笔记

2018-09-02  本文已影响0人  果木山

1 结构父级与定位父级

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>结构父级与定位父级</title>
     <style>
         div{
             padding: 200px;
             border: 20px solid #000;
             font-size: 40px;
             color: #fff;
         }
         .divOuter{
             background-color: red;
             position: relative;
         }
         .divCenter{
             background-color: green;
         }
         .divInner{
             background-color: blue;
             position: absolute;
             left: 300px;
             top: 350px;
         }
     </style>
 </head>
 <body class="body">
 <div class="divOuter">divOuter
     <div class="divCenter">divCenter
         <div class="divInner" id="divInner">divInner</div>
     </div>
 </div>
 <script>
     var oInner=document.getElementById("divInner");
     //1 求出divInner所有的结构父级，用parentNode
     var par=oInner.parentNode;
     while(par){
         alert(par);
         par=par.parentNode;
     }
     /*弹出的结果
     * [object HTMLDivElement]，指的是divCenter元素节点
     * [object HTMLDivElement]，指的是divOuter元素节点
     * [object HTMLBodyElement]，指的是body元素节点
     * [object HTMLHtmlElement]，指的是html元素节点
     * [object HTMLDocument]，指的是<!DOCTYPE html>，文档节点；
     * */
     //2 求出divInner所有的定位父级，用offsetParent
     var ofpar=oInner.offsetParent;
     while(ofpar){
         alert(ofpar.className);
         ofpar=ofpar.offsetParent;
     }
     /*弹出的结果
     * divOuter
     * body
     * */
 </script>
 </body>
 </html>

2 封装offset

 <script>
     var oInner=document.getElementById("divInner");
     //需求：封装方法，求出某元素到body元素的offsetLeft，offsetTop值
     //参数 元素，返回值为对象，将值作为属性值
     function offset(ele) {
         var l=ele.offsetLeft;
         var t=ele.offsetTop;
         var par=ele.offsetParent;
         while(par && par!==document.body){
             l+=par.offsetLeft+par.clientLeft;
             t+=par.offsetTop+par.clientTop;
             par=par.offsetParent;
         }
         return {left:l,top:t};
     }
     console.log(offset(oInner).left);
 </script>

3 封装win

 //封装utils工具库，自执行函数，返回对象，添加属性名及属性值；
 var utils=(function () {
     return {
         win: function (attr, value) {
             //当获取时，需要返回值，不需要传入value实参
             //当设置时，不需要返回值，需要传入value实参
             //判断是否传入value值
             if(typeof value==="undefined"){
                 return document.documentElement[attr] || document.body[attr];
             }
             document.documentElement[attr]=document.body[attr]=value;
         }
     }
 })();

4图片跑马灯实例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>图片跑马灯</title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         div{
             width: 800px;
             height: 200px;
             margin: 100px auto;
             border: 10px dashed green;
             position: relative;
             overflow: hidden;
         }
         ul{
             height: 200px;
             position: absolute;
             left: 0;
             right: 0;
         }
         ul li{
             float: left;
             border: 2px solid red;
         }
         ul li img{
             width: 196px;
             height: 196px;
             vertical-align: middle;
         }
     </style>
 </head>
 <body>
 <div>
     <ul>
         <li><img src="image/1.jpg"></li>
         <li><img src="image/2.jpg"></li>
         <li><img src="image/3.jpg"></li>
         <li><img src="image/4.jpg"></li>
     </ul>
 </div>
 <script src="utils.js"></script>
 <script>
     var oUl=document.getElementsByTagName("ul")[0];
     var aLi=oUl.getElementsByTagName("li");
     //把ul里面的内容多复制一份
     oUl.innerHTML+=oUl.innerHTML;
     //必须重新设置ul的宽度，其中获取li元素的offsetWidth，包含边框的宽度
     //注意：offset获取的值都是数值，没有单位；
     oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
     setInterval(function () {
         var Left=utils.getCss(oUl,"left");
         Left-=5;
         if(Left<=-oUl.offsetWidth/2){
             Left=0;
         }
         oUl.style.left=Left+"px";
     },50);
 </script>
 </body>
 </html>

5 瀑布流实例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>瀑布流实例</title>
     <style type="text/css">
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         div{
             width: 1100px;
             margin: 20px auto;
             overflow: hidden;
             font-size: 30px;
         }
         ul{
             width: 200px;
             margin: 10px;
             float: left;
             color: white;
         }
     </style>
 </head>
 <body>
 <div>
     <ul></ul>
     <ul></ul>
     <ul></ul>
     <ul></ul>
     <ul></ul>
 </div>
 <script src="utils.js"></script>
 <script>
     //封装随机数函数，获取n到m的随机数
     var n=0;
     function rad(n,m) {
         //判断n,m必须全部是数字
         if(isNaN(n) || isNaN(m)){
             return Math.random();
         }
         //判断n大于m时，调换位置；
         if(n>m){
             var temp=n;
             n=m;
             m=temp;
         }
         return Math.round(Math.random()*(m-n)+n);
     }
     function createLi() {
         var oLi=document.createElement("li");
         oLi.style.height=rad(100,300)+"px";
         oLi.style.backgroundColor="rgb("+rad(0,255)+","+rad(0,255)+","+rad(0,255)+")";
         return oLi;
     }
     function li50(){
         var aUl=document.getElementsByTagName("ul");
         for(var i=0; i<50; i++){
             var oli=createLi();
             oli.innerHTML=++n;
             //类数组转数组，sort排序
             var ary=utils.makeArray(aUl);
             ary.sort(function (a,b) {
                 a=utils.getCss(a,"height");
                 b=utils.getCss(b,"height");
                 return a-b;
             });
             ary[0].appendChild(oli);
         }
     }
     li50();
     window.onscroll=function () {
         if(utils.win("scrollTop")+utils.win("clientHeight")+300>document.body.scrollHeight){
             li50();
         }
     }
 </script>
 </body>
 </html>

6 知识点

上一篇 下一篇

猜你喜欢

热点阅读