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 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
js中的this关键字详解
Sep 25 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
微信小程序删除处理详解
Aug 16 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
Vue实现下拉加载更多
May 09 Vue.js
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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
JavaScript函数详解
2015/02/27 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
JS设计模式之单例模式(一)
2017/09/29 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
JS随机密码生成算法
2019/09/23 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
windows下python之mysqldb模块安装方法
2017/09/07 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
Python爬虫与反爬虫大战
2020/07/30 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
工程力学硕士生的自我评价范文
2013/11/16 职场文书
草船借箭教学反思
2014/02/03 职场文书
三万活动总结
2014/04/28 职场文书
区级文明单位申报材料
2014/05/15 职场文书
公司节能减排方案
2014/05/16 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书