炫酷的js手風(fēng)琴效果

更新時(shí)間：2016年10月13日 14:46:29 作者：foodoir

既然JQ和JS都能實(shí)現(xiàn)那么炫酷的效果，我們用CSS3能不能做出手風(fēng)琴效果的書(shū)簽來(lái)呢？這篇文章主要為大家分享了炫酷的手風(fēng)琴效果實(shí)現(xiàn)方式，感興趣的小伙伴們可以參考一下

你一定用過(guò)書(shū)簽，也一定給你的書(shū)本加過(guò)書(shū)簽，那么你見(jiàn)過(guò)書(shū)簽式的導(dǎo)航嗎？你一定見(jiàn)過(guò)手風(fēng)琴，也一定知道彈奏手風(fēng)琴時(shí)的它的外形變化，那么你見(jiàn)過(guò)手風(fēng)琴式的導(dǎo)航嗎？如果沒(méi)有，請(qǐng)往下看：

前面的話(huà)：

這篇博文先通過(guò)Javascript做一個(gè)簡(jiǎn)單的手風(fēng)琴效果，讓大家對(duì)手風(fēng)琴效果有一定的了解；緊接著，我們換jquery做類(lèi)似的手風(fēng)琴效果。前面的兩個(gè)例子都很簡(jiǎn)單，接下來(lái)要放大招了，我想用JQ或是原生的JS去做類(lèi)似淘寶網(wǎng)中用到的手風(fēng)琴效果。繼續(xù)回到書(shū)簽問(wèn)題，既然JQ和JS都能實(shí)現(xiàn)那么炫酷的效果，我們用CSS3能不能做出手風(fēng)琴效果的書(shū)簽來(lái)呢？

用Javascript做一個(gè)簡(jiǎn)單的手風(fēng)琴效果：
話(huà)不多說(shuō)，我們先上代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style>
  *{
  margin: 0; 
  padding: 0;
  }
  body{
  background-color: rgba(0,0,0,.8);
  }
  div{
  margin: 20px auto;
  }
  #c {
  width: 500px;
  height: 300px;
  overflow: hidden;
  }
  p {
  float: left;
  width: 20px;
  height: 300px;
  }
 </style>
 </head>
 <body>
 <div id="c">
  <p style="background:#9cf;width:420px;">1</p>
  <p style="background:#f9c;">2</p>
  <p style="background:#c9f;">3</p>
  <p style="background:#cf9;">4</p>
  <p style="background:#9fc;">5</p>
 </div>
 </body>
</html>

效果：

分析：在不使用JS的情況下，我們只能通過(guò)改變p的寬度，來(lái)模仿手風(fēng)琴效果，然后我們忽略人為因素的影響，讓其在鼠標(biāo)經(jīng)過(guò)每個(gè)p時(shí)，該p的寬度發(fā)生變化。

這里我們知道了要改變p的寬度，那么接下來(lái)就簡(jiǎn)單了，我們用前面介紹過(guò)的關(guān)于Javascript動(dòng)畫(huà)的相關(guān)方法就可以得到我們想要的效果（點(diǎn)擊：Javascript動(dòng)畫(huà)相關(guān)）。參考代碼如下：

function accordion() {
 var Div = document.getElementById('c');
 var Divs = Div.getElementsByTagName('p');
 var i = 0;
 var t = null;
 for(i = 0; i < Divs.length; i++) {
 Divs[i].index = i;
 Divs[i].onmouseover = function() {
  var index = this.index;
  if(t) {
  clearInterval(t);
  }
  t = setInterval(function() {
  var iWidth = 500;
  for(i = 0; i < Divs.length; i++) {
   if(index != Divs[i].index) {
   var iSpeed = (20 - Divs[i].offsetWidth) / 5;
   iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
   Divs[i].style.width = Divs[i].offsetWidth + iSpeed + 'px';
   iWidth -= Divs[i].offsetWidth;
   };
  };
  Divs[index].style.width = iWidth + 'px';
  }, 30);
 };
 }
}
accordion();

上面的代碼不做解釋?zhuān)a運(yùn)行后的結(jié)果點(diǎn)擊網(wǎng)址： http://sandbox.runjs.cn/show/daapxxo9 查看。

用jquery做類(lèi)似的手風(fēng)琴效果：

