js学习day12

淡淡的烟草味﹌ 2023-02-26 08:23 63阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8" />
  5.   <title></title>
  6.   <script type="text/javascript">
  7.    /* * BOM * - 浏览器对象模型 * - BOM可以使我们通过JS来操作浏览器 * - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 * - BOM对象 * Window * - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 * Navigator * - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 * Location * - 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 * History * - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录 * 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页 * 而且该操作只在当次访问时有效 * Screen * - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息 * * * 这些BOM对象在浏览器中都是作为window对象的属性保存的， * 可以通过window对象来使用，也可以直接使用 * * */
  9.    //console.log(navigator);
  10.    //console.log(location);
  11.    //console.log(history);
  13.    /* * Navigator * - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 * - 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了 * - 一般我们只会使用userAgent来判断浏览器的信息， * userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容， * 不同的浏览器会有不同的userAgent * * 火狐的userAgent * Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0 * * Chrome的userAgent * Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36 * * IE8 * Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) * * IE9 * Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) * * IE10 * Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) * * IE11 * Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko * - 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了 */
  15.    //alert(navigator.appName);
  17.    var ua = navigator.userAgent;
  19.    console.log(ua); if(/firefox/i.test(ua)){ 
  20.     alert("你是火狐！！！");
  21.    }else if(/chrome/i.test(ua)){ 
  22.     alert("你是Chrome");
  23.    }else if(/msie/i.test(ua)){ 
  24.     alert("你是IE浏览器~~~");
  25.    }else if("ActiveXObject" in window){ 
  26.     alert("你是IE11，枪毙了你~~~");
  27.    }
  29.    /* * 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息 * 比如：ActiveXObject */
  30.    /*if("ActiveXObject" in window){ alert("你是IE，我已经抓住你了~~~"); }else{ alert("你不是IE~~~"); }*/
  32.    /*alert("ActiveXObject" in window);*/
  36.   </script>
  37.  </head>
  38.  <body>
  40.  </body>
  41. </html>
  52. <!DOCTYPE html>
  53. <html>
  54.     <head>
  55.         <meta charset="UTF-8">
  56.         <title></title>
  57.         <script type="text/javascript">
  58.             /* * History * - 对象可以用来操作浏览器向前或向后翻页 */
  59.             window.onload = function(){ 
  61.                 //获取按钮对象
  62.                 var btn = document.getElementById("btn"); btn.onclick = function(){ 
  63.                     /* * length * - 属性，可以获取到当成访问的链接数量 */
  64.                     //alert(history.length);
  66.                     /* * back() * - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样 */
  67.                     //history.back();
  69.                     /* * forward() * - 可以跳转下一个页面，作用和浏览器的前进按钮一样 */
  70.                     //history.forward();
  72.                     /* * go() * - 可以用来跳转到指定的页面 * - 它需要一个整数作为参数 * 1:表示向前跳转一个页面 相当于forward() * 2:表示向前跳转两个页面 * -1:表示向后跳转一个页面 * -2:表示向后跳转两个页面 */
  73.                     history.go(-2);
  74.                 };
  76.             };
  78.         </script>
  79.     </head>
  80.     <body>
  82.         <button id="btn">点我一下</button>
  84.         <h1>History</h1>
  86.         <a href="01.BOM.html">去BOM</a>
  87.     </body>
  88. </html>
  100. <!DOCTYPE html>
  101. <html>
  102.     <head>
  103.         <meta charset="UTF-8">
  104.         <title></title>
  105.         <script type="text/javascript">
  106.             /* * Location * - 该对象中封装了浏览器的地址栏的信息 */
  107.             window.onload = function(){ 
  109.                 //获取按钮对象
  110.                 var btn = document.getElementById("btn"); btn.onclick = function(){ 
  112.                     //如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
  113.                     //alert(location);
  115.                     /* * 如果直接将location属性修改为一个完整的路径，或相对路径 * 则我们页面会自动跳转到该路径，并且会生成相应的历史记录 */
  116.                     //location = "http://www.baidu.com";
  117.                     //location = "01.BOM.html";
  119.                     /* * assign() * - 用来跳转到其他的页面，作用和直接修改location一样 */
  120.                     //location.assign("http://www.baidu.com");
  122.                     /* * reload() * - 用于重新加载当前页面，作用和刷新按钮一样 * - 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面 */
  123.                     //location.reload(true);
  125.                     /* * replace() * - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面 * 不会生成历史记录，不能使用回退按钮回退 */
  126.                     location.replace("01.BOM.html");
  128.                 };
  130.             }; </script> </head> <body> <button id="btn">点我一下</button> <h1>Location</h1> <input type="text" /> <a href="01.BOM.html">去BOM</a> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ 
  132.                 //获取count
  133.                 var count = document.getElementById("count");
  135.                 //使count中的内容，自动切换
  136.                 /* * JS的程序的执行速度是非常非常快的 * 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用 */
  137.                 /*for(var i=0 ; i<10000 ; i++){ count.innerHTML = i; alert("hello"); }*/
  139.                 /* * setInterval() * - 定时调用 * - 可以将一个函数，每隔一段时间执行一次 * - 参数： * 1.回调函数，该函数会每隔一段时间被调用一次 * 2.每次调用间隔的时间，单位是毫秒 * * - 返回值： * 返回一个Number类型的数据 * 这个数字用来作为定时器的唯一标识 */
  140.                 var num = 1; var timer = setInterval(function(){ 
  142.                     count.innerHTML = num++; if(num == 11){ 
  143.                         //关闭定时器
  144.                         clearInterval(timer);
  145.                     }
  147.                 },1000);
  149.                 //console.log(timer);
  151.                 //clearInterval()可以用来关闭一个定时器
  152.                 //方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
  153.                 //clearInterval(timer);
  155.             }; </script> </head> <body> <h1 id="count"></h1> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ 
  157.                 /* * 使图片可以自动切换 */
  159.                 //获取img标签
  160.                 var img1 = document.getElementById("img1");
  162.                 //创建一个数组来保存图片的路径
  163.                 var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
  165.                 //创建一个变量，用来保存当前图片的索引
  166.                 var index = 0;
  168.                 //定义一个变量，用来保存定时器的标识
  169.                 var timer;
  171.                 //为btn01绑定一个单击响应函数
  172.                 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ 
  174.                     /* * 目前，我们每点击一次按钮，就会开启一个定时器， * 点击多次就会开启多个定时器，这就导致图片的切换速度过快， * 并且我们只能关闭最后一次开启的定时器 */
  176.                     //在开启定时器之前，需要将当前元素上的其他定时器关闭
  177.                     clearInterval(timer);
  179.                     /* * 开启一个定时器，来自动切换图片 */
  180.                     timer = setInterval(function(){ 
  181.                         //使索引自增
  182.                         index++;
  183.                         //判断索引是否超过最大索引
  184.                         /*if(index >= imgArr.length){ //则将index设置为0 index = 0; }*/
  185.                         index %= imgArr.length;
  186.                         //修改img1的src属性
  187.                         img1.src = imgArr[index];
  189.                     },1000);
  190.                 };
  192.                 //为btn02绑定一个单击响应函数
  193.                 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ 
  194.                     //点击按钮以后，停止图片的自动切换，关闭定时器
  195.                     /* * clearInterval()可以接收任意参数， * 如果参数是一个有效的定时器的标识，则停止对应的定时器 * 如果参数不是一个有效的标识，则什么也不做 */
  196.                     clearInterval(timer);
  198.                 };
  201.             }; </script> </head> <body> <img id="img1" src="img/1.jpg"/> <br /><br /> <button id="btn01">开始</button> <button id="btn02">停止</button> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ 
  202.                 width: 100px;
  203.                 height: 100px;
  204.                 background-color: red;
  205.                 position: absolute;
  206.             }
  209.         </style>
  211.         <script type="text/javascript">
  213.             //使div可以根据不同的方向键向不同的方向移动
  214.             /* * 按左键，div向左移 * 按右键，div向右移 * 。。。 */
  215.             window.onload = function(){ 
  218.                 //定义一个变量，来表示移动的速度
  219.                 var speed = 10;
  221.                 //创建一个变量表示方向
  222.                 //通过修改dir来影响移动的方向
  223.                 var dir = 0; //开启一个定时器，来控制div的移动 setInterval(function(){ 
  224.                     /* * 37 左 * 38 上 * 39 右 * 40 下 */
  225.                     switch(dir){ 
  226.                         case 37:
  227.                             //alert("向左"); left值减小
  228.                             box1.style.left = box1.offsetLeft - speed + "px";
  229.                             break;
  230.                         case 39:
  231.                             //alert("向右");
  232.                             box1.style.left = box1.offsetLeft + speed + "px";
  233.                             break;
  234.                         case 38:
  235.                             //alert("向上");
  236.                             box1.style.top = box1.offsetTop - speed + "px";
  237.                             break;
  238.                         case 40:
  239.                             //alert("向下");
  240.                             box1.style.top = box1.offsetTop + speed + "px";
  241.                             break;
  242.                     }
  243.                 },30); //为document绑定一个按键按下的事件 document.onkeydown = function(event){ 
  244.                     event = event || window.event; //当用户按了ctrl以后，速度加快 if(event.ctrlKey){ 
  245.                         speed = 500;
  246.                     }else{ 
  247.                         speed = 10;
  248.                     }
  250.                     //使dir等于按键的值
  251.                     dir = event.keyCode;
  252.                 }; //当按键松开时，div不再移动 document.onkeyup = function(){ 
  253.                     //设置方向为0
  254.                     dir = 0;
  255.                 };
  257.             };
  260.         </script>
  261.     </head>
  262.     <body>
  263.         <div id="box1"></div>
  264.     </body>
  265. </html>
  279. <!DOCTYPE html>
  280. <html>
  281.     <head>
  282.         <meta charset="UTF-8">
  283.         <title></title>
  284.         <script type="text/javascript">
  286.             var num = 1;
  288.             //开启一个定时器
  289.             /*setInterval(function(){ console.log(num++); },3000);*/
  292.             /* * 延时调用， * 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次 * * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次 * * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择 */
  293.             var timer = setTimeout(function(){ 
  294.                 console.log(num++);
  295.             },3000);
  297.             //使用clearTimeout()来关闭一个延时调用
  298.             clearTimeout(timer); </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ 
  299.                 margin: 0;
  300.                 padding: 0;
  301.             }
  303.             #box1{ 
  304.                 width: 100px;
  305.                 height: 100px;
  306.                 background-color: red;
  307.                 position: absolute;
  308.                 left: 0;
  309.             }
  311.         </style> <script type="text/javascript"> window.onload = function(){ 
  313.                 //获取box1
  314.                 var box1 = document.getElementById("box1");
  315.                 //获取btn01
  316.                 var btn01 = document.getElementById("btn01");
  318.                 //定义一个变量，用来保存定时器的标识
  319.                 var timer; //点击按钮以后，使box1向右移动（left值增大） btn01.onclick = function(){ 
  321.                     //关闭上一个定时器
  322.                     clearInterval(timer); //开启一个定时器，用来执行动画效果 timer = setInterval(function(){ 
  324.                         //获取box1的原来的left值
  325.                         var oldValue = parseInt(getStyle(box1,"left"));
  327.                         //在旧值的基础上增加
  328.                         var newValue = oldValue + 1; //判断newValue是否大于800 if(newValue > 800){ 
  329.                             newValue = 800;
  330.                         }
  332.                         //将新值设置给box1
  333.                         box1.style.left = newValue + "px"; //当元素移动到800px时，使其停止执行动画 if(newValue == 800){ 
  334.                             //达到目标，关闭定时器
  335.                             clearInterval(timer);
  336.                         }
  339.                     },30);
  342.                 };
  344.             };
  347.             /* * 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */
  348.             function getStyle(obj , name){ 
  350.                 if(window.getComputedStyle){ 
  351.                     //正常浏览器的方式，具有getComputedStyle()方法
  352.                     return getComputedStyle(obj , null)[name];
  353.                 }else{ 
  354.                     //IE8的方式，没有getComputedStyle()方法
  355.                     return obj.currentStyle[name];
  356.                 }
  358.             }
  361.         </script>
  362.     </head>
  363.     <body>
  365.         <button id="btn01">点击按钮以后box1向右移动</button>
  367.         <br /><br />
  369.         <div id="box1"></div>
  371.         <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ 
  372.                 margin: 0;
  373.                 padding: 0;
  374.             }
  376.             #box1{ 
  377.                 width: 100px;
  378.                 height: 100px;
  379.                 background-color: red;
  380.                 position: absolute;
  381.                 left: 0;
  382.             }
  384.         </style> <script type="text/javascript"> window.onload = function(){ 
  386.                 //获取box1
  387.                 var box1 = document.getElementById("box1");
  388.                 //获取btn01
  389.                 var btn01 = document.getElementById("btn01");
  391.                 //获取btn02
  392.                 var btn02 = document.getElementById("btn02"); //点击按钮以后，使box1向右移动（left值增大） btn01.onclick = function(){ 
  393.                     move(box1 , 800 , 10);
  394.                 }; //点击按钮以后，使box1向左移动（left值减小） btn02.onclick = function(){ 
  395.                     move(box1 , 0 , 10);
  396.                 };
  398.             };
  400.             //定义一个变量，用来保存定时器的标识
  401.             var timer;
  403.             //尝试创建一个可以执行简单动画的函数
  404.             /* * 参数： * obj:要执行动画的对象 * target:执行动画的目标位置 * speed:移动的速度(正数向右移动，负数向左移动) */
  405.             function move(obj , target ,speed){ 
  406.                 //关闭上一个定时器
  407.                 clearInterval(timer);
  409.                 //获取元素目前的位置
  410.                 var current = parseInt(getStyle(obj,"left")); //判断速度的正负值 //如果从0 向 800移动，则speed为正 //如果从800向0移动，则speed为负 if(current > target){ 
  411.                     //此时速度应为负值
  412.                     speed = -speed;
  413.                 }
  415.                 //开启一个定时器，用来执行动画效果 timer = setInterval(function(){ 
  417.                     //获取box1的原来的left值
  418.                     var oldValue = parseInt(getStyle(obj,"left"));
  420.                     //在旧值的基础上增加
  421.                     var newValue = oldValue + speed; //判断newValue是否大于800 //从800 向 0移动 //向左移动时，需要判断newValue是否小于target //向右移动时，需要判断newValue是否大于target if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){ 
  422.                         newValue = target;
  423.                     }
  425.                     //将新值设置给box1
  426.                     obj.style.left = newValue + "px"; //当元素移动到0px时，使其停止执行动画 if(newValue == target){ 
  427.                         //达到目标，关闭定时器
  428.                         clearInterval(timer);
  429.                     }
  432.                 },30);
  433.             }
  436.             /* * 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */
  437.             function getStyle(obj , name){ 
  439.                 if(window.getComputedStyle){ 
  440.                     //正常浏览器的方式，具有getComputedStyle()方法
  441.                     return getComputedStyle(obj , null)[name];
  442.                 }else{ 
  443.                     //IE8的方式，没有getComputedStyle()方法
  444.                     return obj.currentStyle[name];
  445.                 }
  447.             }
  450.         </script>
  451.     </head>
  452.     <body>
  454.         <button id="btn01">点击按钮以后box1向右移动</button>
  455.         <button id="btn02">点击按钮以后box1向左移动</button>
  457.         <br /><br />
  459.         <div id="box1"></div>
  461.         <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ 
  462.                 margin: 0;
  463.                 padding: 0;
  464.             }
  466.             #box1{ 
  467.                 width: 100px;
  468.                 height: 100px;
  469.                 background-color: red;
  470.                 position: absolute;
  471.                 left: 0;
  472.             }
  474.             #box2{ 
  475.                 width: 100px;
  476.                 height: 100px;
  477.                 background-color: yellow;
  478.                 position: absolute;
  479.                 left: 0;
  480.                 top: 200px;
  481.             }
  483.         </style> <script type="text/javascript" src="js/tools.js"></script> <script type="text/javascript"> window.onload = function(){ 
  485.                 //获取box1
  486.                 var box1 = document.getElementById("box1");
  487.                 //获取btn01
  488.                 var btn01 = document.getElementById("btn01");
  490.                 //获取btn02
  491.                 var btn02 = document.getElementById("btn02"); //点击按钮以后，使box1向右移动（left值增大） btn01.onclick = function(){ 
  492.                     move(box1 ,"left", 800 , 20);
  493.                 }; //点击按钮以后，使box1向左移动（left值减小） btn02.onclick = function(){ 
  494.                     move(box1 ,"left", 0 , 10);
  495.                 };
  498.                 //获取btn03
  499.                 var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ 
  500.                     move(box2 , "left",800 , 10);
  501.                 };
  503.                 //测试按钮
  504.                 var btn04 = document.getElementById("btn04"); btn04.onclick = function(){ 
  505.                     //move(box2 ,"width", 800 , 10);
  506.                     //move(box2 ,"top", 800 , 10);
  507.                     //move(box2 ,"height", 800 , 10); move(box2 , "width" , 800 , 10 , function(){ 
  508.                         move(box2 , "height" , 400 , 10 , function(){ 
  509.                             move(box2 , "top" , 0 , 10 , function(){ 
  510.                                 move(box2 , "width" , 100 , 10 , function(){ 
  512.                                 });
  513.                             });
  514.                         });
  515.                     });
  516.                 };
  517.             };
  519.             //定义一个变量，用来保存定时器的标识
  520.             /* * 目前我们的定时器的标识由全局变量timer保存， * 所有的执行正在执行的定时器都在这个变量中保存 */
  521.             //var timer;
  526.         </script>
  527.     </head>
  528.     <body>
  530.         <button id="btn01">点击按钮以后box1向右移动</button>
  531.         <button id="btn02">点击按钮以后box1向左移动</button>
  532.         <button id="btn03">点击按钮以后box2向右移动</button>
  533.         <button id="btn04">测试按钮</button>
  535.         <br /><br />
  537.         <div id="box1"></div>
  538.         <div id="box2"></div>
  540.         <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ 
  541.                 margin: 0;
  542.                 padding: 0;
  543.             }
  545.             /* * 设置outer的样式 */
  546.             #outer{ 
  547.                 /*设置宽和高*/
  548.                 width: 520px;
  549.                 height: 333px;
  550.                 /*居中*/
  551.                 margin: 50px auto;
  552.                 /*设置背景颜色*/
  553.                 background-color: greenyellow;
  554.                 /*设置padding*/
  555.                 padding: 10px 0;
  556.                 /*开启相对定位*/
  557.                 position: relative;
  558.                 /*裁剪溢出的内容*/
  559.                 overflow: hidden;
  560.             }
  562.             /*设置imgList*/
  563.             #imgList{ 
  564.                 /*去除项目符号*/
  565.                 list-style: none;
  566.                 /*设置ul的宽度*/
  567.                 /*width: 2600px;*/
  568.                 /*开启绝对定位*/
  569.                 position: absolute;
  570.                 /*设置偏移量*/
  571.                 /* * 每向左移动520px，就会显示到下一张图片 */
  572.                 left: 0px;
  573.             }
  575.             /*设置图片中的li*/
  576.             #imgList li{ 
  577.                 /*设置浮动*/
  578.                 float: left;
  579.                 /*设置左右外边距*/
  580.                 margin: 0 10px;
  581.             }
  583.             /*设置导航按钮*/
  584.             #navDiv{ 
  585.                 /*开启绝对定位*/
  586.                 position: absolute;
  587.                 /*设置位置*/
  588.                 bottom: 15px;
  589.                 /*设置left值 outer宽度 520 navDiv宽度 25*5 = 125 520 - 125 = 395/2 = 197.5 * */
  590.                 /*left: 197px;*/
  591.             }
  593.             #navDiv a{ 
  594.                 /*设置超链接浮动*/
  595.                 float: left;
  596.                 /*设置超链接的宽和高*/
  597.                 width: 15px;
  598.                 height: 15px;
  599.                 /*设置背景颜色*/
  600.                 background-color: red;
  601.                 /*设置左右外边距*/
  602.                 margin: 0 5px;
  603.                 /*设置透明*/
  604.                 opacity: 0.5;
  605.                 /*兼容IE8透明*/
  606.                 filter: alpha(opacity=50);
  607.             }
  609.             /*设置鼠标移入的效果*/
  610.             #navDiv a:hover{ 
  611.                 background-color: black;
  612.             }
  613.         </style> <!--引用工具--> <script type="text/javascript" src="js/tools.js"></script> <script type="text/javascript"> window.onload = function(){ 
  614.                 //获取imgList
  615.                 var imgList = document.getElementById("imgList");
  616.                 //获取页面中所有的img标签
  617.                 var imgArr = document.getElementsByTagName("img");
  618.                 //设置imgList的宽度
  619.                 imgList.style.width = 520*imgArr.length+"px";
  621.                 /*设置导航按钮居中*/
  622.                 //获取navDiv
  623.                 var navDiv = document.getElementById("navDiv");
  624.                 //获取outer
  625.                 var outer = document.getElementById("outer");
  626.                 //设置navDiv的left值
  627.                 navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
  629.                 //默认显示图片的索引
  630.                 var index = 0;
  631.                 //获取所有的a
  632.                 var allA = document.getElementsByTagName("a");
  633.                 //设置默认选中的效果
  634.                 allA[index].style.backgroundColor = "black";
  636.                 /* 点击超链接切换到指定的图片 点击第一个超链接，显示第一个图片 点击第二个超链接，显示第二个图片 * */
  638.                 //为所有的超链接都绑定单击响应函数
  639.                 for(var i=0; i<allA.length ; i++){ 
  641.                     //为每一个超链接都添加一个num属性
  642.                     allA[i].num = i; //为超链接绑定单击响应函数 allA[i].onclick = function(){ 
  644.                         //获取点击超链接的索引,并将其设置为index
  645.                         index = this.num;
  647.                         //切换图片
  648.                         /* * 第一张 0 0 * 第二张 1 -520 * 第三张 2 -1040 */
  649.                         //imgList.style.left = -520*index + "px";
  650.                         //设置选中的a
  651.                         setA(); //使用move函数来切换图片 move(imgList , "left" , -520*index , 20 , function(){ 
  653.                         });
  655.                     };
  656.                 }
  658.                 //创建一个方法用来设置选中的a function setA(){ 
  660.                     //遍历所有a，并将它们的背景颜色设置为红色
  661.                     for(var i=0 ; i<allA.length ; i++){ 
  662.                         allA[i].style.backgroundColor = "red";
  663.                     }
  665.                     //将选中的a设置为黑色
  666.                     allA[index].style.backgroundColor = "black";
  667.                 };
  670.             };
  672.         </script>
  673.     </head>
  674.     <body>
  675.         <!-- 创建一个外部的div，来作为大的容器 -->
  676.         <div id="outer">
  677.             <!-- 创建一个ul，用于放置图片 -->
  678.             <ul id="imgList">
  679.                 <li><img src="img/1.jpg"/></li>
  680.                 <li><img src="img/2.jpg"/></li>
  681.                 <li><img src="img/3.jpg"/></li>
  682.                 <li><img src="img/4.jpg"/></li>
  683.                 <li><img src="img/5.jpg"/></li>
  684.             </ul>
  685.             <!--创建导航按钮-->
  686.             <div id="navDiv">
  687.                 <a href="javascript:;"></a>
  688.                 <a href="javascript:;"></a>
  689.                 <a href="javascript:;"></a>
  690.                 <a href="javascript:;"></a>
  691.                 <a href="javascript:;"></a>
  692.             </div>
  693.         </div>
  694.     </body>
  695. </html>
  703. <!DOCTYPE html>
  704. <html>
  705.     <head>
  706.         <meta charset="UTF-8">
  707.         <title></title>
  708.     </head>
  709.     <body>
  710.         <h1>TEST01</h1>
  711.         <a href="test02.html">去test02</a>
  712.     </body>
  713. </html>
  722. <!DOCTYPE html>
  723. <html>
  724.     <head>
  725.         <meta charset="UTF-8">
  726.         <title></title>
  727.     </head>
  728.     <body>
  729.         <h1>TEST01</h1>
  730.         <a href="test02.html">去test02</a>
  731.     </body>
  732. </html>

发表评论

表情：
评论列表 （有 0 条评论，63人围观）

还没有评论，来说两句吧...

相关阅读