zoukankan      html  css  js  c++  java
  • 点击在本页更换图片

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>演示案例</title>
    </head>
    <style type="text/css">
    #placeholder{
    300px;
    height: 400px;
    }
    </style>
    <body>
    <div>
    <ul>

    <li>
    <a href="../image/dc8d53ddly1fjsk6vwtq0j20ku0rsn26.jpg" onclick="showpic(this); return false;">图片1</a>
    </li>
    <li>
    <a href="../image/dc8d53ddly1fqel2e5pjxj22c0340x6p.jpg" onclick="showpic(this); return false;">图片2</a>
    </li>
    <li>
    <a href="../image/dc8d53ddly1fqw71tzljrj20qo10545h.jpg" onclick="showpic(this); return false;">图片3</a>
    </li>
    <img src="../image/dc8d53ddly1fqw71tzljrj20qo10545h.jpg" id="placeholder">
    </ul>
    </div>

    </body>
    <script type="text/javascript">

    function showpic(whichpic){
    var source = whichpic.getAttribute("href");//getAttribute() 方法返回指定属性名的属性值。
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    //setAttribute() 方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置/更改值。
    }


    </script>
    </html>

    //方法2

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>演示案例</title>
    </head>
    <style type="text/css">
    #placeholder{
    300px;
    height: 400px;
    }
    </style>
    <body>
    <div>
    <ul>
    <li onclick="showpic(this,'../image/dc8d53ddly1fjsk6vwtq0j20ku0rsn26.jpg')">
    <span >图片1</span>
    </li>
    <li onclick="showpic(this,'../image/dc8d53ddly1fqel2e5pjxj22c0340x6p.jpg')">
    <a >图片2</a>
    </li>
    <li onclick="showpic(this,'../image/dc8d53ddly1fqw71tzljrj20qo10545h.jpg')">
    <a >图片3</a>
    </li>
    <img src="../image/dc8d53ddly1fqw71tzljrj20qo10545h.jpg" id="placeholder">
    </ul>
    </div>

    </body>
    <script type="text/javascript">

    function showpic(whichpic,imgurl){
    // alert(123);
    document.getElementById("placeholder").src=imgurl;

    }


    </script>
    </html>

  • 相关阅读:
    利用DllPlugin性能优化
    Shimming 的作用
    用webpackPrefetch:true提升性能
    webpack打包分析学习笔记
    分块打包学习笔记
    tree shaking学习笔记
    Map与实体类相互转换
    项目可以run但不能debug
    jeecg-boot框架默认create_time Desc去掉
    List<实体类>根据多个字段去重
  • 原文地址:https://www.cnblogs.com/lsongyang/p/9765996.html
Copyright © 2011-2022 走看看