前面的效果是不是覺(jué)得很簡(jiǎn)單，下面我們加一點(diǎn)點(diǎn)難度，有如下要求：

1、將前面的背景顏色換成圖片

2、增加文字

3、用jquery實(shí)現(xiàn)

先來(lái)完成我們的html代碼：

<div class="pic">
  <ul>
  <li class="pic1">
   <a href="javascript:;">
   <div class="txt">
    <p class="p1">作者：陳武</p>
    <p class="p2">效果：手風(fēng)琴效果</p>
   </div>
   </a>
  </li>
  <li class="pic2">
   <a href="javascript:;">
   <div class="txt">
    <p class="p1">作者：陳武</p>
    <p class="p2">效果：手風(fēng)琴效果</p>
   </div>
   </a>
  </li>
  <li class="pic3">
   <a href="javascript:;">
   <div class="txt">
    <p class="p1">作者：陳武</p>
    <p class="p2">效果：手風(fēng)琴效果</p>
   </div>
   </a>
  </li>
  <li class="pic4">
   <a href="javascript:;">
   <div class="txt">
    <p class="p1">作者：陳武</p>
    <p class="p2">效果：手風(fēng)琴效果</p>
   </div>
   </a>
  </li>
  </ul>
 </div>

注意： <a href="javascript:;">的意思是屏蔽a標(biāo)簽的默認(rèn)動(dòng)作

分析樣式：只有最后一張圖片顯示的是原始尺寸，其余的寬度都為100px，然后對(duì)我們的樣式進(jìn)行修改，代碼如下：

  * {
  margin: 0;
  padding: 0;
  font-family: "微軟雅黑";
  list-style-type: none;
  }
  
  body {
  background-color: #000;
  }
  
  a {
  text-decoration: none;
  }
  
  header,
  footer {
  width: 1000px;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
  color: #fff;
  }
  
  header p {
  text-align: right;
  }
  
  .pic {
  width: 1000px;
  height: 320px;
  margin-top: 60px;
  margin: 0 auto;
  border: 5px solid aqua;
  border-radius: 5px;
  overflow: hidden;
  }
  
  .pic1 {
  background: url(images/1.jpg) no-repeat;
  }
  
  .pic2 {
  background: url(images/2.jpg) no-repeat;
  }
  
  .pic3 {
  background: url(images/3.jpg) no-repeat;
  }
  
  .pic .pic4 {
  background: url(images/4.jpg) no-repeat;
  width: 700px;
  }
  
  .pic ul li {
  float: left;
  width: 100px;
  height: 320px;
  overflow: hidden;
  }
  
  .txt {
  background-color: rgba(0, 100, 200, .5);
  height: 320px;
  width: 100px;
  }
  
  .txt p {
  float: left;
  color: #fff;
  word-break: break-all;
  }
  
  .txt .p1 {
  font-size: 12px;
  width: 12px;
  padding: 30px 10px 0;
  }
  
  .txt .p2 {
  font-size: 16px;
  width: 16px;
  padding: 30px 10px 0;
  }

在我們運(yùn)行上面的代碼前，我們應(yīng)注意如下問(wèn)題

注意一： 不在.pic4前加.pic只是設(shè)置的寬度為700會(huì)怎樣？（.pic4的權(quán)重不夠，導(dǎo)致該樣式被覆蓋掉了。）

注意二：如果我們不加no-repeat會(huì)怎樣？（自己當(dāng)時(shí)疏忽忘了加no-repeat，圖片不能正常顯示，調(diào)試了好久）

注意三：在.pic里面不加overflow: hidden;會(huì)怎樣？（到后面寫(xiě)了JQ再調(diào)試的時(shí)候，發(fā)現(xiàn)圖片老是被擠下來(lái)）

接下來(lái)用Jquery方法就簡(jiǎn)單了，我們直接用里面的動(dòng)畫(huà)方法animate就行了，代碼如下：

$(function() {
 $('.pic ul li').mouseover(function() {
 $(this).animate({
  width: '700px'
 }, 1000).siblings().animate({
  width: '100px'
 }, 1000);
 });
});

