科技企业网站(6) - 图书开发页面设计

最新推荐文章于 2022-12-05 13:00:00 发布

UIEngineer

最新推荐文章于 2022-12-05 13:00:00 发布

阅读量350

点赞数 1

分类专栏： Thinkphp+mysql实现企业网站

Thinkphp+mysql实现企业网站专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、图书开发模块实现过程
1.图片平滑滚动效果关键代码：

<!-- 设置图片初始向左滚动并且每隔200毫秒滚动1个像素距离 -->
<img src="../Public/Images/JavaII.jpg" width="140px" height="174px" />
<img src="../Public/Images/JavaPP.jpg" width="140px" height="174px" />
。。。。。。。。。。。。。。。。。。。。

2.二级导航菜单
实现二级标题需要大量的CSS+DIV定位技术的支持。首先来看页面的HTML代码：

<div id="totle">
    <ul>
        <!-- 指定跳转当前模块的URL -->
        <li><a href="__URL__">网站首页</a></li>
        <li><a class="liA" href="#">Java</a></li>
        <!-- 设置二级标题模块 -->
        <div class="totleDiv">
            <!-- 二级标题由后台交互取得 -->
            <volist name="Java" id="javaContent">
                <span id="span">
                    <a href="__URL__/dev/id/{$javaContent.id}">
                        {$javaContent.new_book}
                    </a>
                </span><br />
            </volist>
        </div>
        <li>
            <a class="liA" href="#">C#</a>
        </li>
        <div class="totleDiv">
            <volist name="C" id="Content">
                <span id="span">
                    <a href="__URL__/dev/id/{$Content.id}">
                        {$Content.new_book}
                    </a>
                </span><br />
            </volist>
        </div>
        <li>
            <a class="liA" href="#">PHP</a>
        </li>
        <div class="totleDiv">
            <volist name="PHP" id="phpContent">
                <span id="span">
                    <a href="__URL__/dev/id/{$phpContent.id}">
                        {$phpContent.new_book}
                    </a>
                </span><br />
            </volist>
        </div>
    </ul>
</div>

这里需要注意的是标签的链接路径。比如如下代码：

<a href="__URL__/dev/id/{$javaContent.id}">{$javaContent.new_book}</a>

参数说明如下：
URL:指定当前模块的URL
dev:指定控制器类中的方法
id:传递的参数名称
{$javaContent.id}:由控制器传递进来的参数值

CSS代码如下：

/*
            totle指定一级菜单栏风格
            引入背景图片
            设置定位方式为相对定位
        */
        #totle{
            /*background-image:url(../Image/titlePic.jpg);*/
            background-color: #ccc;
            position: relative;
            width: 800px;
            height: 20px;
            margin-top: -18px;
        }

        /* 定义列表风格的标签 */
        ul{
            list-style: none;
        }
        li{
            float: left;
            padding-left: 100px;
        }
        li a{
            letter-spacing: 2px;
        }
        /* 定义a链接标签的样式风格 */
        a:link{color: white;}
        a:link{color: white;}
        a:visited{color: white;}
        a:action{color: white;}
        a{font-size: 12px;text-decoration: none;}
        /*
            指定定位方式为绝对定位，这是得以实现二级标题的主要元素
            Display属性定义模块是否可见，决定模块是否可见交由jQuery代码来完成 
         */
         .totleDiv{
             position: absolute;
             margin-top: 20px;
             width: 100px;
             display: none;
         }

jQuery代码如下：

 $(function(){
            // 选择类名为liA的标签，当用户单击此标签时触发事件
            $(".liA").toggle(function(){
                $(this).next().show("slow");            // 此标签下的下一个子标签显示
            });
        },function(){
            $(".totleDiv").hide();          // 类名为totleDiv的模块隐藏
        });

3.单行标题滚动
这里写图片描述
制作这种动画的原理是：每行文字按指定的像素值向上移动，移出到边框外侧的文本内容，随即便会被擦除，然后被擦除的那部份信息会在DOM树最下端被添加。HTML页面数据信息的代码如下：
develop.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

  </head>
  <body>

    <div id="content">
        <div class="left">
            <div class="leftSpan">新闻热点</div>
            <div class="leftSpanDiv">
                <ul>
                    <volist name="content" id="ContentType">
                        <li>
                            &nbsp;&nbsp;
                            <a href='__URL__/lord/id/{$ContentType.id}'>
                                {$ContentType.content|msubstr=0,12}...
                            </a>
                        </li>
                    </volist>
                </ul>
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

  </body>
</html>

定义双层

标记用于定位标题滚动模块的位置。然后利用ThinkPHP与后台进行交互，动态地获取文本信息。这个过程是在控制器中的develop方法实现的。利用标签对，对数据库信息进行循环输出。其控制器develop方法的代码如下：

public function develop(){
        $Java = D('Book');          // 实例化模型类
        // 获取二级标题所需要的文本
        $Java = $Java->field('id,new_book')->where('tid=1')->select();
        // print_r($Java);
        $PHP = D('Book');
        $PHP = $PHP->field('id,new_book')->where('tid=3')->select();
        // print_r($PHP);
        $C = D('Book');
        $C = $C->field('id,new_book')->where('tid=2')->select();
        // print_r($C);
        $content = D('News');
        // 设定每次单行文本轮转的条数
        $content = $content->field('id,content')->order('id desc')->limit(9)->select();
        // print_r($content);

        // 向模板中传递变量
        $this->assign('content',$content);
        $this->assign('Java',$Java);
        $this->assign('C',$C);
        $this->assign('PHP',$PHP);
        $this->display();               //指向模板文件
    }

一切准备完毕后，就可以着手编写jQuery代码了。此处会同样用到JavaScript的定时器方法，指定每隔多少毫秒滚动一次。核心jQuery代码如下：

  <script>
        // 每个2000毫秒调用一次AutoScroll方法
        setInterval('AutoScroll(".leftSpanDiv")',2000);

        // 自定义方法
        function AutoScroll(obj){
            // 找到ul标签的第一个执行动画，文本向上移动25个像素
            $(obj).find("ul:first").animate({marginTop:"-25px"},500,function(){
                // 将执行动画的文本添加到DOM树最下端
                // console.log(this);
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
            });
        }
    </script>

4.收缩的展示效果,jQuery关键代码如下：

<script type="text/javascript">
    // 设置类名称为ex的标签中下标大于0的全部隐藏
    $(".ex:gt(0)").hide();

    // 当地一个按钮被单击时
    $(".bottomSpan:first").click(function(){
        // 显示第一个文本内容
        $(".ex:first").show(1500);
        // 不是第一个的文本隐藏
        $(".ex:not(:first)").hide();
    });

    $(".bottomSpan:eq(1)").click(function(){
        $(".ex:eq(1)").show(1500);
        $(".ex:not(:eq(1))").hide();
    });

    $(".bottomSpan:last").click(function(){
        $(".ex:last").show(1500);
        $(".ex:not(:last)").hide();
    });
</script>

UIEngineer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
科技企业网站(6) - 图书开发页面设计

一、图书开发模块实现过程 1.图片平滑滚动效果关键代码：<img src="../Public/Images/JavaII.jpg" width="140px" height="174px" /><img src="../Public/Images/JavaPP.jpg" width="140px" height=
复制链接

扫一扫

专栏目录