• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

百度IFE2018任务--20-21天

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0724/97875.html 1190000019851714

原生javascript中,用cssText如何重写内联css
注意:前面的分号是为了兼容ie,加号是为了不清除已有的内联样式
代码:

Element.style.cssText += ';width:100px;height:100px;top:100px;left:100px;'

自定义一个方法来实现追加className的效果代码如下
代码:

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " "; //这句代码将追加的类名分开
        newClassName += value;
        element.className = newClassName;
    }
}

跨浏览器事件处理程序
代码:

var EventUtil = {
   addHandlers: function (element, type, handlers) {
      if (element.addEventListener) {
          // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
         element.addEventListener(type, handlers, false);
      } else if (element.attachEvent) {
          // IE8.0及其以下版本
         element.attachEvent('on' + type, handlers);
      } else {
          // 早期浏览器
         element['on' + type] = handlers;
      }
   },
   removeHandlers: function (element, type, handlers) {
      if (element.removeEventListener) {
         element.removeEventListener(type, handlers, false);
      } else if (element.detachEvent) {
         element.detachEvent('on' + type, handlers);
      } else {
         element['on' + type] = null;
      }
   }
};

点击某一个 Li 标签时,将 Li 的背景色显示在 P 标签内,并将 P 标签中的文字颜色设置成 Li 的背景色
代码:

<body>            
    <ul class="palette">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#194738"></li>        
    </ul>

    <p class="color-picker"></p>

    <script>
        /*
            基于如上 HTML,实现如下功能:

            点击某一个 Li 标签时,将 Li 的背景色显示在 P 标签内,并将 P 标签中的文字颜色设置成 Li 的背景色
        */
        var ul = document.querySelector('.palette');
        var p = document.querySelector('.color-picker');
        ul.onclick = function(e){
            var ev = e || window.event;
            //target是火狐,srcElement是IE
            var target = ev.target || ev.srcElement;
            var color = target.style.backgroundColor;
            p.textContent = color;
            p.style.cssText = 'color:'+color+';';
        }
    </script>
</body>

setInterval
参考:https://www.cnblogs.com/evere...
setInterval("fun()",1000); 这句如果写在window.onload的内部,会报错
原因:这种调用fun的写法类似eval语句,是将引号内的代码进行处理执行。这时候,是在全局作用域内找fun()函数,但是window.onload对于window来说属于局部,局部外是找不到局部内的fun()函数的。

分别使用 setTimeout 和 setInterval 实现以下功能:
点击按钮时,开始改变 fade-obj 的透明度,开始一个淡出(逐渐消失)动画,直到透明度为0
在动画过程中,按钮的状态变为不可点击
在动画结束后,按钮状态恢复,且文字变成“淡入”
在 按钮显示 淡入 的状态时,点击按钮,开始一个“淡入”(逐渐出现)的动画,和上面类似按钮不可点,直到透明度完全不透明
淡入动画结束后,按钮文字变为“淡出”
暂时不要使用 CSS animation (以后我们再学习)
思路:setTimeout方式的关键点是递归,每次递归都会将透明度修改1/10的程度,透明度走到底,递归就返回空值来结束这个过程。总共两个方法,淡入一个,淡出一个,每个方法都有递归。
代码(setTimeout方式):

var fadeObj = document.querySelector('#fade-obj');
var o = 1;
var fadeBtn = document.querySelector('#fade-btn');

function cha(){
    if(o < 0){
        console.log(o);
        fadeBtn.removeAttribute('disabled');
        fadeBtn.textContent = '淡入';
        return;
    }
    o -= 0.1;
    fadeObj.style.opacity = o; 
    setTimeout(cha,100);
}
function cha2(){
    if(o > 1){
        console.log(o);
        fadeBtn.removeAttribute('disabled');
        fadeBtn.textContent = '淡出';
        return;
    }
    o += 0.1;
    fadeObj.style.opacity = o; 
    setTimeout(cha2,100);
}
fadeBtn.onclick = function(){
    if(fadeBtn.textContent == '淡出'){
        setTimeout(cha,100);
        fadeBtn.setAttribute('disabled','disabled');
    }else{
        setTimeout(cha2,100);
        fadeBtn.setAttribute('disabled','disabled');
    }
}

学习来实现一个帧动画:
基于一个我们提供的图片,实现 IFE2016中Erik笑容的动画
图片地址:http://ife.baidu.com/2016/sta...
注意,依然不要使用 CSS animation,因为我们这里要学习的是使用 JavaScript 来操作 CSS,而不是为了完成这个任务。
思路:分正方向和反方向。用定时器不断执行,每执行一次,就将整体图片向某个方向移动一张图的位置,同时将这个移动的位置对应的数字来修改背景图的纵坐标就可以了。
代码:

<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
    <style>
        .round{
            width:480px;
            height:480px;
        }
    </style>
</head>
<body>            
    
    <div class="round">
        
    </div>
    <script>
        var roundBox = document.querySelector('.round');
        roundBox.style.backgroundImage = 'url(./erik_ce204002.jpg)';
        roundBox.style.backgroundRepeat = 'no-repeat';
        var m = 0;
        var fangxiang = true;
        setInterval(function(){
            if(fangxiang){
                if(m <= -8160){
                    fangxiang = false;
                }
                m -= 480;
                roundBox.style.backgroundPositionY = m + 'px';
            }else{
                if(m >= 0){
                    fangxiang = true;
                }
                m += 480;
                roundBox.style.backgroundPositionY = m + 'px';
            }
        },100);
    </script>
</body>

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!