百度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>