Statement: The DEMO relies on a training institution and is very grateful for this training structure. Without further ado, now we will start to change the production of the demo.
First of all, in the front-end learning process, carousel images are something we must learn, so in order to more efficiently implement various carousel images, a motion framework is encapsulated.
function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//In order to obtain the attribute value under IE}else{ return window.getComputedStyle(obj,null)[attr];//In order to obtain the attribute value under W3C browser}}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); //First determine whether the attribute is transparency if(attr == 'opacity'){ //First determine whether the browser supports opacity if('opacity' in obj.style){ obj.style.opacity = (current + step) / 100; }else{ obj.style.filter = 'alpha(opacity = ' + (current + step) + ')'; } //Judge whether the attribute is z-index }else if(attr == 'zIndex'){ obj.style.zIndex = json[attr]; //Judge again finally}else{ obj.style[attr] = current + step + 'px'; } if(current != json[attr]){ flag = false; } } if(flag){ clearInterval(obj.timer); } },5);}This framework is compatible with different browsers and allows properties like opacity and z-index to be passed in. Of course, common properties like width, height, left, right are essential. With this framework, you can achieve great results. So now we start to do the DEMO formally.
First, the production of index.html.
<div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>
The production of index.html is very simple. We will insert the image as the background image of Li in JavaScript. After that, we adjust the CSS style.
*{ 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; }The code for javascript is as follows:
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}); } } } }This way, the bellows effect demo implemented using native JS is realized. Of course, the encapsulated animate framework can also be used to achieve carousel effects similar to NetEase.
The above article is a bellows-style demo that implements a sports framework (example code) and encapsulates a sports framework (example code) which is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.