English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Posizione attuale
  2. Pagina principale
  3. Note di esperienza
  4. Testo principale

Condivisione di effetti classici JavaScript: accordione, carosello, scorrimento delle immagini

Negli ultimi tempi non ho aggiornato, quindi metto alcuni effetti per arricchirli.
Non è stata effettuata questa fase di bellezza.　

Puro cssLibro a spirale:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Accordione css</title>
 <style>
 .showBox{
 width: 660px;
 overflow: hidden;
 }
 ul{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 30000px;
 }
 ul li{
  float: left;
  position: relative;
  height: 254px;
  width: 110px;
  overflow: hidden;
  transition: all 0.3s;
 }
 /* Questo è il cuore dell'accordione css, l'uso di hover
 **Prima di tutto c'è ul:hover li, che scatena il cambiamento attraversato di ul ma non di li
 **Poi c'è ul li:hover, qui c'è il cambiamento del li attraversato, che corrisponde all'effetto animazione css3.
 Esome degli effetti di bellezza della pagina di css3, possono creare un bellissimo accordione.
 Implementare con solo JavaScript potrebbe essere complicato.
  */
 ul:hover li{
  width:22px;
 }
 ul li:hover{
  width: 460px;
 }
 ul li img{
  width: 550px;
  height: 254px;
 }
 ul li span{
  width: 22px;
  position: absolute;
  top: 0;
  destra: 0;
  height: 204px;
  padding-top: 50px;
  color: #fff;
 }
 ul li span.bg1{
  background: #333;
 }
 ul li span.bg2{
  background: #0f0;
 }
 ul li span.bg3{
  background: #ff7500;
 }
 ul li span.bg4{
  background: #0ff;
 }
 ul li span.bg5{
  background: #00f;
 }
 </style>
 <script type="text/javascript">
 </script>
</head>
<body>
 <div class="showBox">
 <ul>
  <li><span class="bg1">Questo è il primo</span><img src="1.jpg" alt=""></li>
  <li><span class="bg2">Questo è il secondo</span><img src="2.jpeg" alt=""></li>
  <li><span class="bg3">Questo è il terzo</span><img src="3.jpg" alt=""></li>
  <li><span class="bg4">Questo è il quarto</span><img src="4.jpg" alt=""></li>
  <li><span class="bg5">Questo è il quinto</span><img src="5.jpg" alt=""></li>
 </ul>
 </div>
</body>
</html>

css3Libro a spirale:　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>css3-checked:</title>
 <style>
 /* Utilizza la funzionalità radio per implementare l'effetto di libro a spirale */
 ul{
  display: none;
 }
  input{display: none;} 
  label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;} 
  .list > ul{display: none; -webkit-transition:all .5s linear; -moz-transition:all .5s linear; -ms-transition:all .5s linear; -o-transition:all .5s linear; transition:all .5s linear;} 
  #list1:checked + ul{display: block;} 
  #list2:checked + ul{display: block;} 
  #list3:checked + ul{display: block;} 
  #list4:checked + ul{display: block;}
 </style>
</head>
<body>
 <div> <label for="list1">I miei compagni</label> <input type="radio" name="list" id="list1" checked="chekced"/> 
 <ul> <li><a href="">Nome dello studente</a></li> <li><a href="">Nome dello studente</a></li> <li><a href="">Nome dello studente</a></li> <li><a href="">Nome dello studente</a></li> <li><a href="">Nome dello studente</a></li> </ul> <label for="list2">I miei compagni</label> 
 <input type="radio" name="list" id="list2"/> 
 <ul> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> </ul> <label for="list3">我的同学</label> <input type="radio" name="list" id="list3"/> <ul> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> </ul> <label for="list4">我的同学</label> <input type="radio" name="list" id="list4"/> <ul> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> <li><a href="">同學名字</a></li> </ul> </div>
</body>
</html>

