下面小編就為大家?guī)?lái)一篇原生JS實(shí)現(xiàn)風(fēng)箱式demo,并封裝了一個(gè)運(yùn)動(dòng)框架(實(shí)例代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。
首先，在前端的學(xué)習(xí)過(guò)程中，輪播圖是我們一定要學(xué)習(xí)的，所以為了更加高效的實(shí)現(xiàn)各種輪播圖，封裝了一個(gè)運(yùn)動(dòng)的框架。
function getStyle(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];//為了獲取IE下的屬性值
}else{
return window.getComputedStyle(obj,null)[attr];//為了獲取W3C瀏覽器下的屬性值
}
}
function animate(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
var current = 0;
for(var attr in json){
if(attr == 'opacity'){
current = parseInt(getStyle(obj,attr)*100);
}else{
current = parseInt(getStyle(obj,attr));
};
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//先判斷屬性是否為透明度
if(attr == 'opacity'){
//首先判斷瀏覽器是否支持opacity
if('opacity' in obj.style){
obj.style.opacity = (current + step) / 100;
}else{
obj.style.filter = 'alpha(opacity = ' + (current + step) + ')';
}
//再判斷屬性是否為z-index
}else if(attr == 'zIndex'){
obj.style.zIndex = json[attr];
//最后再判斷
}else{
obj.style[attr] = current + step + 'px';
}
if(current != json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
}
},5);
}
在該框架中兼容了不同的瀏覽器，并且允許傳入opacity和z-index這樣的屬性，當(dāng)然，像width,height,left,right這樣常見的屬性是必不可少的。利用該框架，可以實(shí)現(xiàn)非常棒的效果。所以現(xiàn)在開始正式做該DEMO。
首先是index.html的制作。
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
index.html的制作非常的簡(jiǎn)單，我們會(huì)將圖片作為li的背景圖片在javascript中進(jìn)行插入。之后，我們進(jìn)行CSS樣式的調(diào)節(jié)。
*{
margin:0px;
padding:0px;
}
#box{
width:1300px;
height:400px;
margin:100px auto;
overflow: hidden;
}
#box ul{
height:400px;
width:1300px;
}
#box ul li{
width:240px;
height:400px;
float:left;
overflow: hidden;
}
javascript的代碼如下：
window.onload = function () {
var box = document.getElementById('box');
var aLi = box.children[0].children;
for(var i=0;i<aLi.length;i++){
aLi[i].style.backgroundImage = 'url(' + 'images/' + (i + 1) + '.jpg';
aLi[i].onmouseover = function(){
for(var i=0;i<aLi.length;i++){
animate(aLi[i],{width:100});
}
animate(this,{width:800});
};
aLi[i].onmouseout = function(){
for(var i=0;i<aLi.length;i++){
animate(aLi[i],{width:240});
}
}
}
}
這樣使用原生JS實(shí)現(xiàn)的風(fēng)箱效果demo就實(shí)現(xiàn)了，當(dāng)然，還可以利用封裝好的animate框架實(shí)現(xiàn)類似網(wǎng)易的輪播圖效果。
以上這篇原生JS實(shí)現(xiàn)風(fēng)箱式demo,并封裝了一個(gè)運(yùn)動(dòng)框架(實(shí)例代碼)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考