1顶

当前窗口横向翻页切换显示特效

稿源：互联网 2022-04-02 21:40:51 点击： 2430 撤稿纠错

当前窗口横向翻页切换显示特效，点击页面编号立即切换显示。

以下讨论的是和翻页相关的当前窗口横向翻页切换显示特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>网页特效 个性横向滚动翻页切换特效 站长特效网</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
body {
    background: #222;
    font-size: 12px;
    letter-spacing: 1px;
    width: 12000px;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
}
h2.zzjs_net {
 font-family: normal Georgia,'Times New Roman',Times,serif;
 font-weight: normal;
 font-size: 4em;
 margin: 0;
 padding: 50px 0 20px 50px;
 color: #AAA;
}
h2.zzjs_net span {
 font-family: normal Georgia,'Times New Roman',Times,serif;
 color: #f9f66d;
 font-size: 0.9em;
}
h2.zzjs_net small {
 color: #555;
 display: block;
 font-family: normal Verdana,Arial,Helvetica,sans-serif;
 font-size: 0.2em;
 letter-spacing: 1.0em;
 text-transform: uppercase;
 padding-left: 5px;
}
/* CONTAINER */
.section {
 width: 4000px;
    margin: 0px;
    bottom: 0px;
    float: left;
    height: 100%;
 font-size: 26px;
}
.section h2 {
    margin:50px 0px 30px 50px;
}
.section p {
 width: 950px;
    margin: 20px 0px 0px 50px;
}
.section p.link {
 font-size: 0.78em;
}
.section p.link a {
 color: #3FA4E6;
}
.section p.link a:hover {
 color: #2c709c;
 text-decoration: none;
}
.black {
    color: #AAA;
    background: #000;
}
.white {
    color: #333;
    background: #fff;
}
.yellow {
    color: #333;
    background: #f9f66d;
}
.section ul{
    list-style: none;
    margin: 20px 0px 0px 550px;
}
.black ul li{
    float: left;
    padding: 5px;
    margin: 5px;
    color: #777;
 font-size: 1.2em;
}
.black ul li a{
    display: block;
    color: #DDD;
 padding: 0 8px;
}
.black ul li a:hover{
    text-decoration: none;
    color: #AAA;
}
.white ul li{
    float: left;
    padding: 5px;
    margin: 5px;
    color: #777;
 font-size: 1.2em;
}
.white ul li a{
    display: block;
    color: #222;
}
.white ul li a:hover{
    text-decoration: none;
    color: #000;
}
.yellow ul li{
    float: left;
    padding: 5px;
    margin: 5px;
    color: #777;
 font-size: 1.2em;
}
.yellow ul li a{
    display: block;
    color: #222;
}
.yellow ul li a:hover{
    text-decoration: none;
    color: #000;
}
</style>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
<script type="text/javascript" src="http://www.zzjs.net/img/jquery.easing.1.3.js"></script>
<script type="text/javascript">
 $(function() {
  $('ul.nav a').bind('click',function(event){
   var $anchor = $(this);
   /*
   if you want to use one of the easing effects:
   $('html, body').stop().animate({
    scrollLeft: $($anchor.attr('href')).offset().left
   }, 1500,'easeInOutExpo');
    */
   $('html, body').stop().animate({
    scrollLeft: $($anchor.attr('href')).offset().left
   }, 1000);
   event.preventDefault();
  });
 });//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<div id="wrap">
    <div id="container-wrap">
    <h2 class="zzjs_net">站长特效网 - 需要加载js文件，请刷新后看效果。</h2>
        <div class="section black" id="section1">
            <h2>站长特效网第一页</h2>
            <p>站长特效网，高质量网页特效代码，广告代码，js特效代码网站！以质量为核心，以实用为目的，<a href="http://zzjs.net">打造一流网页特效站！</a></p>
            <ul class="nav">
                <li>1</li>
                <li><a href="#section2">2</a></li>
                <li><a href="#section3">3</a></li>
            </ul>
        </div>
        <div class="section white" id="section2">
            <h2>站长特效网第二页</h2>
            <p>站长特效网，高质量网页特效代码，广告代码，js特效代码网站！以质量为核心，以实用为目的，<a href="http://zzjs.net">打造一流网页特效站！</a></p>
            <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li>2</li>
                <li><a href="#section3">3</a></li>
            </ul>
        </div>
        <div class="section yellow" id="section3">
            <h2>站长特效网第三页</h2>
            <p>站长特效网，高质量网页特效代码，广告代码，js特效代码网站！以质量为核心，以实用为目的，<a href="http://zzjs.net">打造一流网页特效站！</a> </p>
            <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li><a href="#section2">2</a></li>
                <li>3</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

关于当前窗口横向翻页切换显示特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010123066676.shtml方便下次再访问哦。

·上一篇： 仿google首页图层拖动排序效果
·下一篇： 当前窗口纵向翻页切换显示特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

当前窗口横向翻页切换显示特效

文章分类LIST >>返回首页

最新游戏

最新新闻