到這里，我們發(fā)現(xiàn)一點(diǎn)點(diǎn)不足，鼠標(biāo)經(jīng)過(guò)的時(shí)候，動(dòng)畫(huà)很僵硬，這時(shí)候，我們有沒(méi)有什么方法能將我們的動(dòng)畫(huà)看上去更流暢？

什么？你說(shuō)stop()方法？stop()方法是什么東西，我好像不知道?！鞠旅媸俏也榈降年P(guān)于stop()方法的一些知識(shí)】

stop()方法的格式如下：

stop( [clearQueue] , [gotoend])

該方法的功能是停止所選元素中正在執(zhí)行的動(dòng)畫(huà)，其中可選參數(shù)[clearQueue]是一個(gè)布爾值，表示是否停止正在執(zhí)行的動(dòng)畫(huà)。另外一個(gè)可選參數(shù) [gotoend]也是一個(gè)布爾值，表示是否立即完成正在執(zhí)行的動(dòng)畫(huà)。
當(dāng)stop()時(shí)：只中斷第一個(gè)動(dòng)畫(huà)；
當(dāng)stop(true)時(shí)：中斷所有動(dòng)畫(huà)；
當(dāng)stop(true,true)時(shí)：直接到達(dá)最終狀態(tài)。

與stop()方法對(duì)應(yīng)的還有delay()方法，其格式如下：

delay( duration, [queueName])

該方法的功能是設(shè)置一個(gè)延遲值來(lái)推遲后續(xù)隊(duì)列中動(dòng)畫(huà)的執(zhí)行，其中參數(shù)為延遲時(shí)間的時(shí)間值，單位是毫秒?？蛇x參數(shù)表示隊(duì)列名詞，即動(dòng)畫(huà)隊(duì)列（如：slideToggle）。

在這里我們需要用到的當(dāng)然是stop(true)了，

在這里我們需要用到的當(dāng)然是stop(true)了，修改好代碼后，運(yùn)行結(jié)果：

點(diǎn)擊網(wǎng)址即可查看：http://sandbox.runjs.cn/show/1l4u3w9d

用JQ或是JS仿淘寶也中用到的手風(fēng)琴效果：

有了前面的基礎(chǔ)，后面的也沒(méi)那么難了，只是教前面復(fù)雜了許多，廢話(huà)少說(shuō)，這里直接上代碼：

 <div id="subject" class="home-subjects-v2">
 <ul>
 <li>
  <a>
  <img src="img/1.jpg">
  <div class="info">
  <h3 style="color:#f62368">聚美妝</h3>
  <p>聚美妝1/2周年慶</p>
  <p class="price"><strong>1</strong><i>折起</i></p>
   <p class="more">進(jìn)入專(zhuān)題搶購(gòu) &gt; </p>
  </div>
  <s class="line"></s>
  <i class="mask"></i>
  </a>
 </li>
 <li class="big">
  <a>
  <img src="img/2.jpg">
  <div class="info">
  <h3 style="color:#ff578a">Baby購(gòu)</h3>
  <p>寶寶該換裝了，新品搶購(gòu)</p>
  <p class="price"><strong>2.5</strong><i>折起</i></p>
   <p class="more">進(jìn)入專(zhuān)題搶購(gòu) &gt; </p>
  </div>
  <s class="line"></s> <i class="mask"></i>
  </a>
 </li>
 <li>
  <a>
  <img src="img/3.jpg">
  <div class="info">
  <h3 style="color:#6d3fa7">時(shí)裝團(tuán)</h3>
  <p>時(shí)尚春裝，清新小潮搭配</p>
  <p class="price"><strong>1</strong><i>折起</i></p>
   <p class="more">進(jìn)入專(zhuān)題搶購(gòu) &gt; </p>
  </div>
  <s class="line"></s> <i class="mask"></i>
  </a>
 </li>
 <li>
  <a>
  <img src="img/4.jpg">
  <div class="info">
  <h3 style="color:#d61939">TV購(gòu)</h3>
  <p>補(bǔ)血養(yǎng)顏 就這么簡(jiǎn)單</p>
  <p class="price"><strong>2.6</strong><i>折起</i></p>
   <p class="more">進(jìn)入專(zhuān)題搶購(gòu) &gt; </p>
  </div>
  <s class="line"></s><i class="mask"></i>
  </a>
 </li>
 <li>
  <a>
  <img src="img/5.jpg">
  <div class="info">
  <h3 style="color:#6f9400">聚新鮮</h3>
  <p>最純正的泰國(guó)香米</p>
  <p class="price"><strong>5</strong><i>折起</i></p>
   <p class="more">進(jìn)入專(zhuān)題搶購(gòu) &gt; </p>
  </div>
  <i class="mask"></i>
  </a>
 </li>
 </ul>
 </div>

