本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录。

主要功能点：

  • Html5进行布局
  • 调用jQuery（借用官网的一句话：The Write Less, Do More）极大的简化了JavaScript编程
  • CSS 样式将表现与内容分离

效果图

话不多说，先上效果图：

核心代码

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <title>The second html page</title>

     <style type="text/css">

          ul li

         {

             list-style-type:georgian;

             text-align:left;

          }

          body

          {

            margin:10px;

            text-align:center;

            background-color:Orange;

           }

            header

         {

             height:80px;

             border:1px solid gray;

             width:99%

         }

          .left

         {

             border:1px solid gray;

             float:left;

             width:20%;

             height:520px;

             margin:0px;

             border-top-style:none;

             border-bottom-style:none;

             /*设置边框样式*/

         }

         .main

         {

             width:79%;

             float:left;

             height:520px;

             /*border:1px solid gray;*/

             border-right:1px solid gray;

             margin:0px;

             position:relative;/*设置成相对*/

         }

          footer

         {

             clear:left;

             height:60px;

             border:1px solid gray;

             width:99%

         }

         #container

         {

             display:block;

             padding:5px;

            /* border:1px solid gray;*/

             margin:5px;

             position:relative;

          }

          .small

          {

              display:block;

              border-bottom:1px solid gray;/*将缩略图，和大图隔开*/

          }

          .small img

          {

              width:150px;

              height:120px;

              margin:5px;

              border:1px solid gray;

              padding:3px;

          }

          .mm

          {

              cursor:pointer;

              border-radius:5px;/*鼠标移入样式*/

           }

          input[type="button"]

          {

              cursor:pointer;

              background-color:Orange;

              color:Lime;

              font-family:Arial;

              font-size:25px;

              height:50px;

              border:0px;

              width:50px;

              position:relative;

              top:150px;

           }

           #btnLeft

           {

            left:30px;

            float:left;

           }

            #btnRight

           {

            right:30px;

            float:right;

           }

     </style>

     <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

     <script type="text/javascript">

         $(document).ready(function () {

             //初始加载六张图片作为缩略图

             for (var i = 0; i < 6; i++) {

                 var src = "img/" + "0" + (i + 1).toString() + ".jpg";

                 var img = $("<img />").attr("id", (i + 1).toString()).attr("alt", (i + 1).toString()).attr("src", src);

                 $("#small").append(img);

             }

             //设置缩略图的点击事件，以及鼠标移入，移出事件

             $("#small img").click(function () {

                 $("#img").css("display", "none");

                 var src = $(this).attr("src");

                 var alt = $(this).attr("alt");

                 var nAlt = parseInt(alt);

                 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);

             }).mouseover(function () {

                 $(this).addClass("mm");

             }).mouseleave(function () {

                 $(this).removeClass("mm");

             });

             var delay = 1000;

             //向左切换事件

             $("#btnLeft").click(function () {

                 $("#img").css("display", "none");

                 var alt = $("#img").attr("alt");

                 if (alt == "1") {

                     alt = 7;

                 }

                 var nAlt = parseInt(alt) - 1;

                 var src = "img/" + "0" + nAlt.toString() + ".jpg";

                 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);

             });

             //向右切换事件

             $("#btnRight").click(function () {

                 $("#img").css("display", "none");

                 var alt = $("#img").attr("alt");

                 if (alt == "6") {

                     alt = 0;

                 }

                 var nAlt = parseInt(alt) + 1;

                 var src = "img/" + "0" + nAlt.toString() + ".jpg";

                 $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);

             });

         });

     </script>

 </head>

 <body>

 <header>

 <h2>Html+jQuery + CSS 相册</h2>

 </header>

 <aside class="left">

 <h3>相册说明</h3>

    <ul>

         <li><h4>准备阶段：</h4></li>

         <li>几张图片，最好大小一致，宽高比一致</li>

         <li>jQuery库文件</li>

     </ul>

     <ul>

         <li><h4>大致思路：</h4></li>

         <li>将界面分<b>上</b>，<b>中</b>（分 <b>左（20%）</b> <b>右（80%）</b>），<b>下</b> 几部分</li>

         <li>实现缩略图，依次放在一个容器中，并设置样式，时间</li>

         <li>实现左右切换的事件函数</li>

     </ul>

 </aside>

 <section class="main">

     <div class="small" id="small">

     </div>

     <div id="container">

         <input type="button" id="btnLeft" value="<<" />

         <img id="img" alt="1" src="img/01.jpg" width="650" height="350" />

         <input type="button" id="btnRight" value=">>" />

     </div>

 </section>

 <footer>

     <div>This is the footer</div>

 </footer>

 </body>

 </html>

