《JavaScript+DOM变成艺术》的摘要（三）---图片库实例

浏览数：20 / 时间：2015年06月08日 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片库</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,user-scalable=no">
<style type="text/css">
    
</style>
</head>
<body>
    <h1 style="text-align:center;">图片库的实现</h1>
    <div>
        <ul id="imgs">
            <li><a  href="img/img1.png" >一世繁华</a></li>
            <li><a  href="img/img2.png" >大好河山</a></li>
            <li><a  href="img/img3.png" >青春.女人</a></li>
        </ul>
        <img id="placeholder" src="img/img4.png" />
    </div>
    <script type="text/javascript">
    function showPic(whichPic){
        var source = whichPic.getAttribute(‘href‘);
        var placeholder = document.getElementById(‘placeholder‘);
        placeholder.src = source;

    }
    var imgs = document.getElementById(‘imgs‘).getElementsByTagName(‘a‘);
    for ( var i = 0; i < imgs.length; i++ ) {
        imgs[i].onclick=function (e){
            if ( e && e.preventDefault ){  
                e.preventDefault();  
            }else{  
                window.event.returnValue = false;  
            }  
            showPic(this);

        }

    }
    </script>
</body>
</html>

这是最基本的图片切换，对于我，唯一的重点就是阻止默认行为的应用

《JavaScript+DOM变成艺术》的摘要（三）---图片库实例,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 编程语言 Java C C# Javascript js Python Ruby Spring 程序 VB

相关文章

随机文章

您可能还喜欢

您可能还喜欢