javascript 美术库改进2

桃扇骨 2022-08-20 15:23 217阅读 0赞

1.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Image Gallery</title>
    <script type="text/javascript" src="showPic.js"></script>
    <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen">
    </head>
    <body>
    <h1>Snapshots</h1>
    <ul id="imagegallery">
        <li><a href="image/1.jpg" title="a fireworks display"><img src="1.jpg" alt="1" />    </a>//鼠标点击时，不在另一个页面显示，而是在显示区域显示。点击返回false，则不会跳转
        </li>
        <li><a href="image/2.png" title="a cup of black coffee"><img src="2.jpg" alt="2" />  </a>
        </li>
        <li><a href="image/3.png" title="a red rose"><img src="3.jpg" alt="3" />  </a>
        </li>
        <li><a href="image/4.png" title="the famous clock"><img src="4.jpg" alt=4" />  </a>
        </li>
    
    </ul>
    </body>
    </html>

2.css代码

/* CSS Document */
    body{ font-family:Arial, Helvetica, sans-serif; color:#00CCCC; background-color:#CC3300; margin:1em 10%; }
    h1{ color:#CC3366; background-color:#CCCC99; }
    a{ color:#CCCC99; background-color:#3366FF; font-weight:bold; text-decoration:none; }
    ul{ padding:0; }
    li{ float:left; padding:1em; list-style:none; }/* CSS Document */

3.javascript代码

function addLoadEvent(func){ 
        var oldonload=window.onload;
        if(typeof window.onload!='function'){
            window.onload=func;
            }else{
                window.onload=function(){ 
                    oldonload();
                    func();
                    }
                }
        }
    function insertAfter(newElement,targetElement){ 
        var parent=targrtElement.parentNode;
        if(parent.lastChild==targrtElement){
            parent.appendChild(newElement);//如果目标元素是最后一个元素，直接把新元素放到parent上
            }else{
                parent.insertBefore(newElement,targetElement.nextSilbing);//否则插入到目标下一个元素之前
                }
        }
    function preparePlaceholder(){ 
    
        if (!document.createElement) return false;
        if(!document.createTextNode)  return false;
        if(!document.getElementById) return false;
        if(!document.getElementById("imagegallery"))  return false;
        var placeholder=docunmet.createElement("img");
        placeholder.setAttribute("id","placeholder");
        placeholder.setAttribute("src","placeholder.gif");
        placeholder.setAttribute("alt","my image gallery");
        var description=document.createElement("p");
        description.setAttribute("id","description");
        var desctext=document.createTextNode("Choose an image");
        description.appendChild(desctext);
        var gallery=document.getElementById("imagegallery");
        insertAfter(placeholder,gallery);
        insertAfter(description,placeholder);
        }
    
    function prepareGallery(){ 
    
        if (!document.getElementByTagName) return false;    
        if(!document.getElementById) return false;
        if(!document.getElementById("imagegallery"))  return false;
        var gallery=docunmet.createElement("imagegallery");
        var links=gallery.getElementByTagName("a");
        for(var i=0;i<links.length;i++){
            links[i].onclick=function(){ 
                return showPic(this);
                }
                links[i].onkeypress=links[i].onclick;
            }
    }
    
    
    function showPic(whichpic) {   if(!document.getElementById("placeholder"))  return true;
        var source=whichpic.getAttribute("href");//首先检索到图片的地址
        var placeholder=document.getElementById("placeholder");//找到被替换图片的位置
        placeholder.setAttribute("src",source);//替换 另一种方法 placeholder.src=source;
        if(!document.getElementById("description")) return false;
        if(whichpic.getAttribute("title")){
    
            var text=whichpic.getAttribute("title");
            }else{
                var text=" ";
                }
            var description=document.getElementById("description");
            if(description.firstChild.nodeType==3){
                description.firstChild.nodeValue=text;
                }
                return false;
    }
    addLoadEvent(preparePlaceholder);
    addLoadEvent(prepareGallery);

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关【技术美术图形部分】纹理基础2.0-凹凸映射

目录凹凸贴图/映射 bump mapping 概念 What——通过纹理的方法产生表面凹凸不平的视觉效果 Why——假装视觉效果，可以节省性能 How——高度贴图/法

曾经终败给现在/ 2023年09月28日 22:02/ 0 赞/ 31 阅读

相关【技术美术图形部分】2.3 HLSL常用函数

——介绍HLSL常用函数，API的使用。想要成为合格的技术美术，一定要具备Shader开发能力，满足性能的需求，无论是技术美术的哪一个方向，HLSL都是需要点满的技能点。

港控/mmm°/ 2023年09月27日 09:27/ 0 赞/ 227 阅读

相关【技术美术图形部分】2.2 模型与材质基础

记录之前膜拜一下这节课的大佬，才大三，我一个研二菜狗留下不学无术的泪水！ May佬提到，这次课程安排的目的是给美术同学一个缓冲的空间，我的话在写这篇学习笔记就尽量加入一些自己的

墨蓝/ 2023年09月27日 08:58/ 0 赞/ 249 阅读

相关【技术美术图形部分】2.1 色彩空间

学习地址 [【技术美术百人计划】图形 2.1 色彩空间介绍][2.1] 补充学习地址 [【技术美术百人计划】图形 2.1 色彩空间补充内容\_哔哩哔哩\_bilibili

心已赠人/ 2023年09月27日 08:37/ 0 赞/ 271 阅读

相关【技术美术美术部分】AO贴图的烘焙及应用

写在前面计划完整学习AO相关，先从最直观的美术角度看看AO贴图如何烘焙及应用的，我觉得能更好的帮助我学习和理解，因此美术向的学习排在了图形学算法学习的前面。文中图片都是直接

àì夳堔傛蜴生んèń/ 2023年09月23日 23:59/ 0 赞/ 184 阅读

相关【技术美术美术部分】3A 次世代游戏 PBR资源生产流程

作为小插曲简单记录一下，内容也不复杂。 1 3A？（其实我觉得专门开个小节说3A实在有点蠢...，但没事！反正想到啥记录啥了） 3A这个概念其实是个美式概念，AAA

迈不过友情╰/ 2023年09月23日 23:25/ 0 赞/ 246 阅读

相关 javascript 美术库改进2

1.html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

桃扇骨/ 2022年08月20日 15:23/ 0 赞/ 218 阅读

相关 javascript 美术馆--改进1

1．实现点击会在本页显示图片的代码分离 window.onload=prepareGallery;//每个事件处理函数只能绑定一条指令 function p

偏执的太偏执、/ 2022年08月20日 15:15/ 0 赞/ 250 阅读

相关美术规范

• 单位比例 • 建模规范 • 材质贴图规范 • 命名规范 • 模型导出单位比例 • 在没有特殊要求的情况下，单位为米（Meters），如图所示。

「爱情、让人受尽委屈。」/ 2022年04月08日 12:26/ 0 赞/ 344 阅读

相关【DOM编程艺术】图片库再次改进

图片库中一个图片和一段文字仅仅是为showpic脚本服务的。若能把结构和行为彻底分开那最好不过了。既然这些元素的存在只是为了让DOM方法处理它们，那么用DOM

╰+哭是因爲堅強的太久メ/ 2022年01月06日 06:19/ 0 赞/ 365 阅读