<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <meta charset="UTF-8">



  <style>/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, textarea, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block; }
    body {
        line-height: 1; }
    ol, ul {
        list-style: none; }
    blockquote, q {
        quotes: none; }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none; }
    table {
        border-collapse: collapse;
        border-spacing: 0; }

/* #Basic Styles
================================================== */       
.nav a{display:block;text-decoration:none;color:white;} 
.nav{position:relative;width:200px;height:320px;overflow:hidden;}
.nav-imgs{position:absolute;width:999999px;left:0;-webkit-transition:left .5s ease-in-out;-moz-transition:left .5s ease-in-out;-ms-transition:left .5s ease-in-out;-o-transition:left .5s ease-in-out;transition:left .5s ease-in-out;}
.nav-img{float:left;width:200px;height:320px;}
.nav-img img{vertical-align:top;}
.nav-img1{}
.nav-img2{}
.nav-img3{}

.nav-texts{position:absolute;bottom:30px;}
.nav-text{font-weight:700;padding:0 20px;width:140px;height:30px;line-height:30px;filter:alpha(opacity=95);-moz-opacity:.95;-khtml-opacity:.95;opacity:.95;
    -webkit-transition:width .25s ease-in-out;-moz-transition:width .25s ease-in-out;-ms-transition:width .25s ease-in-out;-o-transition:width .25s ease-in-out;transition:width .25s ease-in-out;}
.nav-text:hover{width:160px;}
.nav-text1{background-color:#826B99;}
.nav-text2{background-color:#FF7F9F;}
.nav-text3{background-color:#B38F7D;}</style>

  <script>
    window.open    = function(){};
    window.print   = function(){};
    // Support hover state for mobile.
    if (false) {
      window.ontouchstart = function(){};
    }
  </script>

</head>

<body>

  <div class="nav">
        <ul style="left: -400px;" class="nav-imgs" id="nav-imgs">
            <li class="nav-img nav-img1">
                <a href="javascript:void(0);" title="some img here"><img src="http://xiguabaobao.com/demo/tmall/img/1.jpg"></a>
            </li>
            <li class="nav-img nav-img2">
                <a href="javascript:void(0);" title="some img here"><img src="http://xiguabaobao.com/demo/tmall/img/2.jpg"></a>
            </li>
            <li class="nav-img nav-img3">
                <a href="javascript:void(0);" title="some img here"><img src="http://xiguabaobao.com/demo/tmall/img/3.jpg"></a>
            </li>
        </ul>

        <ul class="nav-texts" id="nav-texts">
            <li class="nav-text nav-text1">
                <a href="javascript:void(0);" title="some text here">some text here</a>
            </li>
            <li class="nav-text nav-text2">
                <a href="javascript:void(0);" title="some text here">some text here</a>
            </li>
            <li class="nav-text nav-text3">
                <a href="javascript:void(0);" title="some text here">some text here</a>
            </li>
        </ul>
    </div>

  <script>

</script>

  <script>
    var nav_imgs = document.getElementById('nav-imgs');
        var nav_texts = document.getElementById('nav-texts');
        nav_texts.onmouseover = function(e){
            if (e.target.className.indexOf('nav-text1') > -1 || e.target.parentNode.className.indexOf('nav-text1') > -1) {
                nav_imgs.style.left = '0';
            }else if (e.target.className.indexOf('nav-text2') > -1 || e.target.parentNode.className.indexOf('nav-text2') > -1) {
                nav_imgs.style.left = '-200px';
            }else if (e.target.className.indexOf('nav-text3') > -1 || e.target.parentNode.className.indexOf('nav-text3') > -1) {
                nav_imgs.style.left = '-400px';
            }
        }
    //@ sourceURL=pen.js
  </script>

  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage('resize', "*");
    }
  </script>




</body></html>

 <div class="nav">
        <ul class="nav-imgs" id="nav-imgs">
            <li class="nav-img nav-img1">
                <a href="javascript:void(0);" target="_blank" title="some img here"><img src="http://xiguabaobao.com/demo/tmall/img/1.jpg"></a>
            </li>
            <li class="nav-img nav-img2">
                <a href="javascript:void(0);" target="_blank" title="some img here"><img src="http://xiguabaobao.com/demo/tmall/img/2.jpg"></a>
            </li>
            <li class="nav-img nav-img3">
                <a href="javascript:void(0);" target="_blank" title="some img here"><img src="http://xiguabaobao.com/demo/tmall/img/3.jpg"></a>
            </li>
        </ul>

        <ul class="nav-texts" id="nav-texts">
            <li class="nav-text nav-text1">
                <a href="javascript:void(0);" target="_blank" title="some text here">some text here</a>
            </li>
            <li class="nav-text nav-text2">
                <a href="javascript:void(0);" target="_blank" title="some text here">some text here</a>
            </li>
            <li class="nav-text nav-text3">
                <a href="javascript:void(0);" target="_blank" title="some text here">some text here</a>
            </li>
        </ul>
    </div>

 /* #Reset & Basics (Inspired by E. Meyers)
================================================== */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, textarea, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block; }
    body {
        line-height: 1; }
    ol, ul {
        list-style: none; }
    blockquote, q {
        quotes: none; }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none; }
    table {
        border-collapse: collapse;
        border-spacing: 0; }

/* #Basic Styles
================================================== */       
.nav a{display:block;text-decoration:none;color:white;} 
.nav{position:relative;width:200px;height:320px;overflow:hidden;}
.nav-imgs{position:absolute;width:999999px;left:0;-webkit-transition:left .5s ease-in-out;-moz-transition:left .5s ease-in-out;-ms-transition:left .5s ease-in-out;-o-transition:left .5s ease-in-out;transition:left .5s ease-in-out;}
.nav-img{float:left;width:200px;height:320px;}
.nav-img img{vertical-align:top;}
.nav-img1{}
.nav-img2{}
.nav-img3{}

.nav-texts{position:absolute;bottom:30px;}
.nav-text{font-weight:700;padding:0 20px;width:140px;height:30px;line-height:30px;filter:alpha(opacity=95);-moz-opacity:.95;-khtml-opacity:.95;opacity:.95;
    -webkit-transition:width .25s ease-in-out;-moz-transition:width .25s ease-in-out;-ms-transition:width .25s ease-in-out;-o-transition:width .25s ease-in-out;transition:width .25s ease-in-out;}
.nav-text:hover{width:160px;}
.nav-text1{background-color:#826B99;}
.nav-text2{background-color:#FF7F9F;}
.nav-text3{background-color:#B38F7D;}

 var nav_imgs = document.getElementById('nav-imgs');
        var nav_texts = document.getElementById('nav-texts');
        nav_texts.onmouseover = function(e){
            if (e.target.className.indexOf('nav-text1') > -1 || e.target.parentNode.className.indexOf('nav-text1') > -1) {
                nav_imgs.style.left = '0';
            }else if (e.target.className.indexOf('nav-text2') > -1 || e.target.parentNode.className.indexOf('nav-text2') > -1) {
                nav_imgs.style.left = '-200px';
            }else if (e.target.className.indexOf('nav-text3') > -1 || e.target.parentNode.className.indexOf('nav-text3') > -1) {
                nav_imgs.style.left = '-400px';
            }
        }