本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录。
主要功能点:
Html5进行布局
调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化了JavaScript编程
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>
更多Html 制作相册相关文章请关注PHP中文网!

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

WebStorm Mac版
好用的JavaScript开发工具

SublimeText3 Linux新版
SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

SublimeText3 英文版
推荐:为Win版本,支持代码提示!