javascript实现的手风琴：　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>手风琴</title>
 <style>
 .showBox{
 width: 660px;
 overflow: hidden;
 }
 ul{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 30000px;
 }
 ul li.active{
  width: 550px;
 }
 ul li{
  float: left;
  position: relative;
  height: 254px;
  width: 22px;
  overflow: hidden;
 }
 ul li img{
  width: 660px;
  height: 254px;
 }
 ul li span{
  width: 22px;
  position: absolute;
  top: 0;
  left: 0;
  height: 204px;
  padding-top: 50px;
 }
 ul li span.bg1{
  background: #333;
 }
 ul li span.bg2{
  background: #0f0;
 }
 ul li span.bg3{
  background: #ff7500;
 }
 ul li span.bg4{
  background: #0ff;
 }
 ul li span.bg5{
  background: #00f;
 }
 </style>
 <script type="text/javascript">
 window.onload=function ()
 {
  createAccordion('.showBox');
 };
 function createAccordion(name)
 {
  /*获取元素*/
  var oDiv=document.querySelector(name);
  /*声明最小宽度*/
  var iMinWidth=9999999;
  /*获取元素*/
  var aLi=oDiv.getElementsByTagName('li');
  var aSpan=oDiv.getElementsByTagName('span');
  /*定时器容器默认*/
  oDiv.timer=null;
  /*循环添加事件和自定义属性索引值*/
  for(var i=0; i<aSpan.length; i++)
  {
  aSpan[i].index=i;
  aSpan[i].onmouseover=function ()
  {
   gotoImg(oDiv, this.index, iMinWidth);
  };
  /*获取最小宽度*/
  iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth);
  }
 };
 function gotoImg(oDiv, iIndex, iMinWidth)
 {
  if(oDiv.timer)
  { /*清除定时器，避免叠加*/
  clearInterval(oDiv.timer);
  }
  /*开启定时器*/
  oDiv.timer=setInterval
  (
  function ()
  {
   changeWidthInner(oDiv, iIndex, iMinWidth);
  }, 30
  );
 }
 /*这里是关键，运动*/
 function changeWidthInner(oDiv, iIndex, iMinWidth)
 {
  var aLi=oDiv.getElementsByTagName('li');
  var aSpan=oDiv.getElementsByTagName('span');
  /*获取盒子的大小，这是总宽度*/
  var iWidth=oDiv.offsetWidth;
  /*声明缩进的图片宽度*/
  var w=0;
  /*声明判断，为了清除定时器声明*/
  var bEnd=true;
  /*Il ciclo serve per ciclare ogni immagine, per ottenere gli elementi estesi e ristretti*/
  for(var i=0;i<aLi.length;i++)
  {
  /*Questo è per ottenere l'indice esteso*/
  if(i==iIndex)
  {
   continue;
  }
  /*Qui non ci sono elementi che cambiano, quindi si salvano tutte le larghezze minime*/
  if(iMinWidth==aLi[i].offsetWidth)
  {
   /*Ridurre la larghezza totale di queste larghezze, perché sono anche nella larghezza totale*/
   iWidth-=iMinWidth;
   continue;
  }
  /*Il codice del ciclo seguente è per l'elemento ristretto*/
  /*Non cancellare il timer, la movimento non è ancora finito*/
  bEnd=false;
  /*Ottieni la velocità, prima veloce poi lenta*/
  speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10);
  /*Ristituire la larghezza rimanente*/
  w=aLi[i].offsetWidth-speed;
  /*Per evitare che l'elemento ristretto sia più piccolo della larghezza minima*/
  if(w<=iMinWidth)
  {
   w=iMinWidth;
  }
  /*Impostare la larghezza dell'elemento ristretto*/
  aLi[i].style.width=w+'px';
  /*Sottrarre la larghezza ristretta, la larghezza rimanente è quella estesa*/
  iWidth-=w;
  }
  /*Larghezza dell'elemento esteso*/
  aLi[iIndex].style.width=iWidth+'px';
  if(bEnd)
  {
  clearInterval(oDiv.timer);
  oDiv.timer=null;
  }
 }
 </script>
</head>
<body>
 <div class="showBox">
 <ul>
  <li class="active"><span class="bg1">Questo è il primo</span><img src="1.jpg" alt=""></li>
  <li><span class="bg2">Questo è il secondo</span><img src="2.jpeg" alt=""></li>
  <li><span class="bg3">Questo è il terzo</span><img src="3.jpg" alt=""></li>
  <li><span class="bg4">Questo è il quarto</span><img src="4.jpg" alt=""></li>
  <li><span class="bg5">Questo è il quinto</span><img src="5.jpg" alt=""></li>
 </ul>
 </div>
