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 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
使用js 设置url参数
Jul 08 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 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
全国中波电台频率表
2020/03/11 无线电
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现发送和获取手机短信验证码
2016/01/15 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
python实现猜数字游戏
2020/03/25 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
2014年销售经理工作总结
2014/12/01 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
Spring 使用注解开发
2022/05/20 Java/Android