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代码编写的14条技巧
Jan 09 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
JavaScript Date对象详解
Mar 01 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 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
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php字符串操作常见问题小结
2016/10/11 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Django Highcharts制作图表
2016/08/27 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python多进程并发demo实例解析
2019/12/13 Python
python类中super() 的使用解析
2019/12/19 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
老师自我鉴定范文
2013/12/25 职场文书
《口技》教学反思
2014/02/21 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
海弦WR-800F
2022/04/05 无线电
python多次执行绘制条形图
2022/04/20 Python