Este plug-in inclui vários plug-ins combinados para troca de tags superslide e mapa de foco. Superslide é uma função dedicada a obter chamadas de efeitos especiais do site unificado. Ele pode resolver a maioria dos efeitos, como a comutação de tags e a comutação de mapas de foco, e também pode combinar vários slides para criar mais efeitos. (Compatível com navegadores convencionais como o IE Kernel (incluindo IE6 invencível), kernel webkit, FF, operador, etc.). A biblioteca plug-in unificada para sites contém a maioria dos efeitos JS comumente usados no site. O arquivo contém explicação detalhada de uso.
Chamada JS:
A cópia do código é a seguinte:
jQuery (".
jQuery ("#duploslidetxt"). slide ({titcell: ". parhd li", malanell: ". parbdin", efeito: "top", gatilho: "clique"});
Código CSS:
A cópia do código é a seguinte:
/* Efeito de rolagem de texto slide duplo*/
#doubleslidEtxt {width: 524px; zoom: 1; Posição: relativa; Alinhamento de texto: esquerda; }
#doubleslidetTxt .Parhd {Posição: Absolute; Z-Index: 1; topo: 10px; Esquerda: 453px; Largura: 44px; estouro: oculto; }
#doubleslidEtxt .parhd li {width: 14px; preenchimento: 5px 5px 5px 5px; altura da linha: 16px; borda: 1px sólido #baccdf; Border-Iff: 0;
Bottom de margem: 5px; Antecedentes: #FFF; Cor:#B5C4D3; Cursor: Ponteiro; margem-esquerda: 1px; }
#doubleslidEtxt .parhd li.on {background: #dbeefd; Peso da fonte: negrito; Cor:#367399; Right-Right: 3px Solid #4E98C6;
margem-esquerda: 0px; Posição: relativa; Index z: 100; preenchimento: 5px 10px 5px 10px;}
#doubleslidettxt .parbd {position: relativo; Z-Index: 0; Largura: 440px; Esquerda: 0px; borda: 1px sólido #baccdf; preenchimento: 6px; Antecedentes: #dbeefd;}
#doubleslidettxt .parbd .slidetxtBox {background: #ffff; Largura: 400px; borda: 0; preenchimento: 20px; }
#doubleslidettxt .parbd .slidetxtBox .hd {background: #fff; }
Html:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 strict // pt" "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 = "en-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>
<!-Conteúdo S->
<div id = "Democontent">
<div>
<div id = "dubleslidettxt">
<div>
<ul>
<li> Coluna 1 </li>
<li> Coluna 2 </li>
<li> Coluna três </li>
</ul>
</div>
<!-Parbd s->
<div>
<div>
<!-slidetxtbox s->
<div>
<div>
<ul> <li> <a href = ""> educação1 </a> </li> <li> <a href = ""> treinamento1 </a> </li> <li> <a href = ""> indo para o exterior1 </a> </li> </ul>
</div>
<div>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> China quebra as regras dos gigantes do software mundial </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> idioma falado: se você pode falar chinês, pode falar inglês! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> é melhor aprender a língua estrangeira online do que escolher vegetais na fazenda </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Os professores de matemática, física e química realmente lê materiais de aprendizagem? </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> aprenda inglês para enviar ipad2, 45 dias de avanço </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> estuda idiomas estrangeiros e vá para a Universidade de Estudos Estrangeiros de Pequim! </a> </li>
</ul>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> Professores famosos ensinam ensaios: 3 truques inteligentes para escrever pontuações altas </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> yale menino: ensine você a se preparar para o exame SAT </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> shi qiang: ensino de idiomas profissional de ponta </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Os professores de matemática, física e química realmente lê materiais de aprendizagem? </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 【recomendado】 O método inglês de uma escola de prestígio é exposto! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> o "ponto de teste" do exame de admissão da faculdade de 2012 foi exposto !! </a> </li>
</ul>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> oito escolas famosas na Austrália </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 2012 O ranking da Universidade Mundial é liberado recentemente </a> </li>
<li> <pan> 2011-11-11 </span> <a href = "" "> Estudo em Cingapura, cursos bilíngues internacionais </a> </li>
<li> <pan> 2011-11-11 </span> <a href = "" "você pode escolher entre as famosas escolas japonesas após o exame de admissão da faculdade </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> promoção de recursos de vantagem no setor de educação e treinamento </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Defina a última exposição educacional do ano agora </a> </li>
</ul>
</div>
</div>
<!-slidetxtbox e->
<!-slidetxtbox s->
<div>
<div>
<ul> <li> <a href = ""> educação 2 </a> </li> <li> <a href = ""> treinamento 2 </a> </li> <li> <a href = ""> indo para o exterior 2 </a> </li> </ul>
</div>
<div>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> China quebra as regras dos gigantes do software mundial </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> idioma falado: se você pode falar chinês, pode falar inglês! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> é melhor aprender a língua estrangeira online do que escolher vegetais na fazenda </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Os professores de matemática, física e química realmente lê materiais de aprendizagem? </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> aprenda inglês para enviar ipad2, 45 dias de avanço </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> estuda idiomas estrangeiros e vá para a Universidade de Estudos Estrangeiros de Pequim! </a> </li>
</ul>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> Professores famosos ensinam ensaios: 3 truques inteligentes para escrever pontuações altas </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> yale menino: ensine você a se preparar para o exame SAT </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> shi qiang: ensino de idiomas profissional de ponta </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Os professores de matemática, física e química realmente lê materiais de aprendizagem? </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 【recomendado】 O método inglês de uma escola de prestígio é exposto! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> o "ponto de teste" do exame de admissão da faculdade de 2012 foi exposto !! </a> </li>
</ul>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> oito escolas famosas na Austrália </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 2012 O ranking da Universidade Mundial é liberado recentemente </a> </li>
<li> <pan> 2011-11-11 </span> <a href = "" "> Estudo em Cingapura, cursos bilíngues internacionais </a> </li>
<li> <pan> 2011-11-11 </span> <a href = "" "você pode escolher entre as famosas escolas japonesas após o exame de admissão da faculdade </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> promoção de recursos de vantagem no setor de educação e treinamento </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Defina a última exposição educacional do ano agora </a> </li>
</ul>
</div>
</div>
<!-slidetxtbox e->
<!-slidetxtbox s->
<div>
<div>
<ul> <li> <a href = ""> educação3 </a> </li> <li> <a href = ""> treinamento3 </a> </li> <li> <a href = ""> indo para o exterior3 </a> </li> </ul>
</div>
<div>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> China quebra as regras dos gigantes do software mundial </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> idioma falado: se você pode falar chinês, pode falar inglês! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> é melhor aprender a língua estrangeira online do que escolher vegetais na fazenda </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Os professores de matemática, física e química realmente lê materiais de aprendizagem? </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> aprenda inglês para enviar ipad2, 45 dias de avanço </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> estuda idiomas estrangeiros e vá para a Universidade de Estudos Estrangeiros de Pequim! </a> </li>
</ul>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> Professores famosos ensinam ensaios: 3 truques inteligentes para escrever pontuações altas </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> yale menino: ensine você a se preparar para o exame SAT </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> shi qiang: ensino de idiomas profissional de ponta </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Os professores de matemática, física e química realmente lê materiais de aprendizagem? </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 【recomendado】 O método inglês de uma escola de prestígio é exposto! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> o "ponto de teste" do exame de admissão da faculdade de 2012 foi exposto !! </a> </li>
</ul>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> oito escolas famosas na Austrália </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 2012 O ranking da Universidade Mundial é liberado recentemente </a> </li>
<li> <pan> 2011-11-11 </span> <a href = "" "> Estudo em Cingapura, cursos bilíngues internacionais </a> </li>
<li> <pan> 2011-11-11 </span> <a href = "" "você pode escolher entre as famosas escolas japonesas após o exame de admissão da faculdade </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> promoção de recursos de vantagem no setor de educação e treinamento </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Defina a última exposição educacional do ano agora </a> </li>
</ul>
</div>
</div>
<!-slidetxtbox e->
</div>
</div>
<!-parbd e->
</div>
<script type = "text/javascript">
jQuery (".
jQuery ("#duploslidetxt"). slide ({titleCell: ". Parhd li", malanell: ". parbdin", efeito: "top", gatilho: "clique"});
</script>
</div>
</div>
<!-Conteúdo E->
</body>
</html>
O exposto acima é o conteúdo inteiro deste artigo, espero que gostem.