A jQuery-based focus chart with text titles switched up and down, jquery focus

A jQuery-based focus chart with text titles switched up and down, jquery focus

Today we will share with you a very practical jQuery focus graph plug-in. Its biggest feature is its ease of use and relatively simple implementation. The floating text link under the image of the focus chart can be switched to the corresponding image when the mouse slides over the text. During the image switching process, the animation effect fades in and out, which is simple and attractive. As follows:

Download Online Preview source code

Implementation code.

Html code:

<Div class = "I _box"> <div class = "I _imglist"> <ul id = "J_imgList"> <li> <a href = "#">  </a> </li> <a href =" # ">  </a> </li> <a href =" # ">  </a> </li> <Href = "#">  </a> </li> <a href = "#">  </a> </li> <a href = "# ">  </a> </li> <a href = "#">  </a> </li> <a href =" # ">  </a> </li> <a href = "#">  </a> </li> <a href = "#">  </a> </li> <a href = "#">  </a> </li> <a href =" # ">  </li> <a href = "#">  </a> </li> <a href = "#">  </a> </l I> </ul> </div> <! -- Switch to the big chart --> <div class = "I _nav"> <div class = "I _navlist"> <ul id = "J_navList"> <li> <a href = "#"> webmaster materials </a> </li> <a href = "#"> keep following in my mind </a> </li> <a href = "#"> past events are far away </a> </li> <a href = "#"> year after year </a> </li> 
Css code:
 /*reset css*/        *        {            margin: 0;            padding: 0;            list-style: none;            border: 0;        }        /*demo css*/        .i_box        {            position: relative;            overflow: hidden;            width: 700px;            height: 350px;            margin: 40px auto 0 auto;        }        .i_imglist        {            width: 700px;            height: 350px;            z-index: 0;        }        .i_imglist li img        {            width: 700px;            height: 350px;            display: block;        }        .i_nav        {            position: absolute;            left: 20px;            bottom: 0;            overflow: hidden;            width: 660px;            height: 30px;            z-index: 2;        }        .i_nav ul li        {            float: left;            _display: inline;            width: 163px;            height: 30px;            margin: 0 1px;            background-color: #000;            opacity: 0.5;            filter: alpha(opacity=50);            text-align: center;            line-height: 30px;            cursor: pointer;        }        .i_nav ul li.hover        {            background-color: #fff;            opacity: 0.8;            filter: alpha(opacity=80);        }        .i_nav ul li a        {            color: #fff;            text-decoration: none;        }        .i_nav ul li a:hover        {            text-decoration: underline;        }        .i_nav ul li.hover a        {            color: #000;        }        .i_prev a, .i_next a        {            position: absolute;            overflow: hidden;            width: 19px;            height: 30px;            background-color: #000;            color: #fff;            text-align: center;            font-weight: bold;            opacity: 0.9;            filter: alpha(opacity=90);            text-decoration: none;            line-height: 30px;        }        .i_prev a        {            left: 0;            bottom: 0;        }        .i_next a        {            right: 0;            bottom: 0;        }        .i_prev a:hover, .i_next a:hover        {            background-color: #fff;            opacity: 0.8;            filter: alpha(opacity=80);            color: #000;        }
Via: http://www.w2bc.com/Article/15772