- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html" charset="utf-8">
- <title>小游戏</title>
- <script type="text/javascript">
- var num=1;
- function fun(){
- if (num==1){
- fun2();
- num=2;
- }
- else if(num==2){
- fun3();
- num=3;
- }
- else if(num==3){
- fun4();
- num=4;
- }
- else if(num==4){
- fun1();
- num=1;
- }
- }
- function fun1(){
- document.getElementById('d1').style.left=0+"%";
- document.getElementById('d1').style.right=88+"%";
- document.getElementById('d1').style.top=0+"%";
- document.getElementById('d1').style.bottom=76+"%";
- }
- function fun2()
- {
- document.getElementById('d1').style.left=88+"%";
- document.getElementById('d1').style.right=0+"%";
- document.getElementById('d1').style.top=0+"%";
- document.getElementById('d1').style.bottom=76+"%";
- }
- function fun3()
- {
- document.getElementById('d1').style.top=76+"%";
- document.getElementById('d1').style.bottom=0+"%";
- document.getElementById('d1').style.left=88+"%";
- document.getElementById('d1').style.right=0+"%";
- }
- function fun4()
- {
- document.getElementById('d1').style.bottom=0+"%";
- document.getElementById('d1').style.left=0+"%";
- document.getElementById('d1').style.top=76+"%";
- document.getElementById('d1').style.right=88+"%";
- }
- </script>
- <style type="text/CSS">
- #d1
- {
- width: 160px;
- height:160px;
- background-color: #66ffff;
- border: 2px solid #59d9d9;
- border-radius:10px 10px 10px 10px ;
- box-shadow: 2px 2px 10px #cccccc;
- position: absolute;
- top: 0%;
- left: 0%;
- right:86%;
- bottom:86%;
- }
- #input{
- margin-top:45px;
- margin-left: 30px;
- width: 101px;
- height: 68px;
- background-image: url("button.png");
- background-color: #66ffff;
- color: #ffffff;
- font-weight: 700;
- border: 0px;
- }
- </style>
- </head>
- <body>
- <div id="d1" >
- <input id="input" type="button" value="来呀,点我呀!" onmouseover="fun()"/>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/210520149624.html
来源: http://www.codesnippet.cn/detail/210520149624.html