文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:JS--- part6课程介绍 & part5复习

马六甲海峡

马六甲海峡

2024-04-23 23:49

关注

  运行jQuery所需的条件很简单:一台计算机、一个智能电话或一个可以运行现代浏览器的设备。jQuery对浏览器的要求也相当自由。

  part6课程介绍

  scroll系列:-----重点,每个属性是什么意思

  封装scroll系列的相关的属性,固定导航栏案例---事件浏览器的滚动条事件--能够写出来

  封装动画函数---缓动动画---变速动画---

  筋斗云

  获取元素计算后的样式属性值

  升级变速动画--------------理解---能够自己写出最终版本的函数

  手风琴案例

  开机动画案例

  旋转木马案例

  另一个系列

  图片跟着鼠标飞------

  part5复习

  定时器:两个

  setInterval(函数,时间);//定时器,隔一段时间就执行一次函数的代码

  clearInterval(定时器的id);

  setTimeout(函数,时间);//定时器,只执行一次函数的代码-----一次性的定时器

  clearTimeout(定时器的id);//

  动画函数:*

  offset系列:获取元素的相关的样式属性的值

  offsetWidth:获取元素的宽

  offsetHeight:获取元素的高

  offsetLeft:获取元素距离左边位置的值

  offsetTop:获取元素距离上面位置的值**

  完整轮播图:

  1.根据ul中li个数(图片的个数)动态的创建li,并且加入到ol中,作为小按钮来使用

  为每个ol中的li添加鼠标进入的事件,(添加事件之前,先把索引保存在每个li的自定义属性中),鼠标进入li的时候做排他功能(背景颜色),移动图片(图片整体移动,移动的ul,每次移动的是一个图片的宽度,图片的宽度就是向宽的宽度),调用的是动画函数,移动ul,移动的是索引值*图片的宽度,并且把索引值存储在一个全局变量中,pic

  2.创建li之后,1---设置ol中第一个li有默认的背景颜色,2---把ul中的第一个li克隆一下(无缝连接的效果)追加到ul中所有的li的最后面(无缝效果:页面中的第一个图片和最后一个图片是同一个图片)*

  3.左右焦点的div显示和隐藏

  4.为左右按钮注册点击事件

  每一次点击右边的按钮,先判断pic的值是不是ul中li的length-1(pic的值最大是5),此时设置pic的值为0,同时设置ul距离左边的left值为0(初始值),此时pic立刻加1,移动ul,用户看到的就是第二个图片

  设置小按钮的背景颜色

  左边按钮,需要判断pic值是不是0,如果是0此时pic=5,ul的left为5*图片的宽,立刻pic-1,然后ul移动一张图片,此时用户看到了第五个图片*

  5.自动播放在页面加载的时候,启动一个定时器,里面调用的就是右边按钮的点击事件的处理函数**

  BOM中顶级对象:window

  DOM中顶级对象:Document

  jQuery中顶级对象:$--jQuery

  jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     442人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     206人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     169人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     248人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     77人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