對(duì)樣式進(jìn)行修改，使其接近淘寶網(wǎng)中的效果，代碼如下：

body,ul,li,p {margin: 0;padding: 0}
 ul,ol {list-style: none;}
 .home-subjects-v2{height:128px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #d3d3d3;border-color:rgba(0,0,0,.12);overflow:hidden;width:938px;margin-top:12px;background:#fff}
 .home-subjects-v2 ul{width:1000px}
 .home-subjects-v2 li{width:156px;height:128px;float:left;overflow:hidden;-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear}
 .home-subjects-v2 li *{-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear}
 .home-subjects-v2 li a{width:156px;height:128px;display:block;position:relative;cursor:pointer;text-decoration:none;overflow:hidden}
 .home-subjects-v2 li a:hover{position:absolute}
 .home-subjects-v2 li a:hover .mask{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in}
 .home-subjects-v2 li img{height:72px;width:117px;position:absolute;bottom:0;right:-13px}
 .home-subjects-v2 li .line{height:128px;width:0;font-size:0;border-right:1px dashed #cacaca;position:absolute;right:0;top:4px}
 .home-subjects-v2 li .info{position:absolute;top:0;left:0;width:136px;padding:4px 10px}
 .home-subjects-v2 li .info h3{font-size:14px;font-weight:700}
 .home-subjects-v2 li .info p{color:#868686;font-size:12px;overflow:hidden;width:136px;height:22px;line-height:22px}
 .home-subjects-v2 li .info p.price{font-size:14px;font-style:italic;color:#fa2a5d;height:35px}
 .home-subjects-v2 li .info p.price strong{font-size:22px;font-family:Arial;padding-right:2px}
 .home-subjects-v2 li .info p.price i{font-size:14px}
 .home-subjects-v2 li .info p.more{display:none}
 .home-subjects-v2 .mask{height:128px;width:156px;display:block;position:absolute;top:0;left:0;background:#000;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in;_display:none!important}
 .home-subjects-v2 .big{width:314px}
 .home-subjects-v2 .big a{width:314px}
 .home-subjects-v2 .big img{width:195px;height:120px;right:0;bottom:0}
 .home-subjects-v2 .big .info{width:294px}
 .home-subjects-v2 .big .info h3{font-size:18px}
 .home-subjects-v2 .big .info p{font-size:14px;width:166px}
 .home-subjects-v2 .big .info p.price{font-size:16px;padding-top:7px}
 .home-subjects-v2 .big .info p.price strong{font-size:28px}
 .home-subjects-v2 .big .info p.price i{font-size:16px}
 .home-subjects-v2 .big .info p.more{display:block;font-size:12px;color:#ff2a5b}
 .home-subjects-v2 .big .mask{width:314px}
 .home-subjects-v2:hover .mask{-ms-filter:"alpha(Opacity=15)";filter:alpha(opacity=15);opacity:.15;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in}

在這里，我們需要注意的有：

1、超出的部分隱藏（overflow:hidden）、超出的部分顯示（overflow:visible）、隱藏元素(display:none)、視覺(jué)隱藏元素(visibility:hidden)，我們要區(qū)分這幾個(gè)概念

2、opacity透明度，在標(biāo)準(zhǔn)瀏覽器和ie瀏覽器中透明度是不一樣的，前面的簡(jiǎn)單的程序沒(méi)考慮，但是我們應(yīng)該時(shí)刻有這種意識(shí)。

3、虛線(xiàn)的實(shí)現(xiàn)方法：.line { position:absolute; right:0px; width:0px;height:128px;border:1px dashed #ccc;}由于只需要虛線(xiàn)邊框的效果，故該元素的寬度為0。

4、關(guān)于遮罩層。之前想到將整個(gè)大容器添加一個(gè)遮罩層，這種做法不可取。當(dāng)鼠標(biāo)懸停，大容器的遮罩層的透明度不為0，即便此時(shí)對(duì)單列表容器的遮罩層設(shè)置透明度也無(wú)法消除大容器的遮罩層所帶來(lái)的影響。正確的做法應(yīng)該是，對(duì)每個(gè)列表使用遮罩層，在鼠標(biāo)懸停時(shí):.wrap:hover .mask{opacity:0.15}.wrap:hover .mask:hover{opacity:0}這樣做就不會(huì)出現(xiàn)疊加效應(yīng)，因?yàn)槎际菍?duì)一個(gè)樣式進(jìn)行的設(shè)置，這里還要對(duì)比權(quán)值（汲取前面的經(jīng)驗(yàn)）。

下面我們用原生的Javascript方法來(lái)實(shí)現(xiàn)：

在寫(xiě)之前，我們先理一下我們的思路，在前面的手風(fēng)琴效果中我們只需要改變單一的寬度就行了，但是在這里我們的要求就高了很多。在CSS部分，我們已經(jīng)有了變換效果的雛形，我們將class="big"添加到任意li中，該li就會(huì)發(fā)生改變。知道這里，我們接下來(lái)的做法又變得簡(jiǎn)單了。如何修改li中的class？我的思路如下：

首先寫(xiě)出一個(gè)主函數(shù)體獲取元素li -》 list，然后list進(jìn)行for循環(huán)，在for循環(huán)中進(jìn)行綁定bind的鼠標(biāo)點(diǎn)擊事件，bind(list[i],"mouseover", mouseoverHandler);（mouseoverHandler 是mouseover的回調(diào)……）代碼如下：

function initList() {
 //取得每個(gè)列表項(xiàng)
 var list = document.getElementsByTagName("li");
 for(var i = 0; i < list.length; i++) {
 //對(duì)每個(gè)列表綁定鼠標(biāo)懸停事件的監(jiān)聽(tīng)
 bind(list[i], "mouseover", mouseoverHandler);
 }
}

然后我們來(lái)寫(xiě)事件的綁定，需要判斷是標(biāo)準(zhǔn)事件綁定還是ie事件綁定，然后執(zhí)行不同的操作，代碼如下：

function bind(el, eventType, callback) {
 //標(biāo)準(zhǔn)事件綁定
 if(typeof el.addEventListener === "function") {
 el.addEventListener(eventType, callback, false);
 } else if(typeof el.attachEvent === "function") {
 //ie事件綁定
 el.attachEvent("on" + eventType, callback);
 }
}

然后我們繼續(xù)寫(xiě)鼠標(biāo)懸停處理函數(shù)，代碼如下：

//鼠標(biāo)懸停處理函數(shù)
function mouseoverHandler(e) {
 var target = e.target || e.srcElement;
 var list = document.getElementsByTagName("li");
 for(var i = 0; i < list.length; i++) {
 //清空所有l(wèi)i元素的big
 list[i].className = "";
 }
 //根據(jù)事件的冒泡原理，找到需要變更c(diǎn)lass的li元素
 while(target.tagName != "LI" && target.tagName != "BODY") {
 target = target.parentNode;
 }
 //給當(dāng)前元素加上class big
 target.className = "big";
}

最后我們將所有函數(shù)寫(xiě)在window.onload里面，別忘了調(diào)用initList();。

最終實(shí)現(xiàn)效果如圖：

可以點(diǎn)擊鏈接查看，鏈接：http://runjs.cn/detail/jtuihuj7

用Jquery方法來(lái)實(shí)現(xiàn)我們想要的效果：

從前面Jquery的例子我們可以看出，用Jquery方法要簡(jiǎn)單些，我們按照J(rèn)avascript的分析思路，來(lái)完成Jquery代碼，代碼如下：

function mouseover(e) {
 //獲取到li標(biāo)簽
 var list = $('#subject li');
 //獲取到目標(biāo)li標(biāo)簽，進(jìn)行添加或刪除操作
 var target = $(e.target).parents('li');
 list.removeClass('big');
 target.addClass('big');
}

(function() {
 var outer = $('#subject');
 outer.find('li').on('mouseover', mouseover);
})()

最終結(jié)果與Javascript方法的結(jié)果一樣，可以點(diǎn)擊鏈接查看，鏈接：http://runjs.cn/detail/sa6gthpa

用CSS3做書(shū)簽：
html部分代碼：

<div id="dise">
 <pic class="demo">
 <ul class="main_promo clearfix" id="main_promo">
  <li>
  <input type="radio" name="radio-set" checked="checked" />
  <div class="slide">
   <a href="#">
   <p>點(diǎn)<br />絳<br />唇<br />·<br />花<br />信<br />來(lái)<br />時(shí)</p>
   </a>
  </div>
  <div class="slide_img" style="background-image: url(imgs/1.jpg);">
   <h4>點(diǎn)絳唇·花信來(lái)時(shí)</h4>
   <p class="p1">花信來(lái)時(shí)，恨無(wú)人似花依舊。<br />又成春瘦，折斷門(mén)前柳。<br />天與多情，不與長(zhǎng)相守。<br />分飛后，淚痕和酒，占了雙羅袖。</p>
   <p class="p2"><span>譯文:</span>應(yīng)花期而來(lái)的風(fēng)喲，你雖來(lái)了，但人已離散去，全不像那花兒依舊。 人到春來(lái)瘦，等候著心上人，倚門(mén)盼歸，折斷了門(mén)前楊柳。 上天賦予了人多情的心，卻不肯給予長(zhǎng)相守的機(jī)會(huì)。自你我分別后，伴隨我的，只是相思的淚、澆愁的酒，沾濕了我的雙羅袖。 </p>
  </div>
  </li>
  <li>
  <input type="radio" name="radio-set" />
  <div class="slide">
   <a href="#slide_two">
   <p>鷓<br />鴣<br />天<br />·<br />守<br />得<br />蓮<br />開(kāi)<br />結(jié)<br />伴<br />游</p>
   </a>
  </div>
  <div class="slide_img" style="background-image: url(imgs/2.jpg);">
   <h4>鷓鴣天·守得蓮開(kāi)結(jié)伴游</h4>
   <p class="p1">守得蓮開(kāi)結(jié)伴游，約開(kāi)萍葉上蘭舟。<br />來(lái)時(shí)浦口云隨棹，采罷江邊月滿(mǎn)樓。<br /> 花不語(yǔ)，水空流，年年拚得為花愁。<br />明朝萬(wàn)一西風(fēng)動(dòng)，爭(zhēng)向朱顏不耐秋。</p>
   <p class="p2"><span>譯文:</span>湖塘中長(zhǎng)滿(mǎn)了浮萍，姑娘們相約來(lái)到湖中，一起撥開(kāi)浮萍采蓮。來(lái)時(shí)，旭日初升，浦口水面上如煙的水汽，在長(zhǎng)槳四周繚繞。采蓮后回到岸上，月光已照滿(mǎn)了高樓。 好花無(wú)語(yǔ)，流水無(wú)情，年年都為花落春去而傷愁。明天萬(wàn)一西風(fēng)驟然強(qiáng)勁，無(wú)奈蓮花抵抗不住秋寒，很快就會(huì)凋落。</p>
  </div>
  </li>
  <li>
  <input type="radio" name="radio-set" />
  <div class="slide">
   <a href="#slide_three">
   <p>涼<br />州<br />詞<br />二<br />首<br />·<br />其<br />一</p>
   </a>
  </div>
  <div class="slide_img" style="background-image: url(imgs/3.jpg);">
   <h4>涼州詞二首·其一</h4>
   <p class="p1">葡萄美酒夜光杯，<br />欲飲琵琶馬上催。<br /> 醉臥沙場(chǎng)君莫笑，<br />古來(lái)征戰(zhàn)幾人回？</p>
   <p class="p2"><span>譯文:</span>酒筵上甘醇的葡萄美酒盛滿(mǎn)在精美的夜光杯之中，歌伎們彈奏起急促歡快的琵琶聲助興催飲，想到即將跨馬奔赴沙場(chǎng)殺敵報(bào)國(guó)，戰(zhàn)士們個(gè)個(gè)豪情滿(mǎn)懷。 今日一定要一醉方休，即使醉倒在戰(zhàn)場(chǎng)上又何妨？此次出征為國(guó)效力，本來(lái)就打算馬革裹尸，沒(méi)有準(zhǔn)備活著回來(lái)。 </p>
  </div>
  </li>
  <li>
  <input type="radio" name="radio-set" />
  <div class="slide">
   <a href="#slide_four">
   <p>夜<br />雨<br />寄<br />北</p>
   </a>
  </div>
  <div class="slide_img" style="background-image: url(imgs/4.jpg);">
   <h4>夜雨寄北</h4>
   <p class="p1">君問(wèn)歸期未有期，<br />巴山夜雨漲秋池。 <br />何當(dāng)共剪西窗燭，<br />卻話(huà)巴山夜雨時(shí)。</p>
   <p class="p2"><span>譯文:</span>您問(wèn)歸期，歸期實(shí)難說(shuō)準(zhǔn)，巴山連夜暴雨，漲滿(mǎn)秋池。何時(shí)歸去，共剪西窗燭花，當(dāng)面訴說(shuō)，巴山夜雨況味。 </p>
  </div>
  </li>
 </ul>
 </pic>
</div>

CSS部分代碼：

html {
 background: -webkit-radial-gradient(center, ellipse, #232323 0%, #000 100%);
 height: 100%;
}

#dise {
 width: 1010px;
 height: 380px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 100px;
 background-color: rgba(255, 255, 255, 0.1);
}

.demo {
 position: absolute;
 margin-top: 20px;
 width: 1040px;
 margin-left: auto;
 margin-right: auto;
}

.main_promo li {
 position: relative;
 float: left;
 left: 0px;
 top: 0px;
 padding: 5px 0 5px 6px;
 overflow: hidden;
}

.main_promo div {
 float: left;
}

.slide a {
 position: relative;
 z-index: 1;
 display: block;
 width: 50px;
 height: 300px;
 border-radius: 0px;
 background-color: rgba(255, 255, 255, 0.1);
 transition: all 1.3s;
}

.slide p {
 /*設(shè)置字體*/
 position: absolute;
 top: 20px;
 left: 10px;
 color: #A7170A;
 height: 20px;
 width: 100px;
 font-family: 方正啟體繁體;
 font-size: 20px;
 font-weight: bold;
 text-shadow: 2px 2px 4px rgba(0, 0, 0, .8);
 word-break: break-all;
 /*-webkit-transform: rotate(-90deg);*/
}

.slide_img {
 overflow: hidden;
 width: 0;
 height: 0;
 /*此處的長(zhǎng)寬設(shè)置不能省略，否則不能隱藏*/
 transition: width 0.7s ease-in-out;
}

input[type="radio"] {
 /*radio和a重合，達(dá)到選擇的效果*/
 position: absolute;
 left: 5px;
 z-index: 99;
 width: 50px;
 height: 300px;
 opacity: 0;
}

input:checked~ .slide a {
 opacity: 1;
 background: rgba(255, 255, 255, 0.1);
 /*按鈕閃光效果*/
}

input:checked~ .slide_img {
 width: 692px;
 height: 300px;
 /*此處的長(zhǎng)寬必須設(shè)置，否則不顯示*/
 margin-left: 8px;
}


/*將背景顏色換成圖片，并在上面添加書(shū)簽，設(shè)置其css樣式*/

.slide_img h4 {
 font-size: 28px;
 font-weight: bold;
 background-color: rgba(100, 100, 100, .5);
 color: #000080;
}

.slide_img .p1 {
 background-color: rgba(255, 255, 255, .5);
 color: #000080;
}

.slide_img .p2 {
 background-color: rgba(0, 0, 0, .8);
 color: #00FFFF;
}

.slide_img .p2 span {
 font-size: 40px;
 font-weight: bold;
}

具體實(shí)現(xiàn)效果截圖：

具體案例展示：http://sandbox.runjs.cn/show/u8dyr3hx

后面的話(huà)：
在用Javascript方法做仿淘寶手風(fēng)琴效果是在網(wǎng)上找視頻學(xué)的，但是最終視頻里面的代碼與實(shí)際運(yùn)行結(jié)果不符，后面又在《Javascript高級(jí)程序設(shè)計(jì)上》專(zhuān)門(mén)看關(guān)于事件的部分內(nèi)容，突然間覺(jué)得自己前面學(xué)習(xí)的太淺了，后面要抽時(shí)間把這一段給補(bǔ)上。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: