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添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
JavaScript实现简单计时器
Jun 22 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
第十三节--对象串行化
2006/11/16 PHP
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
js Calender控件使用详解
2015/01/05 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
护士辞职信模板
2014/01/20 职场文书
女生节标语
2014/06/26 职场文书
展览会邀请函
2015/02/02 职场文书
教师教育心得体会
2016/01/19 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
python scrapy简单模拟登录的代码分析
2021/07/21 Python
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python