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升级新版本后选择器的语法问题
Jun 02 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 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数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
js跳转页面方法总结
2014/01/29 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
浅谈Vue 初始化性能优化
2017/08/31 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python合并字符串的3种方法
2015/05/21 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
如何利用python进行时间序列分析
2020/08/04 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
网络工程专业毕业生推荐信
2013/10/28 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
党委班子对照检查材料
2014/08/19 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle