jQuery仿藝龍旅行網圖片手風琴特效



121 483 162



特效描述:jQuery 圖片手風琴特效,jQuery圖片手風琴

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

2. HTML代碼

<ul class="fold_wrap" id="sm">
	<li>
		<a href="http://www.dijiuzhanzhang.com/">
			<div class="mask_b"><h4>溫泉酒店</h4></div>
			<div class="pic_auto pic_auto1"></div>
			<div class="adv_intro">有誰不愛泡溫泉?浸入霧氣蒸騰的泉水之中,把身體泡成一片茶葉,舒展輕盈。有比這更美妙的感覺嗎?</div>
		</a>
	</li>
	<li>
		<a href="http://www.dijiuzhanzhang.com/">
			<div class="mask_b"><h4>情侶酒店</h4></div>
			<div class="pic_auto pic_auto2"></div>
			<div class="adv_intro">浪漫,是香閨圍籠里的曖昧,是燈火迷離,淚眼婆裟的唯美,是楊柳岸、曉風殘月中的無語凝噎……</div>
		</a>
	</li>
	<li>
		<a href="http://www.dijiuzhanzhang.com/">
			<div class="mask_b"><h4>設計師酒店</h4></div>
			<div class="pic_auto pic_auto3"></div>
			<div class="adv_intro">前衛的酒店設計理念,獨具魅力的風格,優美的自然風光才能有這樣頂級的酒店。</div>
		</a>
	</li>
	<li>
		<a href="http://www.dijiuzhanzhang.com/">
			<div class="mask_b"><h4>青年旅舍</h4></div>
			<div class="pic_auto pic_auto4"></div>
			<div class="adv_intro">我為你煮一杯溫茶,斟一杯美酒。讓我們席地而坐,聽你的夢想。用你的只言片語裝點我們的夢想博物館。</div>
		</a>
	</li>
	<li>
		<a href="http://www.dijiuzhanzhang.com/">
			<div class="mask_b"><h4>特色客棧</h4></div>
			<div class="pic_auto pic_auto5"></div>
			<div class="adv_intro">在這里,你可以靜靜發呆,而不被人打擾,只用細細品味它的美好;在這里,你能看見最美好的星星,能讓你找到最深的感動。</div>
		</a>
	</li>
	<li>
		<a href="http://www.dijiuzhanzhang.com/">
			<div class="mask_b"><h4>海島酒店</h4></div>
			<div class="pic_auto pic_auto6"></div>
			<div class="adv_intro">不想過冬,厭倦沉重,就飛去熱帶的島嶼游泳,卸下包袱,放下壓力,讓自己的身與心,在這碧海藍天之中,享受一次超自然的洗禮。</div>
		</a>
	</li>
	<li>
		<a href="http://www.dijiuzhanzhang.com/">
			<div class="mask_b"><h4>海外溫泉</h4></div>
			<div class="pic_auto pic_auto7"></div>
			<div class="adv_intro">因地形地質的區別,世界各地的溫泉也千差萬別,選擇一處適合自己的溫泉,5分鐘后,你會忘記自己,20分鐘后,你會忘記世界。</div>
		</a>
	</li>
</ul>
<script type="text/javascript">
(function(){
var slideMenu=function(){
  var sp,st,t,m,sa,l,w,gw,ot;
  return{
    destruct:function(){
        if(m){
          clearInterval(m.htimer);
          clearInterval(m.timer);
        }
    },
    build:function(sm,sw,mt,s,sl,h){
      sp=s; 
      st=sw; 
      t=mt;
      m=document.getElementById(sm);
      sa=m.getElementsByTagName('li');
      l=sa.length; 
      w=m.offsetWidth; 
      gw=w/l;
      ot=Math.floor((w-st)/(l-1)); 
      var i=0;
      for(i;i<l;i++){
        s=sa[i]; 
        s.style.width=gw+'px'; 
        this.timer(s)
      }
      if(sl!=null){
        m.timer=setInterval(function(){
          slideMenu.slide(sa[sl-1])
        },t)}
    },
    timer:function(s){
      s.onmouseover=function(){
        clearInterval(m.htimer);
        clearInterval(m.timer);
        m.timer = setInterval(function(){
          slideMenu.slide(s)
        },t);
        //console.log($(this).find('.mask_b').html());
        $(this).find('.mask_b').hide();
        //console.log($(this).find('.mask_b').attr("style"));
    }
      s.onmouseout=function(){
        clearInterval(m.timer);
        clearInterval(m.htimer);
        m.htimer=setInterval(function(){
          slideMenu.slide(s,true)
        },t);
        //console.log($(this).find('.mask_b').html());
       $(this).find('.mask_b').show();
       //console.log($(this).find('.mask_b').attr("style"));
     }
    },
    slide:function(s,c){
      var cw=parseInt(s.style.width);
      if((cw<st && !c) || (cw>gw && c)){
        var owt=0; var i=0;
        for(i;i<l;i++){
          if(sa[i]!=s){
            var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
            if(ow<gw && c){
              oi=Math.floor((gw-ow)/sp); 
              oi=(oi>0)?oi:1; 
              o.style.width=(ow+oi)+'px';
              //console.log(o);
            //console.log(o.style.width);
            }else if(ow>ot && !c){
              oi=Math.floor((ow-ot)/sp); 
              oi=(oi>0)?oi:1; 
              o.style.width=(ow-oi)+'px';
              //console.log(o);
              //console.log(o.style.width);
            }
            if(c){
              owt=owt+(ow+oi)
            }else{
              owt=owt+(ow-oi)
            }
          }
        }
        s.style.width=(w-owt)+'px';
      }else{
        if(m.htimer)
          clearInterval(m.htimer)
        if(m.timer)
          clearInterval(m.timer);
      }
    }
  };
}();
slideMenu.build('sm',400,10,10,1);
})();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 圖片放大鏡 圖片拖動 圖片拖拽 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 頭像上傳 圖片上傳 二維碼 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 圖片廣告 純圖片輪播 圖片輪播 圖片滑動 圖片滑塊 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片滾動 圖片滾動條 圖片切換 圖片選項卡 圖標選項卡 圖片收縮展開 圖片收縮 圖片展開 圖標導航 圖標菜單 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 背景切換 大圖切換 滑動手風琴 滑動星星打分 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 收縮展開 展開收縮 收縮 展開 圖表 圖片 圖片插件 頭像截圖 其他 圖片滑動 圖片滑塊 圖片收縮展開 圖片收縮 圖片展開 滑動手風琴 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 鼠標滑過 鼠標懸停 跟隨鼠標移動 圖片滑動 滑動圖片
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子