通过js实现图片与文字的转换

最新推荐文章于 2024-07-09 18:00:27 发布

冯浩(grow up)

最新推荐文章于 2024-07-09 18:00:27 发布

阅读量2.4k

点赞数 1

文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/m0_50207524/article/details/108109430

版权

html部分

<ul>
    <!--onclick="showPic(this); return false;":因为onclick时间处理函数所触发的js代码返回给他的值是false,所以a链接不会跳转-->
    <li><a href="1/1.jpg"  onclick="showPic(this); return false;" title="我好不好看">我是一只小猫咪</a></li>
    <li><a href="2/1.jpg"  onclick="showPic(this); return false;"  title="不认识我了">吓你一跳</a></li>
    <li><a href="3/1.jpg"  onclick="showPic(this); return false;"  title="没见过吧">这样的瀑布见过吗</a></li>
</ul>
<img id='placeholder' src="1/1.jpg" alt="my image gallery">
<p id ='description'>45码的鞋子在你脸边徘徊</p>

js部分

function showPic(whichpic){
    // whichpic:代表一个节点
    // getAttribute:把href的路径作为参数存储到sourcr
    var sourcr = whichpic.getAttribute("href");
    // 获取idplaceholder
    var placeholder=document.getElementById('placeholder');
    // 使用setAttribute对placeholder元素的src属性进行刷新
    // 将图片的路径刷新
    placeholder.setAttribute("src",sourcr);
    // 更新描述
    var text = whichpic.getAttribute('title');
    // 获取id 为description的值
    var description = document.getElementById("description");
    // 测试是否可以获得数据
    // firstChild:返回节点的第一个子节点
    // nodeValue:得到第一个节点的值
    // console.log(description.firstChild.nodeValue);

    // 将text赋值给description，是description达到点击之后改变的效果
    description.firstChild.nodeValue =text;
}

css部分

    body{
        color:#333;
        background-color:#ccc;
        margin:1em 10%;
    }

    h1{
        color:#333;
        background-color:transparent;
    }
    a{
        color:#c60;
        background-color:transparent;
        font-weight:bold;
        text-decoration:none;
    }

    ul{
        padding:0;
    }

    li{
        float:left;
        padding:1em;
        list-style:none;
    }

    img{
        display: block;
        clear:both;
        width:400px;
        height:400px;
    }