</body>
</html>

接下来的都是会使用到动画效果，既然这样就把封装好运动：　

/*使用调用，obj对象，attr属性，speed速度，iTarget想达到的值，fn回调函数*/
/*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了，
 其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线
*/
 function doMove(obj, attr, speed, iTarget, fn) {
  if (attr == "opacity") {
  obj.len = iTarget - parseFloat(getStyle(obj, "opacity")) * 100;
  } else {
  obj.len = iTarget - parseFloat(getStyle(obj, attr));
  }
  /*这里判断方向，在初始点后的为负数，在初始点前为正数*/
  speed = obj.len > 0 ? speed : -speed;
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
  if (!obj.num) {
   obj.num = 0;
  }
  if (attr == "opacity") {
   obj.num = parseFloat(getStyle(obj, attr)) * 100 + speed;
  } else {
   obj.num = parseInt(getStyle(obj, attr)) + speed;
  }
  /*这里是判断到了目标点没有，到了就停止定时器*/
  if (obj.num >= iTarget && obj.len > 0 || obj.num <= iTarget && obj.len < 0) {
   obj.num = iTarget;
   clearInterval(obj.timer);
  }
  if (attr == "opacity") {
   obj.style[attr] = obj.num / 100;
  } else {
   obj.style[attr] = obj.num + "px";
  }
  /*因为放在上面无法实现到回调函数的完整作用，出现一些BUG*/
  if (obj.num >= iTarget && obj.len > 0 || obj.num <= iTarget && obj.len < 0) {
   fn && fn();
  }
  }, 30);
 }
 /*获取CSS属性值的函数，会获取表现出现的值*/
 function getStyle(obj, attr) {
  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
 }

Presentazione a rotazione：　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Presentazione a rotazione</title>
 /*Questa è la funzione di movimento incorporata e confezionata*/
 <script type="text/javascript" src="doMove.js"></script>
 <script type="text/javascript">
 window.onload=function(){
  /*Chiamata per implementare la presentazione a rotazione*/
  carousel("carousel")
 }
 function carousel(name){
  var oScl=document.getElementById(name);
  var oUl=oScl.querySelector("ul");
  var aLi=oUl.querySelectorAll("li");
  var next=document.getElementById("next");
  var pre=document.getElementById("pre");
  var aIndex=oScl.querySelectorAll(".index span");
  var num=0;
  var index=0;
  /*Dare all'immagine iniziale il livello di priorità più alto*/
  aLi[0].style.zIndex=5;
  /*Verifica se il timer esiste o meno*/
  if(!oScl.timer){
  oScl.timer=null;
  }
  /*Questa è l'attivazione automatica della presentazione a rotazione*/
  oScl.timer=setInterval(function(){
  num++;
  num%=aLi.length;
  play();
  },2000);
  /*Visualizzazione e nascondimento delle pagine superiori e inferiori*/
  oScl.onmouseover=function(){
  /*Ferma il timer di rimozione*/
  clearInterval(oScl.timer);
  next.style.display="block";
  pre.style.display="block";
  }
  oScl.onmouseout=function(){
  next.style.display="none";
  pre.style.display="none";
  /*Attiva il timer di rimozione*/
   oScl.timer=setInterval(function(){
   num++;
   num%=aLi.length;
   play();
  },2000);
  }
  /*Clicca per le pagine superiori e inferiori*/
  next.onclick=function(){
  num++;
  num%=aLi.length;
  play();
  }
  pre.onclick=function(){
  if(!aLi[index]){
   index=num;
  }
  num--;
  if(num<0){
   num=aLi.length-1;
  }
  play();
  }
  /*Punto di Indice*/
  per(var i=0; i<aIndex.length; i++){
  aIndex[i].index=i;
  aIndex[i].onmouseover=function(){
   num=this.index;
   play();
  }
  }
  /*funzione di esecuzione dell'animazione*/
  function play(){
  /*giudicare se è lo stesso punto di attivazione, come il punto di attivazione twice mouseover sono gli stessi,
   se non eseguito, evitare esecuzioni ripetute consecutive
  */
  if(index!=num){
   for(var i=0;i<aLi.length;i++){
   /*impostare il livello di sovrapposizione di tutte le immagini a 1*/
   aLi[i].style.zIndex=1;
   }
   /*impostare il livello di sovrapposizione dell'immagine precedentemente visualizzata a 2*/
   aLi[index].style.zIndex=2;
   aIndex[index].className=""; 
   aIndex[num].className="active";
   index=num;
   /*impostare l'opacità dell'immagine attiva a 0*/
   aLi[num].style.opacità=0;
   /*impostare il livello di sovrapposizione dell'immagine attiva a 5*/
   aLi[num].style.zIndex=5;
   /*funzione di animazione incapsulata, oscuramento dell'immagine corrente*/
   doMove(aLi[num],"opacità",10,100);
  }
  }
 }
 </script>
 <style>
 a{
  text-decoration: none;
  colore: #555;
 }
 #carousel{
  famiglia dei caratteri: "微软雅黑";
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
 }
 #carousel ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
 }
 #carousel ul li{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
 }
 .imgBox img{
  width: 800px;
  height: 400px;
 }
 .btn{
  position: absolute;
  z-index: 10;
  top: 50%;
  larghezza: 45px;
  altezza: 62px;
  margin-top: -31px;
  text-align: center;
  riga di testo: 62px;
  font-size: 40px;
  sfondo: rgba(0,0,0,0.4);
  opacità: alpha(opacità=50);
  display: none;
 }
 #pre{
  left: 0;
 }
 #next{
  destra: 0;
 }
 #carousel .index{
  position: absolute;
  bottom: 10px;
  sinistra: 50%;
  z-index: 10;
 }
 #carousel .index span{
  larghezza: 15px;
  altezza: 15px;
  border-radius: 50%;
  sfondo: #87CEFA;
  display: inline-block;
  ombra:1px 1px 6px #4169E1; 
 }
 #carousel .index span.active{
  background: #4169E1;
  box-shadow:1px 1px 6px #87CEFA inset; 
 }
 </style>
