Home > Web Front-end > JS Tutorial > body text

Pure js+html and pure css+html create accordion effect_javascript skills

WBOY
Release: 2016-05-16 15:06:35
Original
1438 people have browsed it

This article shares the two effects of making an accordion with pure js+html and making an accordion with pure css+html for your reference. The specific content is as follows

1. Pure css+html accordion effect

This kind of accordion written in CSS is relatively simple. It is mainly applied to the transition attribute in CSS.

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<style>
body{background: url('bg.gif') repeat;}
ul,li,p{margin: 0px;padding: 0px;list-style: none;}
 #div{width: 1180px;height: 405px;border:5px solid #ccc;padding: 0px;margin: 0px auto;overflow: hidden;} 
 .list{width: 3200px;}
 .list li{float: left;width: 170px;height: 500px;;position: relative;
   -moz-transition:width 2s;
   transition: width 2s;
   -moz-transition: width 2s; /* Firefox 4 */
   -webkit-transition: width 2s; /* Safari 和 Chrome */
   -o-transition: width 2s; /* Opera */
 }
.list:hover li{width: 107px;}
.list li:hover{width: 538px;}
.list li p{width: 100%;height: 100%;opacity: 0.5;position: absolute;top: 0px;left: 0px;background: black; }
.list li:hover p{opacity:0}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
</script>
</head>
<body >
<div id="div">
   <ul class="list"> <!--如果设置父级与子级之间没有空隙的话,将margin和padding设为0即可-->
     <li><img src="image/1.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/2.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/3.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/4.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/5.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/6.jpg" style="width:538px;height:405px;"><p></p></li>
     <li><img src="image/7.jpg" style="width:538px;height:405px;"><p></p></li>
   </ul>
</div>
</body>
</html>
Copy after login

2. Making accordion with pure js+html

A problem with this accordion is that when each li is moved individually, there is no problem, but when the movement is very fast, there is a gap in the rightmost li. I think it's a timer problem, that is, before each li has returned to its position, the next li starts moving. But my timer has been turned off.

Can anyone please leave me a message and help me figure out how to change it!

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴效果</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="perfectMove2.js"></script>
<script type="text/javascript">
window.onload=function()
{
  var oDiv=document.getElementById('show1');
  var iMinWidth=9999999;
  var aLi=oDiv.getElementsByTagName('li');
  var aSpan=oDiv.getElementsByTagName('span');
  var i=0;
  var bool=false;
  for(i=0;i<aLi.length;i++)
  {
    aSpan[i].index=i;
    aSpan[i].onmouseover=function ()
    {
       for(i=0;i<aLi.length;i++)
       {
         startMove(aLi[i],{width:this.offsetWidth});//调用运动函数
         bool=true;
       }
       if(bool)
       {
        startMove(aLi[this.index],{width:552});
       }
    }  
  }

};
</script>
</head>
<body>
<div id="show1">
  <ul>
    <li class="active">
      <span class="bg0">这是第一个</span>
      <img src="images/1.jpg" />
    </li>
    <li >
      <span class="bg1">这是第二个</span>
      <img src="images/2.jpg" />
    </li>
    <li >
      <span class="bg2">这是第三个</span>
      <img src="images/3.jpg" />
    </li>
    <li>
      <span class="bg3">这是第四个</span>
      <img src="images/4.jpg" />
    </li>
    <li>
      <span class="bg4">这是第五个</span>
      <img src="images/5.jpg" />
    </li>
    <li>
      <span class="bg5">这是第六个</span>
      <img src="images/6.jpg" />
    </li>
  </ul>
</div>
</body>
</html>
Copy after login

perfectMove2.js code is as follows:

function getStyle(obj,attr)//用此种方法获取样式中的属性
{
   if(obj.currentStyle)
   {
    return obj.currentStyle[attr];
   }
   else
   {
    return getComputedStyle(obj,false)[attr];
   }
}
function startMove(obj,json,fn)
{
    clearInterval(obj.timer);//清除定时器
    obj.timer=setInterval(function ()
    {
    var stop=true;
    for(var attr in json)
    {
           var iCur=0;
           if(attr=='opacity')
           {
             iCur=parseInt(parseFloat(getStyle(obj, attr))*100);//这里加parseInt是避免div的数值不稳定,在波动
           }
           else
          {
             iCur=parseInt(getStyle(obj, attr));
          }
           var iSpeed=(json[attr]-iCur)/8;
           iSpeed=iSpeed>0&#63;Math.ceil(iSpeed):Math.floor(iSpeed);
          if(iCur!=json[attr])
          {
              stop=false;
          }
          if(attr=='opacity')
             {
              obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
              obj.style.opacity=(iCur+iSpeed)/100;
            }
          else
            {
               obj.style[attr]=iCur+iSpeed+'px';
            }
         
    }
    if(stop)
    {
     clearInterval(obj.timer);
     if(fn){fn();}
    }
   }, 30)
    
}

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template