为了账号安全,请及时绑定邮箱和手机立即绑定
  • setTimeout()和setInterval()的区别: setTimeout()方法是超时调用,什么时间之后执行什么函数,只执行一次; setInterval()方法是一直在调用,可执行多次 window.onload = function(){ //标签的索引 var index = 0; var timer = null; var lis = $('notice-tit').getElementsByTagName('li'); divs = $('notice-con').getElementsByTagName('div'); if(lis.length!=divs.length) return; //遍历所有的页签 for(var i=0;i<lis.length;i++){ //添加id属性寻找索引 lis[i].id = i; lis[i].onmouseover = function(){ //用that这个变量来引用当前li,防止和window对象冲突,全局变量。 var that = this; //如果存在准备执行的定时器,立刻清除,只有当前停留的时间大于500ms时才开始执行 if(timer){ clearTimeout(timer); timer = null; } //延迟半秒执行 //setTimeout是window对象的属性,所以在他的函数中this所指的是window对象, timer = window.setTimeout(function(){ for(var j=0;j<lis.length;j++){ lis[j].className = ''; divs[j].style.display = 'none'; } lis[that.id].className = 'select'; divs[that.id].style.display = 'block'; },500); } } }
    查看全部
  • 好喜欢这节课,老师解决了我好多疑惑,认真听之后,发现解释的很详细,喜欢。
    查看全部
  • //定义一个获取id的函数 function $(id){ return typeof id==='string'?document.getElementById(id):id; } window.onload=function(){ //获取鼠标滑过或点击的标签和要切换内容的元素 var titles=$('notice-tit').getElementsByTagName('li'), divs=$('notice-con').getElementsByTagName('div'); if(titles.length!=divs.length) return; //遍历titles下所有的li for(var i=0;i<titles.length;i++){ titles[i].id = i; titles[i].onmouseover = function(){ //清除所有li上的class 和 display:none for(var j=0;j<titles.length;j++){ titles[j].className = ''; divs[j].style.display = 'none'; } //设置当前为高亮显示 this.className = 'select'; divs[this.id].style.display = 'block'; } } }
    查看全部
  • 老师讲解的很清楚,明了,可能语速稍微快了点,不过挺喜欢的
    查看全部
  • @@--Tab选项卡切换效果--1-3 tab页面布局-内容布局 编辑选项卡内容样式: 1、显示默认内容; 2、隐藏其他内容 3、剩下的留给JS函数实现。
    查看全部
  • @@--Tab选项卡切换效果--1-2 tab页面布局-标题布局 ul的宽度=298px+2px+1px=301px; li的高度=26px+1px=27px;(border-bottom:1px #fff solid;) ul要比盒子加上边框后的总长度长1像素再左移动1像素这样在被点击时显示的左右边框才不会和盒子的边缘紧挨在一起以至于变得很粗(所以盒子要设为relative ul要设为absolute才能移动-1像素) li的宽度在设置时要考虑被点击状态时加上的两边的边框所以之前未被点击时左右要设置1像素的padding在被点击后padding取消用左右边框代替
    查看全部
  • 选项卡分类: @@--Tab选项卡切换效果-- -第1章 滑动、点击切换效果实现 1、滑过切换;(延迟) 2、点击切换; 3/4在1/2基础之上设置定时器 3、延迟切换; 4、自动切换。 最大的优点,可以节省空间
    查看全部
    0 采集 收起 来源:课程简介

    2015-08-06

  • tab切换效果
    查看全部
    0 采集 收起 来源:课程简介

    2015-08-05

  • <script type="text/javascript"> window.onload=function(){ // 将所有点击的标题和要显示隐藏的列表取出来 var ps=document.getElementById("menu").getElementsByTagName("p"); var uls=document.getElementById("menu").getElementsByTagName('ul'); // 遍历所有要点击的标题且给它们添加索引及绑定事件 for(var i=0;i<ps.length;i++){ ps[i].id=i; ps[i].onclick=function(){ for(var j=0;j<ps.length;j++) uls[j].style.display='none'; uls[this.id].style.display='block' } } // 获取点击的标题上的索引属性,根据该索引找到对应的列表 // 判断该列表,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来 } </script>
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-22

  • 在简单设置图片切换的基础上,加入了图片滑动的动画效果,用到了前面课程中讲到的js动画。记住一个准则:每次setInterval之前一定要先clearInterval!
    查看全部
  • 调用函数时候,如果函数有参数,那么需要注意:比如function autoPlay(cur){ cur++;},那么如果你调用autoPlay(index)的时候,index的值不会被加1。借用c语言中的概念,cur本身并不指向index,而只不过是index的一个拷贝,cur的初始值是index,但是对cur的操作不会影响index。
    查看全部
  • 在setTimeout或者setInterval里面使用this,this指向的是window,因为setTimeout和setInterval是隶属于window对象的。
    查看全部
  • 使用循环绑定时候,从一开始就要将i的值赋给p,而不可以在onclick的时候使用i,因为这时候,i一直是ps.length,也就是3.
    查看全部
    0 采集 收起 来源:编程练习

    2015-08-04

  • 每隔一定时间间隔执行一个动作setInterval(function() {}, 1000);
    查看全部
  • 搞定了!
    查看全部

举报

0/150
提交
取消
课程须知
1、您应该已经熟悉html标签和css样式表;2、您还应该已经熟悉JavaScript 或 jQuery的基础知识。
老师告诉你能学到什么?
您可以举一反三,制作非常精美风格多样的 Tab 切换效果,能够帮助你丰富或改进网站中的选项卡功能的用户体验。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!