</head>
<body>
 <div id="carousel">
 <ul class="imgBox">
  <li><a href="#"><img src="1.jpg" alt=""></a></li>
  <li><a href="#"><img src="2.jpg" alt=""></a></li>
  <li><a href="#"><img src="3.jpg" alt=""></a></li>
  <li><a href="#"><img src="4.jpg" alt=""></a></li>
  <li><a href="#"><img src="5.jpg" alt=""></a></li>
 </ul>
 <a href="javascript:;" class="btn" id="next">></a>
 <a href="javascript:;" class="btn" id="pre"><</a>
 <div class="index">
  <span class="active"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
 </div>
 </div>
</body>
</html>

这个是使用插件做的：responsiveslides.js　

基于jquery　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <!-- 引入插件js和jquery -->
 <script src="jquery-2.0.3.js"></script>
 <script src="responsiveslides.js"></script>
 <style>
 #banner{
  position: relative;
  width: 800px;
 }
 /* 插件的默认css属性 */
 .rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
 .rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
 .rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
 .rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  /* ，被修改过的，修改成圆点按钮 */
  ul.rslides_tabs.rslides1_tabs {
  position: absolute;
  bottom: 10px;
  left: 45%;
  list-style: none;
  z-index: 10;
 }
 ul.rslides_tabs.rslides1_tabs li{
  float: left;
 }
 ul.rslides_tabs.rslides1_tabs li a{
  display: block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: #fff;
 }
 /* .rslides_here is equivalent to active */
 ul.rslides_tabs.rslides1_tabs li.rslides_here a{
  background: #004F88;
 }
 /* Class name for left and right buttons */
 .rslides_nav.rslides1_nav{
  position: absolute;
  top: 50%;
  color: #eee;
  font-size: 40px;
  text-decoration: none;
  z-index: 4;
 }
 .rslides_nav.rslides1_nav.pre{
  left: 10px;
 }
 .rslides_nav.rslides1_nav.next{
  right: 10px;
 }
 .rslides img{
  height: 400px;
 }
 </style>
 "<script>"
 "$("function() {"
 "$(".rslides").responsiveSlides({
  pager: true,  
  // Default is false, show index points when needed (true), default is numbers 12345, you can modify it in the js library
  nav: true,  // Show the navigation for the previous and next slides
  pause: false,  // Whether to stop when the mouse enters or exits
  pauseControls: true, // Boolean: Pause when hovering controls, true or false
  prevText: "<", // Modify the symbols of the left and right buttons
  nextText: ">", // String: Text for the "next" button
  "maxwidth":"800px"
 });
 $(".rslides1_nav").css("display","none"); 
 "$("#banner").mouseover(function(){
 "$(".rslides1_nav").css("display","block");
 )
 "$("#banner").mouseout(function(){
 $(".rslides1_nav").css("display","none");
 )
 });
