Html5+jQuery+CSS制作相册小记录


Posted in Javascript onDecember 30, 2016

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

主要功能点:

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

话不多说,先上效果图:

Html5+jQuery+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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
javascript self对象使用详解
Oct 18 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 #Javascript
bootstrap表格分页实例讲解
Dec 30 #Javascript
js中数组的常用方法小结
Dec 30 #Javascript
原生js实现可爱糖果数字时间特效
Dec 30 #Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 #Javascript
详解JS对象封装的常用方式
Dec 30 #Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 #Javascript
You might like
解析PHP缓存函数的使用说明
2013/05/10 PHP
php中的strpos使用示例
2014/02/27 PHP
php画图实例
2014/11/05 PHP
PHP编写简单的App接口
2016/08/28 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python连接Impala实现步骤解析
2020/08/04 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
最新奶茶店创业计划书
2014/01/25 职场文书
高中毕业自我评价
2014/02/08 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
煤矿安全协议书
2014/08/20 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
演讲开场白和结束语
2015/05/29 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
总结一些Java常用的加密算法
2021/06/11 Java/Android