js--HTML美术馆 我就是我 2021-09-27 03:50 197阅读 0赞 # 前言 # 因为之前库房合作的时候交给我一个任务,就是在点击某一项物品的时候显示出几张相印的小图片,然后点击小图片之后显示出一张大图片,因为当时还没有接触JavaScript,所以这方面的知识不是很了解,一直拖着,大概有两天吧,是在是解决不了,于是将这个任务交给了老付和建华,今天在学习JavaScript的时候突然之后就看到了有这么一项功能,于是就有感而发。 # 内容 # 首先向大家展示代码。 **这部分是HTML的代码:** <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>美术馆</title> <script type="text/javascript" src="script.js"></script> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <!--只需要一个图片的列表--> <ul id="navigator"> <li><a href="./img/01.jpg" title="01"><img src="small_img/01.jpg" /></a></li> <li><a href="./img/02.jpg" title="02"><img src="small_img/02.jpg" /></a></li> <li><a href="./img/03.jpg" title="03"><img src="small_img/03.jpg" /></a></li> <li><a href="./img/04.jpg" title="04"><img src="small_img/04.jpg" /></a></li> <li><a href="./img/05.jpg" title="05"><img src="small_img/05.jpg" /></a></li> <li><a href="./img/06.jpg" title="06"><img src="small_img/06.jpg" /></a></li> <li><a href="./img/07.jpg" title="07"><img src="small_img/07.jpg" /></a></li> <li><a href="./img/08.jpg" title="08"><img src="small_img/08.jpg" /></a></li> <li><a href="./img/09.jpg" title="09"><img src="small_img/09.jpg" /></a></li> <li><a href="./img/10.jpg" title="10"><img src="small_img/10.jpg" /></a></li> <li><a href="./img/11.jpg" title="11"><img src="small_img/11.jpg" /></a></li> <li><a href="./img/12.jpg" title="12"><img src="small_img/12.jpg" /></a></li> <li><a href="./img/13.jpg" title="13"><img src="small_img/13.jpg" /></a></li> </ul> </body> </html> **这部分是Script.js中的代码:** var c = function (tag) { return document.createElement(tag); }; var gets = function (tag, pNode) { pNode = pNode || document; return pNode.getElementsByTagName(tag); }; //建立函数,获取让图片在页面中指定位置显示,而不需要刷新整个页面 var get = function (id) { return document.getElementById(id); } onload = function () { //创建节点 //创建div节点去除浮动 var div = c("div"); div.className = "clear"; var body = gets("body")[0]; body.appendChild(div); //创建容器div var divContainer = c("div"); divContainer.className = "center"; divContainer.style.textAlign = "center"; //创建图片节点 var img = c("img"); img.src = "./img/face.JPG"; divContainer.appendChild(img) //创建文本节点 var p = c("p"); p.innerHTML = "请选择图片"; divContainer.appendChild(p); body.appendChild(divContainer); //添加事件 var links = gets("a", get("navigator")) for (var i = 0; i < links.length; i++) { //links[i].onclick = function () { links[i].onmouseover = function () { //a标签就是this var txt = this.title; var url = this.href; p.innerHTML = txt; img.src = url; return false; } } } **这部分是css中的代码** #navigator li{ float:left; list-style-type:none; margin-right:3px; } #navigator{ width:700px; margin:0 auto; } .clear{ clear:both; } .center{ width:700px; margin:0 auto; } 在敲css的时候,视频中给出的\#navigator和.center并列,即将如上的代码写成如下方式: #navigator li{ float:left; list-style-type:none; margin-right:3px; } #navigator .center{ width:700px; margin:0 auto; } .clear{ clear:both; } 我照着这样做的时候发现不能正常运行,即css样式无法成功写入到html中去,所以我取消的并列的样式,而是分开写入。 **运行的结果如下:** ![这里写图片描述][70] 因为我在js中使用了onmouseover属性,所以在鼠标移动到小图上的时候图片自动放大。 [70]: /images/20210923/08d754389fa7401ab64ddf94781b9f1b.png
相关 javascript 美术馆--改进1 1. 实现点击会在本页显示图片的代码分离 window.onload=prepareGallery;//每个事件处理函数只能绑定一条指令 function p 偏执的太偏执、/ 2022年08月20日 15:15/ 0 赞/ 142 阅读
相关 javascript 美术馆 1. childNodes属性 从给定的节点树把任何一个元素的所有子元素检索出来,返回一个数组 function countBodyChildren(){ 比眉伴天荒/ 2022年08月20日 15:11/ 0 赞/ 107 阅读
相关 javaScript DOM编程艺术的美术馆效果(getAttribute、setAttribute、childNodes属性、 nodeType简单运用)、属性包含特性 源码: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p 淡淡的烟草味﹌/ 2022年03月12日 13:51/ 0 赞/ 145 阅读
相关 js--HTML美术馆 前言 因为之前库房合作的时候交给我一个任务,就是在点击某一项物品的时候显示出几张相印的小图片,然后点击小图片之后显示出一张大图片,因为当时还没有接触JavaScript, 我就是我/ 2021年09月27日 03:50/ 0 赞/ 198 阅读
还没有评论,来说两句吧...