Html 制作相册的更多相关文章

  1. 用PhotoSwipe制作相册，手势可放大

    1.引入css和js <link href="css/photoswipee.css" rel="stylesheet" type="text/ ...

  2. iOS:UICollectionView纯自定义的布局：堆叠式布局、圆式布局 (一般用来制作相册)

    集合视图的自动布局:UICollectionViewLayout是抽象根类,必须用它的子类才能创建实例,下面是重写的方法,计算item的布局属性 //每一次重新布局前,都会准备布局(苹果官方推荐使用该 ...

  3. 用node.js实现mvc相册资源管理器

    摘要:通过前两天的学习我大概学了了,用formidable模块文件上传,express框架,以及利用fs模块进行文件读取,今天我学习了如何用这些知识来制作相册,暂没有数据库,所以做的也是本地的资源管理 ...

  4. 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能

    作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...

  5. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  6. 一篇博客理解Recyclerview的使用

    从Android 5.0开始,谷歌公司推出了RecylerView控件,当看到RecylerView这个新控件的时候,大部分人会首先发出一个疑问,recylerview是什么?为什么会有recyler ...

  7. ppoint的使用

    ppt中的所有东西都要看作是 "对象" . 对 "对象"的操作逻辑是: 单击, 右键单击,双击(右键的时候, 直接就右键, 不必先选中再右键操作) 在ppt中, ...

  8. android高仿人人网

    经过几个月的努力,终于基本完成了人人API拥有的所有功能,界面采用仿照人人梦想版5.13制作,其中资源文件也采用人人的APK文件资源,完成的功能及知识点如下: 1.通过三种动画仿照出人人引导页的放大切 ...

  9. K8s 从懵圈到熟练 – 镜像拉取这件小事

    作者 | 声东 阿里云售后技术专家 导读:相比 K8s 集群的其他功能,私有镜像的自动拉取,看起来可能是比较简单的.而镜像拉取失败,大多数情况下都和权限有关.所以,在处理相关问题的时候,我们往往会轻松 ...

随机推荐

  1. 制作类似ThinkPHP框架中的PATHINFO模式功能

    一.PATHINFO功能简述 搞PHP的都知道ThinkPHP是一个免费开源的轻量级PHP框架,虽说轻量但它的功能却很强大.这也是我接触学习的第一个框架.TP框架中的URL默认模式即是PathInfo ...

  2. 【趣事】用 JavaScript 对抗 DDOS 攻击 (下)

    上一篇:http://www.cnblogs.com/index-html/p/js-network-firewall.html 对抗 v2 之前的那些奇技淫巧,纯属娱乐而已,并不能撑多久. 但简单. ...

  3. RPC 使用中的一些注意点

    最近线上碰到一点小问题,分析其原因发现是出在对 RPC 使用上的一些细节掌握不够清晰导致.很多时候我们做业务开发会把 RPC 当作黑盒机制来使用,但若不对黑盒的工作原理有个基本掌握,也容易犯一些误用的 ...

  4. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  5. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  6. Mysql - 查询之关联查询

    查询这块是重中之重, 关系到系统反应时间. 项目做到后期, 都是要做性能测试和性能优化的, 优化的时候, 数据库这块是一个大头. sql格式: select 列名/* from 表名 where 条件 ...

  7. 我的公司培训讲义（1）：.NET开发规范教程

    这是1年多以前我在公司所做讲座的讲义,现在与园友们分享,欢迎拿去使用.一起讨论.文中有若干思考题,对园友们是小菜一碟.另有设计模式讲义一篇,随后发布.博文上了首页,感谢博客园团队推荐,也感谢所有园友的 ...

  8. 快速Android开发系列网络篇之Android-Async-Http

    先来看一下最基本的用法 AsyncHttpClient client = new AsyncHttpClient(); client.get("http://www.google.com&q ...

  9. Binder In Native

    关于Binder的设计思想与Driver层实现细节可以看这个:Android Binder设计与实现 - 设计篇,这里首先简要概括一下. Service的每个Binder实体位于Service所属的进 ...

  10. CocoaPods被卡住:Updating local specs repositories

    使用CocoaPods被卡住:Updating local specs repositories 使用 pod install --verbose --no-repo-update