地图 广告
招租

←—
订阅
投稿
您的位置:网站首页 > 特效代码 > 网页图片特效 > 正文:jQuery插件版仿手风琴的图片幻灯切换效果

jQuery插件版仿手风琴的图片幻灯切换效果

日期:2011-12-29 19:48:00 标签:图片特效 图片切换 切换效果 手风琴 jQuery 插件

由于代码运行框不够完善,本特效暂不提供运行预览,请见谅~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery插件版仿手风琴的图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
/*
Theme Name: Airos Chou
Theme URI: http://www.sunflowamedia.com
Description: Web Design examples
*/
body{
 font-family:"Trebuchet MS",sans-serif;
 font-size:14px;
 background:#212121;
 color:#fff;
}
img {
 border:0;
}
.ei_menu{
 background:#111;
 width:100%;
 overflow:hidden;
}
.ei_menu ul{
 height:350px;
 margin:0;
 padding:0;
 position:relative;
 display:block;
}
.ei_menu ul li{
 width:75px;
 height:350px;
 float:left;
 position:relative;
 overflow:hidden;
 border-right:2px solid #111;
}
.ei_preview{
 width:75px;
 height:350px;
 cursor:pointer;
 position:absolute;
 top:0px;
 left:0px;
 background:url(http://www.CsrCode.Cn/images/20111110/bw.jpg) no-repeat top left;
}
.ei_image{
 width:75px;
 height:350px;
 position:absolute;
 left:75px;
 top:0px;
 opacity:0.2;
 background:url(http://www.CsrCode.Cn/images/20111110/color.jpg) no-repeat top left;
}
.pos1 span{
 background-position:0px 0px;
}
.pos2 span{
 background-position:-75px 0px;
}
.pos3 span{
 background-position:-152px 0px;
}
.pos4 span{
 background-position:-227px 0px;
}
.pos5 span{
 background-position:-302px 0px;
}
.pos6 span{
 background-position:-377px 0px;
}
.ei_descr{
 position:absolute;
 width:278px;
 height:310px;
 border-right:7px solid #f0f0f0;
 padding:20px;
 left:75px;
 top:0px;
 background:#fff;
}
.ei_descr h2{
 font-family:'Rock Salt',arial,serif;
 font-size:26px;
 color:#555;
 text-shadow:0px 0px 1px #fff;
 background:#fff url(http://www.CsrCode.Cn/images/20111110/stripe_light.gif) repeat top left;
 margin:0;
 padding:0;
}
.ei_descr h3{
 font-family:'Raleway',arial,serif;
 font-size:1.5em;
 color:#fff;
 text-shadow:0px 0px 1px #000;
 font-style:normal;
 margin:0;
 padding:10px;
 background:#333;
}
.ei_descr p{
 color:#000;
 padding:10px 5px 0px 5px;
 margin:0;
 line-height:18px;
 font-size:12px;
 font-family:Arial;
 text-transform:uppercase;
}
</style>
<script type="text/javascript" src="http://www.CsrCode.Cn/images/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://www.CsrCode.Cn/images/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(function() {
        var $menu    = $('#ei_menu > ul'),
            $menuItems   = $menu.children('li'),
            $menuItemsImgWrapper= $menuItems.children('a'),
            $menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
            totalMenuItems  = $menuItems.length,
            ExpandingMenu  = (function(){
                /*
                    @current
                    set it to the index of the element you want to be opened by default,
                    or -1 if you want the menu to be closed initially
                 */
                var current    = 2,
                /*
                    @anim
                    if we want the default opened item to animate initialy set this to true
                 */
                anim    = false,
                /*
                    checks if the current value is valid -
                    between 0 and the number of items
                 */
                validCurrent  = function() {
                    return (current >= 0 && current < totalMenuItems);
                },
                init    = function() {
                        /* show default item if current is set to a valid index */
                    if(validCurrent())
                        configureMenu();
                    initEventsHandler();
                },
                configureMenu  = function() {
                        /* get the item for the current */
                    var $item = $menuItems.eq(current);
                        /* if anim is true slide out the item */
                    if(anim)
                        slideOutItem($item, true, 900, 'easeInQuint');
                    else{
                            /* if not just show it */
                        $item.css({width : '400px'})
                        .find('.ei_image')
                        .css({left:'0px', opacity:1});
                            /* decrease the opacity of the others */
                            $menuItems.not($item)
                                      .children('.ei_preview')
                                      .css({opacity:0.2});
                    }
                },
                initEventsHandler = function() {
                        /*
                        when we click an item the following can happen:
                        1) The item is already opened - close it!
                        2) The item is closed - open it! (if another one is opened, close it!)
                        */
                    $menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
                        var $this  = $(this).parent(),
                        idx  = $this.index();
                        if(current === idx) {
                            slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
                            current = -1;
                        }
                        else{
                            if(validCurrent() && current !== idx)
                                    slideOutItem($menuItems.eq(current), false, 250, 'jswing');
                            current = idx;
                                slideOutItem($this, true, 250, 'jswing');
                        }
                        return false;
                    });
                },
                    /* if you want to trigger the action to open a specific item */
                    openItem   = function(idx) {
                        $menuItemsImgWrapper.eq(idx).click();
                    },
                    /*
                    opens or closes an item
                    note that "mLeave" is just true when all the items close,
                    in which case we want that all of them get opacity 1 again.
                    "dir" tells us if we are opening or closing an item (true | false)
                    */
                slideOutItem  = function($item, dir, speed, easing, mLeave) {
                    var $ei_image = $item.find('.ei_image'),
                    itemParam = (dir) ? {width : '400px'} : {width : '75px'},
                    imageParam = (dir) ? {left : '0px'} : {left : '75px'};
                        /*
                        if opening, we animate the opacity of all the elements to 0.1.
                        this is to give focus on the opened item..
                        */
                    if(dir)
                    /*
                            alternative:
                            $menuItemsPreview.not($menuItemsPreview.eq(current))
                                             .stop()
                                             .animate({opacity:0.1}, 500);
                     */
                        $menuItemsPreview.stop()
                    .animate({opacity:0.1}, 1000);
                    else if(mLeave)
                        $menuItemsPreview.stop()
                    .animate({opacity:1}, 1500);
                        /* the <li> expands or collapses */
                    $item.stop().animate(itemParam, speed, easing);
                        /* the image (color) slides in or out */
                    $ei_image.stop().animate(imageParam, speed, easing, function() {
                            /*
                            if opening, we animate the opacity to 1,
                            otherwise we reset it.
                            */
                        if(dir)
                            $ei_image.animate({opacity:1}, 2000);
                        else
                            $ei_image.css('opacity', 0.2);
                    });
                };
                return {
                    init   : init,
                    openItem : openItem
                };
            })();
        /*
        call the init method of ExpandingMenu
        */
        ExpandingMenu.init();
    /*
    if later on you want to open / close a specific item you could do it like so:
    ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
    */
    });