</script>
 </script>
</head>
<body>
<!-- 使用一个div包住它，而那些js添加的标签会直接加载到ul标签后面 -->
<div id="banner">
 <ul class="rslides" id="rslides">
 <li><img src="111.jpg" alt=""></li>
 <li><img src="222.jpg" alt=""></li>
 <li><img src="333.jpg" alt=""></li>
 <li><img src="444.jpg" alt=""></li>
 <li><img src="555.jpg" alt=""></li>
 </ul>
</div>
</body>
</html>

图片滑动：　

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图片滑动</title>
 <style>
 .container{
  position: relative;
  width: 630px;
  border: 2px solid #888;
  padding: 5px;
 }
 .c-wrap{
  width: 630px;
  overflow: hidden;
 }
 .container img{
  width: 200px;
  height: 90px;
 }
 .container ul{
  list-style: none;
  margin: 0;
  padding: 0;
 }
 .container ul li{
  float: left;
  margin-right: 10px;
 }
 .container .imgBigBox{
  width: 33000px;
  margin-left: 0px;
 }
 .imgBigBox:after{
  content: " ";
  display: block;
  clear: both;
 }
 .btnGroup{
  border: 1px solid #888;
  width: 65px;
 }
 .btnGroup a{
  text-align: center;
  line-height: 20px;
  text-decoration: none;
  color: #888;
  font-size: 20px;
  display: inline-block;
  width: 30px;
 }
 .btn1{
  margin-right: 4px;
  border-right: 1px solid #888;
 }
 </style>
 /*Includere la funzione di movimento*/
 <script type="text/javascript" src="doMove.js"></script>
 <script type="text/javascript">
 window.onload=function(){
  /*Chiamare la funzione per lo scorrimento*/
  slide(".container");
 }
 function slide(name){
  var oContainer=document.querySelector(name);
  var oImgBigBox=oContainer.querySelector(".imgBigBox");
  var aBtn=oContainer.querySelectorAll(".btnGroup a");
  var oC_wrap=oContainer.querySelector(".c-wrap");
  /*Ottieni la larghezza di scorrimento*/
  var w=oC_wrap.offsetWidth;
  /*Clicca il pulsante di sinistra*/
  aBtn[0].onclick=function(){
  doMove(oImgBigBox,"marginLeft",10,-w,function(){
  var child=oImgBigBox.children[0].cloneNode(true);
   oImgBigBox.appendChild(child);
   oImgBigBox.removeChild(oImgBigBox.children[0]);
   oImgBigBox.style.marginLeft="0px";
  )
  }
  /*Clicca il pulsante di destra*/
  aBtn[1].onclick=function(){
   oImgBigBox.insertBefore(oImgBigBox.children[1],oImgBigBox.children[0]);
   oImgBigBox.style.marginLeft=-w+"px";
  doMove(oImgBigBox,"marginLeft",10,0)
  }
 }
 </script>
</head>
<body>
 <div class="container">
 <div class="c-wrap">
  <div class="imgBigBox">
  <ul class="imgBox">
   <li><img src="1.jpg" alt=""></li>
   <li><img src="2.jpg" alt=""></li>
   <li><img src="3.jpg" alt=""></li>
  </ul>
  <ul class="imgBox">
   <li><img src="4.jpg" alt=""></li>
   <li><img src="5.jpg" alt=""></li>
   <li><img src="6.jpg" alt=""></li>
  </ul>
  </div>
 </div>
 <div class="btnGroup">
  <a href="javascript:;" class="btn1"><</a><a href="javascript:;" class="btn2">></a> 
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Guida di base
Ti potrebbe interessare