Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

SuperSlide标签切换、焦点图多种组合插件_jquery

WBOY
Release： 2016-05-16 16:09:40
Original
1718 people have browsed it

此款插件包含在SuperSlide标签切换、焦点图多种组合插件,SuperSlide 是致力于实现网站统一特效调用的函数，能解决大部分标签切换、焦点图切换等效果，还能多个slide组合创造更多的效果。（兼容ie内核(包括无敌的 ie6)、webkit内核、ff、opera等主流浏览器）。适用于网站统一插件库其中包含了网站常用的大部分js效果。文件中包含使用详解。

js调用：

复制代码 代码如下:

jQuery(".slideTxtBox").slide( {effect:"left"} );
jQuery("#doubleSlideTxt").slide( { titCell:".parHd li",mainCell:".parBdIn",effect:"top",trigger:"click" } );

css代码：

复制代码 代码如下:

/* 双重slide-文本滚动效果 */
#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:

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">>




Super Slide









 

  

     

       

        

             
  • 栏目一

    •          
  • 栏目二

    •          
  • 栏目三

    •         

       

       
       

         

           
           

            

             
            

            

             
             
             
            

           

           
           
           

            

             
            

            

             
             
             
            

           

           
           
           

            

             
            

            

             
             
             
            

           

           
         

       

       
     

     
  

 




以上就是本文的全部内容了，希望大家能够喜欢。

Related labels：
focus map
source：php.cn
Previous article：Javascript implements Sudoku solution_javascript skills Next article：Introduction to JavaScript memory management_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
1870
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
10
2033
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1711
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1613
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1626
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template