小小千想和您聊一聊

当前位置: 首页> 技术分享> 前端 javascript 练习题

前端 javascript 练习题

  筋头云案例:

  基本布局代码:

<div class="nav">   //相对定位
  <span id="cloud"></span>  //绝对定位
  <ul id="navBar">  
    <li>北京校区</li>
    <li>上海校区</li>
    <li>广州校区</li>
    <li>深圳校区</li>
    <li>武汉校区</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>招贤纳士</li>
  </ul></div>

  js代码:

//匀速动画function animate(element, target) {
  clearInterval(element.timeId);  //清理定时器
  element.timeId = setInterval(function () {
    var current = element.offsetLeft;  //获取元素的当前位置
    var step = (target - current) / 10; //移动的步数
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    current += step;
    element.style.left = current + "px";
    if (current == target) {
      //清理定时器
      clearInterval(element.timeId);
    }
   }, 20);}
var cloud = my$("cloud");  //获取云彩var list = my$("navBar").children;  //获取所有的li标签for (var i = 0; i < list.length; i++) {//给所有的li注册鼠标进入,鼠标离开,点击事件
  list[i].onmouseover = mouseoverHandle; //鼠标进入事件
  list[i].onclick = clickHandle;  //点击事件
  list[i].onmouseout = mouseoutHandle;  //鼠标离开事件}function mouseoverHandle() {//进入
  animate(cloud, this.offsetLeft);}var lastPosition = 0;function clickHandle() {//点击
  lastPosition = this.offsetLeft;//点击的时候,记录此次点击的位置}function mouseoutHandle() {//离开
  animate(cloud, lastPosition);}

  手风琴案例

  简单的布局:

<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul></div>

  js实现代码:

<script src="common.js"></script><script>

  //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }
  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定时器
    //定时器,返回的是定时器的id
    element.timeId = setInterval(function () {
      var flag = true;//默认,假设,全部到达目标
      //遍历json对象中的每个属性还有属性对应的目标值
      for (var attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度,当前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目标的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          //层级改变就是直接改变这个属性的值
          element.style[attr] = json[attr];
        } else {
          //普通的属性
          //获取元素这个属性的当前的值
          var current = parseInt(getStyle(element, attr));
          //当前的属性对应的目标值
          var target = json[attr];
          //移动的步数
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current + "px";
        }
        //是否到达目标
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if (fn) {
          fn();
        }
      }
      //测试代码
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20);
  }

  //先获取所有的li标签
  var list = my$("box").getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
    list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
    //鼠标进入
    list[i].onmouseover = mouseoverHandle;
    //鼠标离开
    list[i].onmouseout = mouseoutHandle;
  }
  //进入
  function mouseoverHandle() {
    for (var j = 0; j < list.length; j++) {
      animate(list[j], {"width": 100});//动画效果
    }
    animate(this, {"width": 800});
  }
  //离开
  function mouseoutHandle() {
    for (var j = 0; j < list.length; j++) {
      animate(list[j], {"width": 240});//动画效果
    }
  }

</script>

上一篇:Context-React跨组件访问数据的利器

下一篇:APP自动化测试之环境搭建:3.逍遥模拟器安装配置

QQ技术交流群

千锋HTML5官方②群
857920838

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码