快捷導(dǎo)航

js以及jquery實(shí)現(xiàn)手風(fēng)琴效果

更新時(shí)間：2020年04月17日 16:21:23 作者：diligentkong

這篇文章主要為大家詳細(xì)介紹了js版本實(shí)現(xiàn)手風(fēng)琴效果和jquery版本實(shí)現(xiàn)的手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近又復(fù)習(xí)了jQuery的知識(shí)，既然jQuery是javascript的一個(gè)庫(kù)。jQuery能做到的事情javascript也能做到。因此用這兩種方法實(shí)現(xiàn)了圖片手風(fēng)琴效果。

按照慣例，還是上代碼吧，因?yàn)榇a里有我的注釋也就相當(dāng)于解釋了！

先看一下javascript的代碼吧：

div布局：注意哦，里面的圖片我們用js代碼生成

<div id="box">
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
</div>

css樣式：

<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 ul{
 list-style: none;
 }
 #box{
 width: 1150px;
 height: 400px;
 margin: 50px auto;
 border: 1px solid red;
 overflow: hidden;
 }
 #box ul{
 width: 1300px;
 }
 #box ul li{
 width: 240px;
 height: 400px;
 float: left;

 }
 </style>

要寫js代碼了。這里封裝了一個(gè)完整的運(yùn)動(dòng)框架（我個(gè)人覺得哈，你可以繼續(xù)完善，不過你要告訴我，我也學(xué)習(xí)一下?。?/p>

/*
 * 實(shí)現(xiàn)動(dòng)畫的步驟:
 1.怎樣得到當(dāng)前的樣式 封裝一個(gè)函數(shù) getStyle()
 2.步長(zhǎng)的計(jì)算 用(目標(biāo)位置 - 當(dāng)前的樣式) / 10
 3. 緩動(dòng)動(dòng)畫原理: 盒子本身的樣式 + 步長(zhǎng)(不斷變化的)
 */
/*
 * css設(shè)置透明度，一般在ie中用的是filter:alpha(opacity=0);
而在firefox中，一般就是直接使用opacity:0
*/
// 多個(gè)屬性的運(yùn)動(dòng)框架 以及添加回調(diào)函數(shù)
function animate(obj,json,fn){ // 目標(biāo)obj json 屬性：屬性值 fn回調(diào)函數(shù)
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var flag = true;// 用來判斷是否停止定時(shí)器 
 // 遍歷json
 for (var attr in json) { //attr 屬性 json[attr]值
 var curStyle = 0;
 if (attr == "opacity") {
 curStyle = parseInt(getStyle(obj,attr)*100);
 } else{
 curStyle = parseInt(getStyle(obj,attr));// 獲得數(shù)值
 }
 // 得到步長(zhǎng) 目標(biāo)位置就是json[attr]
 var step = (json[attr]-curStyle) / 10;
 step = step > 0 ? Math.ceil(step) :Math.floor(step);

 // 判斷透明度
 if (attr == "opacity") { // 判斷用戶有沒有輸入opacity
 if ("opacity" in obj.style) { 
  obj.style.opacity = (curStyle + step) / 100;
 } else{
  obj.style.filter = "alpha(opacity="+(curStyle +step)+")";
 }

 } else if(attr == "zIndex"){
 obj.style.zIndex = json[attr];
 } else{
 obj.style[attr] = curStyle +step +"px";
 }
 // 判斷是否已經(jīng)都到了目標(biāo)位置 只要其中一個(gè)不滿足條件 就不應(yīng)該停止定時(shí)器
 if (curStyle != json[attr]) {
 flag = false;
 }
 }
 // 判斷定時(shí)器條件 是否該停止了
 if (flag) {
 clearInterval(obj.timer)
 // 當(dāng)定時(shí)器停止后，動(dòng)畫也就結(jié)束了.如果有回調(diào)函數(shù)就執(zhí)行回調(diào)函數(shù)
 if(fn){
 fn();
 }

 }
 },30);
}

// 封裝函數(shù) 得到屬性
function getStyle(obj,attr) { // 誰的 那個(gè)屬性
 if(obj.currentStyle) // ie 等
 {
 return obj.currentStyle[attr]; // 返回傳遞過來的某個(gè)屬性
 }
 else
 {
 return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器
 }
}

接著我們?cè)趈s里面引入我們寫的框架

<script src="animate.js"></script>

接下來，寫js代碼

<script>
 window.onload = function(){
 var box = document.getElementById("box");
 var lis = box.children[0].children;
 for (var i = 0; i < lis.length;i++) {
  lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
  lis[i].onmouseover = function(){
  for (var j = 0; j < lis.length;j++) {
  animate(lis[j],{width:100});
  }
  animate(this,{width:800});
  }
  lis[i].onmouseout = function(){
  for (var k = 0; k < lis.length;k++) {
  animate(lis[k],{width:240});
  }
  }
 }
 }
</script>

好啦，這樣就完成了，具體效果你自己動(dòng)手看看吧。完整的下載地址為js版本的手風(fēng)琴效果

寫完了js，發(fā)現(xiàn)代碼量好多啊，看看jquery代碼，哦買嘎，切記一定要先引入jQuery的包，再寫代碼哈！

<script src="jquery-1.11.1.min.js"></script>
 <script>
 $(function(){
 $("#box li").each(function(index,ele){
  $(ele).css("background","url(images/"+(index+1)+".jpg)");
 }).mouseenter(function(){
  $(this).stop().animate({width:800},500).siblings("li").stop().animate({width:100},500);
 }).mouseleave(function(){
  $("#box li").stop().animate({width:240},500);
 });
 });

 </script>

精簡(jiǎn)了好多。
來吧，我們的jQuery版本手風(fēng)琴效果下載地址

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

您可能感興趣的文章: