本文主要讲述采用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. Linux CentOS 配置JDK环境

    一.下载JDK 下载JDK的方式有两种: 1.Linux中使用wget下载 1.使用命令安装wget yum install wget 2.下载 wget 'http://download.oracl ...

  2. 《Django By Example》第一章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...

  3. 如何进行python性能分析？

    在分析python代码性能瓶颈,但又不想修改源代码的时候,ipython shell以及第三方库提供了很多扩展工具,可以不用在代码里面加上统计性能的装饰器,也能很方便直观的分析代码性能.下面以我自己实 ...

  4. jQuery学习之路（3）- 事件

    ▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...

  5. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之目录导航

    ASP.NET MVC with Entity Framework and CSS是2016年出版的一本比较新的.关于ASP.NET MVC.EF以及CSS技术的图书,我将尝试着翻译本书以供日后查阅. ...

  6. MFC中如何画带实心箭头的直线

    工作中遇到话流程图的项目,需要画带箭头的直线,经过摸索,解决:思路如下: (1) 两个点(p1,p2)确定一个直线,以直线的一个端点(假设p2)为原点,设定一个角度 (2)以P2为原点得到向量P2P1 ...

  7. html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...

  8. [转载]强制不使用“兼容性视图”的HTML代码

    在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介 ...

  9. linux拷贝命令，移动命令

    http://blog.sina.com.cn/s/blog_7479f7990101089d.html

  10. 微信小程序体验(1)：携程酒店机票火车票

    在 12 月 28 日微信公开课上,张小龙对微信小程序的形态进行了阐释,小程序有四个特定:无需安装.触手可及.用完即走.无需卸载. 由于携程这种订酒店.火车票和机票等工具性质非常强的服务,非常符合张小 ...