2021.8.11今日小结
今天使用JavaScript做了轮播图，二级菜单，定时器图片切换动画。
今天也算是把几个基本的效果了解了，JavaScript的基本的语法，函数，对象也有了一定的了解了。后续还需要去练习来加深印象。
下面是轮播图的java代码，其中引入了自定义的函数。
<script type="text/javascript"> window.onload = function(){ let imgList = document.getElementById("imgList"); let imgArr = document.getElementsByTagName("img"); // 设置ul的整体宽度 imgList.style.width = 820*imgArr.length+"px"; // 设置导航按钮居中 let navDiv = document.getElementById("navDiv"); let outer = document.getElementById("outer"); navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px"; // 默认显示图片的索引 let index =0; // 获取所有a let allA = document.getElementsByTagName("a"); // 设置默认选中效果 allA[index].style.backgroundColor = "black"; // 点击超链接切换图片 for(let i=0;i<allA.length;i++){ // 为每个超链接都添加一个num属性 allA[i].num = i; allA[i].onclick = function(){ //关闭自动切换的定时器 clearInterval(timer); // 获取点击超链接的索引，并设置为index index = this.num; // 切换图片 //imgList.style.left = -820*index+"px"; setA(); // 调用自定义的函数切换动画 move(imgList, "left" , -820*index , 20 , function(){ // 重新开启自动切换图片 autoChange(); }); }; } // 自动切换图片 autoChange(); // 创建一个方法来设置选中的a function setA(){ // 判定当前索引是否是最后一张图片 if(index >= imgArr.length -1){ index =0; // 通过css将最后一张图片换成第一张 imgList.style.left = 0; } for(let i=0;i<allA.length;i++){ allA[i].style.backgroundColor = ""; } allA[index].style.backgroundColor = "black"; }; // 定义一个自动切换的标识 var timer; // 创建一个函数来开启自动切换图片 function autoChange(){ // 开启一个定时器 timer = setInterval(function(){ // 索引自增 index++; // 判定index的值 index %= imgArr.length; move(imgList, "left" , -820*index , 20 , function(){ setA(); }); },3000); }; }; </script>
下面是自定义的函数
/* * 可以用来获取任意的样式 */ function getStyle(obj, name) { return window.getComputedStyle && getComputedStyle(obj, null)[name] || obj.currentStyle[name]; } /* * 提取出一个函数，可以处理一些简单的动画效果 * 参数： * obj: 要执行动画的元素 * attr: 执行动画是要修改的属性 * target: 执行动画的目标位置 * speed: 执行动画的速度 * callback: 回调函数，这个函数将会在动画执行完毕之后被调用 */ function move(obj, attr, target, speed, callback) { //开启定时器前，关闭上一个 /* * 这里我们的timer是一个全局变量，所有的动画执行时，都会共享同一个timer * 这样将会导致我们执行box2的动画时，会使box1的动画也立即终止 * 所以我们定时器的标识不能作为全局变量保存，而应该保存到要执行动画的对象上 */ clearInterval(obj.timer); //获取当前值，动画执行的起始位置 var current = parseInt(getStyle(obj, attr)); //起始位置 大于 目标位置 speed为负 //起始位置 小于 目标位置 speed为正 if(current > target) { //此时speed应该是负数 speed = -speed; } //开启一个定时器，用来移动box1 obj.timer = setInterval(function() { //获取box1的left属性值 var oldValue = parseInt(getStyle(obj, attr)); //修改值 var newValue = oldValue + speed; //如果newValue大于800 //如果向右移动，则newValue > target speed为正 //如果向左移动，则newValue < target speed为负 if(speed > 0 && newValue > target || speed < 0 && newValue < target) { newValue = target } //将其赋值给box1 obj.style[attr] = newValue + "px"; //当运行800px时，停止执行动画 if(newValue == target) { clearInterval(obj.timer); //动画执行完毕，调用回调函数 callback && callback(); } }, 10); }
二级菜单是利用类的操作来执行的
下面是自定义的函数
/* * 定义一个函数，专门用来为一个元素添加class属性值 * 参数 * obj 要添加class属性的元素 * cn 要添加的class的值 * */ function addClass(obj, cn) { //判断obj中是否含有cn这个class if(!hasClass(obj, cn)) { obj.className += " " + cn; } } /* * 判断一个对象中是否含有指定的class属性 * 参数： * obj：要检查的对象 * cn：要检查class值 * 如果对象中具有该class则返回true，否则返回false */ function hasClass(obj, cn) { //检查obj中是否与b2这个class //var reg = /\bb2\b/; var reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); } /* * 删除一个元素中的class */ function removeClass(obj, cn) { //创建一个正则表达式 var reg = new RegExp("\\b" + cn + "\\b"); //将class属性中符合正则表达式的内容，替换为空串 obj.className = obj.className.replace(reg, ""); } /* * 切换一个元素的class属性值 * 如果有，则删除 * 如果没有，则添加 */ function toggleClass(obj, cn) { //判断obj中是否有cn if(hasClass(obj, cn)) { //如果有，则删除 removeClass(obj, cn); } else { //如果没有，则添加 addClass(obj, cn); } }
下面是二级菜单的javascript代码
<script type="text/javascript"> window.onload = function(){ //获取所有的class为menuSpan的元素 var menuSpan = document.querySelectorAll(".menuSpan"); //定义一个变量，来保存当前打开的菜单 var openDiv = menuSpan[0].parentNode; //为span绑定单击响应函数 for(var i=0 ; i<menuSpan.length ; i++){ menuSpan[i].onclick = function(){ //this代表我当前点击的span //获取当前span的父元素 var parentDiv = this.parentNode; //切换菜单的显示状态 toggleMenu(parentDiv); //判断openDiv和parentDiv是否相同 if(openDiv != parentDiv && !hasClass(openDiv , "collapsed")){ //切换菜单的显示状态 toggleMenu(openDiv); } //修改openDiv为当前打开的菜单 openDiv = parentDiv; }; } /* * 用来切换菜单折叠和显示状态 */ function toggleMenu(obj){ //在切换类之前，获取元素的高度 var begin = obj.offsetHeight; //切换parentDiv的显示 toggleClass(obj , "collapsed"); //在切换类之后获取一个高度 var end = obj.offsetHeight; //动画效果就是将高度从begin向end过渡 //将元素的高度重置为begin obj.style.height = begin + "px"; //执行动画，从bengin向end过渡 move(obj,"height",end,10,function(){ //动画执行完毕，内联样式已经没有存在的意义了，删除之 obj.style.height = ""; }); } }; </script>