</script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id="ei_menu" class="ei_menu">
 <ul>
  <li>
   <a href="#" class="pos1">
    <span class="ei_preview"></span>
    <span class="ei_image"></span>
   </a>
   <div class="ei_descr">
    <h2>USOPP</h2>
    <h3>B30,000,00</h3>
    <p>Usopp (ウソップ, Usoppu), nicknamed "King of Snipers Sogeking" (狙撃の王様, Sogeki no ō-sama, renamed "Sniper King" in the Viz Media manga translation), is the crew's 19 year old marksman.</p>
   </div>
  </li>
  <li>
   <a href="#" class="pos2">
    <span class="ei_preview"></span>
    <span class="ei_image"></span>
   </a>
   <div class="ei_descr">
    <h2>ZORO</h2>
    <h3>B120,000,000</h3>
    <p>Roronoa Zoro (ロロノア?ゾロ, spelled as "Roronoa Zolo" in some English adaptations), named after Fran?ois l'Olonnais,ch.28 nicknamed "Pirate Hunter" Zoro (海賊狩りのゾロ, Kaizoku-Gari no Zoro, spelled as "Pirate Hunter" Zolo in some English adaptations)[citation needed], is a 21 year old, skilled swordsman who uses up to three swords at once, clutching the third in his mouth.</p>
   </div>
  </li>
  <li>
   <a href="#" class="pos3">
    <span class="ei_preview"></span>
    <span class="ei_image"></span>
   </a>
   <div class="ei_descr">
    <h2>LUFFY</h2>
    <h3>B400,000,000</h3>
    <p>Monkey D. Luffy (モンキー?D?ルフィ, Monkī Dī Rufi), nicknamed "Straw Hat" Luffy (麦わらのルフィ, Mugiwara no Rufi), is the 19 year-old captain of The Straw Hat Pirates and the main protagonist of the franchise.</p>
   </div>
  </li>
  <li>
   <a href="#" class="pos4">
    <span class="ei_preview"></span>
    <span class="ei_image"></span>
   </a>
   <div class="ei_descr">
    <h2>NAMI</h2>
    <h3>B16,000,000</h3>
    <p>Nami (ナミ), nicknamed "Cat Burglar" Nami (泥棒猫のナミ, Dorobō Neko no Nami, renamed Nami the "Navigator" in the 4Kids anime), is the crew's 20 year oldch.27 navigator and thief.</p>
   </div>
  </li>
  <li>
   <a href="#" class="pos5">
    <span class="ei_preview"></span>
    <span class="ei_image"></span>
   </a>
   <div class="ei_descr">
    <h2>SANJI</h2>
    <h3>B77,000,000</h3>
    <p>Sanji (サンジ), nicknamed "Black Leg" Sanji (黒脚のサンジ, Kuro Ashi no Sanji)ch.435, is the crew's 21-year-oldch.55 chef.</p>
   </div>
  </li>
 </ul>
</div>
</body>
</html>

<br><br><hr><p align="center"><font color=skyblue>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>

本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
(本文由 CsrCode.CN|芯晴网页特效 收集丨www.CsrCode.cn
本文网址:
评论信息
抱歉,本文暂停评论留言。