javaScript鼠标事件实现图片转换和换肤

最新推荐文章于 2019-06-05 17:17:11 发布

Z_唐

最新推荐文章于 2019-06-05 17:17:11 发布

阅读量318

点赞数

分类专栏： javaScript 文章标签： javascript 鼠标

本文链接：https://blog.csdn.net/xmz1996/article/details/78099639

版权

javaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写图片描述

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

    <script>

        function changeColor(str){
            var body=document.getElementById("b");
            body.style.backgroundColor=str;
        }

        function xiao(){
            var x=document.getElementById("tp");
            x.src="img/1.jpg";
        }

        function gaog(){
            var g=document.getElementById("tp");
            g.src="img/2.gif";
        }

    </script>

    <style>
        #b{
            background-color:rosybrown;
        }

        img{
            display: block;
            width: 300px;
            height:400px ;
        }
        img:hover{
            cursor: pointer;
        }
    </style>



</head>
<body id="b">
    <button type="button" onclick="changeColor('seagreen')">海绿色</button>
    <button onclick="changeColor('coral')">珊瑚色 </button>
    <button onclick="changeColor('maroon')">橄榄色</button>
    <div onmouseover="gaog()" onmouseout="xiao()">

    <img id="tp" src="img/1.jpg" style="float: left;"/>
    </div>
</body>
</html>