This plug-in is included in the superslide tag switch, focus map of a variety of combinations of plug-ins, Superslide is committed to achieve the site unified effect call function, can solve most of the label switching, focus map switching effects, but also multiple slide combination to create more results. (Compatible with IE kernel (including invincible IE6), WebKit kernel, FF, opera and other mainstream browsers). It is suitable for the website Unified Plug-in library which contains most of the JS effect of the website commonly used. The file contains detailed usage.
JS Call:
Copy Code code as follows:
JQuery (". Slidetxtbox"). Slide ({effect: "left"});
JQuery ("#doubleSlideTxt"). Slide ({titcell: ". Parhd li", Maincell: ". Parbdin", Effect: "Top", Trigger: "click"});
CSS code:
Copy Code code as follows:
/* Double slide-text scrolling effect * *
#doubleSlideTxt {width:524px; zoom:1; position:relative; text-align:left; }
#doubleSlideTxt. parhd{position:absolute; z-index:1 top:10px; left:453px; width:44px; overflow:hidden;}
#doubleSlideTxt. PARHD li{width:14px; padding:5px 5px 5px 5px; line-height:16px; border:1px solid #baccdf; border-left:0;
margin-bottom:5px; Background: #fff; Color: #b5c4d3; Cursor:pointer; margin-left:1px; }
#doubleSlideTxt. PARHD li.on{background: #dbeefd; font-weight:bold; color: #367399; BORDER-RIGHT:3PX solid #4e98c6;
margin-left:0px; position:relative; z-index:100; padding:5px 10px 5px 10px;}
#doubleSlideTxt. parbd{position:relative; z-index:0; width:440px; left:0px; border:1px solid #baccdf; padding:6px; Background: #dbeefd;}
#doubleSlideTxt. parbd. slidetxtbox{background: #fff; width:400px; border:0; padding:20px; }
#doubleSlideTxt. parbd. Slidetxtbox. hd{background: #fff; }
Html:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns= " Http://www.w3.org/1999/xhtml "><head>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<meta http-equiv= "Content-language" content= "ZH-CN" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<title>super slide</title>
<script type= "Text/javascript" src= ". /jquery.pack.js "></script>
<script type= "Text/javascript" src= ". /jquery.blockui.js "></script>
<script type= "Text/javascript" src= ". /jquery. Superslide.js "></script>
<link href= ". /default.css "rel=" stylesheet "type=" Text/css ">
<link href= ". /demo.css "rel=" stylesheet "type=" Text/css ">
</head>
<body>
<body>
<!--content S-->
<div id= "Democontent" >
<div class= "Effect" >
<div id= "Doubleslidetxt" >
<div class= "PARHD" >
<ul>
<li> Column One </li>
<li> Section Two </li>
<li> column Three </li>
</ul>
</div>
<!--PARBD S-->
<div class= "PARBD" >
<div class= "Parbdin" >
<!--Slidetxtbox S-->
<div class= "Slidetxtbox" >
<div class= "HD" >
<ul><li><a href= "" > Education 1</a></li><li><a href= "> Training 1</a></li> <li><a href= "" > Go Abroad 1</a></li></ul>
</div>
<div class= "BD" >
<ul class= "Infolist" >
<li><span class= "date" >2011-11-11</span><a href= "> China broke World software giant rules </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Spoken English: Can speak Chinese to speak it! </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Farm picking is not as fun as learning foreign languages online </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Math teacher also read the study materials? </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Learn English to send ipad2,45 day breakthrough heard </a></li >
<li><span class= "date" >2011-11-11</span><a href= "" > Learn a Foreign language, on the Bei Wai! </a></li>
</ul>
<ul class= "Infolist" >
<li><span class= "date" >2011-11-11</span><a href= "" > Teacher Composition: 3 wonderful strokes skillfully write high points </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> Yale Kid: Teach you to prepare for a test sat</a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Schichang: High-end professional language teaching </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Math teacher also read the study materials? </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > "recommended" Famous school English method exposure! </a></li>
<li><span class= "date" >2011-11-11</span><a href= ">2012 college Entrance Examination" Big exposure!! </a></li>
</ul>
<ul class= "Infolist" >
<li><span class= "date" >2011-11-11</span><a href= "" > Admission Instructions for eight top schools in Australia </a></li>
<li><span class= "date" >2011-11-11</span><a href= ">2012 World University Rankings freshly baked </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> Singapore Study, International bilingual course </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > College Entrance Examination after the University of Japan choose a famous school </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> Education and Training Industry advantage Resources Promotion </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> book The last Education show this year </a></li>
</ul>
</div>
</div>
<!--Slidetxtbox E-->
<!--Slidetxtbox S-->
<div class= "Slidetxtbox" >
<div class= "HD" >
<ul><li><a href= "" > Education 2</a></li><li><a href= "> Training 2</a></li> <li><a href= "" > Go Abroad 2</a></li></ul>
</div>
<div class= "BD" >
<ul class= "Infolist" >
<li><span class= "date" >2011-11-11</span><a href= "> China broke World software giant rules </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Spoken English: Can speak Chinese to speak it! </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Farm picking is not as fun as learning foreign languages online </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Math teacher also read the study materials? </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Learn English to send ipad2,45 day breakthrough heard </a></li >
<li><span class= "date" >2011-11-11</span><a href= "" > Learn a Foreign language, on the Bei Wai! </a></li>
</ul>
<ul class= "Infolist" >
<li><span class= "date" >2011-11-11</span><a href= "" > Teacher Composition: 3 wonderful strokes skillfully write high points </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> Yale Kid: Teach you to prepare for a test sat</a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Schichang: High-end professional language teaching </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Math teacher also read the study materials? </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > "recommended" Famous school English method exposure! </a></li>
<li><span class= "date" >2011-11-11</span><a href= ">2012 college Entrance Examination" Big exposure!! </a></li>
</ul>
<ul class= "Infolist" >
<li><span class= "date" >2011-11-11</span><a href= "" > Admission Instructions for eight top schools in Australia </a></li>
<li><span class= "date" >2011-11-11</span><a href= ">2012 World University Rankings freshly baked </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> Singapore Study, International bilingual course </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > College Entrance Examination after the University of Japan choose a famous school </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> Education and Training Industry advantage Resources Promotion </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> book The last Education show this year </a></li>
</ul>
</div>
</div>
<!--Slidetxtbox E-->
<!--Slidetxtbox S-->
<div class= "Slidetxtbox" >
<div class= "HD" >
<ul><li><a href= "" > Education 3</a></li><li><a href= "> Training 3</a></li> <li><a href= "" > Go Abroad 3</a></li></ul>
</div>
<div class= "BD" >
<ul class= "Infolist" >
<li><span class= "date" >2011-11-11</span><a href= "> China broke World software giant rules </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Spoken English: Can speak Chinese to speak it! </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Farm picking is not as fun as learning foreign languages online </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Math teacher also read the study materials? </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Learn English to send ipad2,45 day breakthrough heard </a></li >
<li><span class= "date" >2011-11-11</span><a href= "" > Learn a Foreign language, on the Bei Wai! </a></li>
</ul>
<ul class= "Infolist" >
<li><span class= "date" >2011-11-11</span><a href= "" > Teacher Composition: 3 wonderful strokes skillfully write high points </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> Yale Kid: Teach you to prepare for a test sat</a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Schichang: High-end professional language teaching </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > Math teacher also read the study materials? </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > "recommended" Famous school English method exposure! </a></li>
<li><span class= "date" >2011-11-11</span><a href= ">2012 college Entrance Examination" Big exposure!! </a></li>
</ul>
<ul class= "Infolist" >
<li><span class= "date" >2011-11-11</span><a href= "" > Admission Instructions for eight top schools in Australia </a></li>
<li><span class= "date" >2011-11-11</span><a href= ">2012 World University Rankings freshly baked </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> Singapore Study, International bilingual course </a></li>
<li><span class= "date" >2011-11-11</span><a href= "" > College Entrance Examination after the University of Japan choose a famous school </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> Education and Training Industry advantage Resources Promotion </a></li>
<li><span class= "date" >2011-11-11</span><a href= "> book The last Education show this year </a></li>
</ul>
</div>
</div>
<!--Slidetxtbox E-->
</div>
</div>
<!--PARBD E-->
</div>
<script type= "Text/javascript" >
JQuery (". Slidetxtbox"). Slide ({effect: "left"});
JQuery ("#doubleSlideTxt"). Slide ({titcell: ". Parhd li", Maincell: ". Parbdin", Effect: "Top", Trigger: "click"});
</script>
</div>
</div>
<!--content E-->
</body>
</html>
The above is the entire content of this article, I hope you can enjoy.
