zoukankan      html  css  js  c++  java
  • 手风琴特效

    一种是鼠标悬浮,一种是点击。

    body里

    复制代码
    <div style=" 700px; height:300px;  overflow:hidden;position:relative;">
        <div id="d1" style="500px; height:300px; position:absolute; float:left; transition:0.7s;" onMouseOver="bian(1)"></div>
        <div id="d2" style="500px; height:300px; position:absolute; float:left; left:50px; transition:0.7s;" onMouseOver="bian(2)"></div>
        <div id="d3" style="500px; height:300px; position:absolute; float:left; left:100px; transition:0.7s;" onMouseOver="bian(3)"></div>
        <div id="d4" style="500px; height:300px; position:absolute; float:left; left:150px; transition:0.7s;" onMouseOver="bian(4)"></div>
        <div id="d5" style="500px; height:300px; position:absolute; float:left; left:200px; transition:0.7s;" onMouseOver="bian(5)"></div>
    </div>
    <br>
    <div style=" 700px; height:300px;  overflow:hidden;position:relative;">
        <div id="dd1" style="500px; height:300px; position:absolute; float:left; transition:0.7s;" onClick="biann(1)"></div>
        <div id="dd2" style="500px; height:300px; position:absolute; float:left; left:50px; transition:0.7s;" onClick="biann(2)"></div>
        <div id="dd3" style="500px; height:300px; position:absolute; float:left; left:100px; transition:0.7s;" onClick="biann(3)"></div>
        <div id="dd4" style="500px; height:300px; position:absolute; float:left; left:150px; transition:0.7s;" onClick="biann(4)"></div>
        <div id="dd5" style="500px; height:300px; position:absolute; float:left; left:200px; transition:0.7s;" onClick="biann(5)"></div>
    </div><br>
    复制代码

    js里

    复制代码
    <script language="javascript1.1">
    function bian(n)
    {
        if(n==1){
            document.getElementById("d1").style.left="";
            document.getElementById("d2").style.left="500px";
            document.getElementById("d3").style.left="550px";
            document.getElementById("d4").style.left="600px";
            document.getElementById("d5").style.left="650px";
        }
        else if(n==2){
            document.getElementById("d1").style.left="";
            document.getElementById("d2").style.left="50px";
            document.getElementById("d3").style.left="550px";
            document.getElementById("d4").style.left="600px";
            document.getElementById("d5").style.left="650px";
            }
        else if(n==3){
            document.getElementById("d1").style.left="";
            document.getElementById("d2").style.left="50px";
            document.getElementById("d3").style.left="100px";
            document.getElementById("d4").style.left="600px";
            document.getElementById("d5").style.left="650px";
            }
        else if(n==4){
            document.getElementById("d1").style.left="";
            document.getElementById("d2").style.left="50px";
            document.getElementById("d3").style.left="100px";
            document.getElementById("d4").style.left="150px";
            document.getElementById("d5").style.left="650px";
            }
        else if(n==5){
            document.getElementById("d1").style.left="";
            document.getElementById("d2").style.left="50px";
            document.getElementById("d3").style.left="100px";
            document.getElementById("d4").style.left="150px";
            document.getElementById("d5").style.left="200px";
            }
    }
    function biann(n)
    {
        if(n==1){
            document.getElementById("dd1").style.left="";
            document.getElementById("dd2").style.left="500px";
            document.getElementById("dd3").style.left="550px";
            document.getElementById("dd4").style.left="600px";
            document.getElementById("dd5").style.left="650px";
        }
        else if(n==2){
            document.getElementById("dd1").style.left="";
            document.getElementById("dd2").style.left="50px";
            document.getElementById("dd3").style.left="550px";
            document.getElementById("dd4").style.left="600px";
            document.getElementById("dd5").style.left="650px";
            }
        else if(n==3){
            document.getElementById("dd1").style.left="";
            document.getElementById("dd2").style.left="50px";
            document.getElementById("dd3").style.left="100px";
            document.getElementById("dd4").style.left="600px";
            document.getElementById("dd5").style.left="650px";
            }
        else if(n==4){
            document.getElementById("dd1").style.left="";
            document.getElementById("dd2").style.left="50px";
            document.getElementById("dd3").style.left="100px";
            document.getElementById("dd4").style.left="150px";
            document.getElementById("dd5").style.left="650px";
            }
        else if(n==5){
            document.getElementById("dd1").style.left="";
            document.getElementById("dd2").style.left="50px";
            document.getElementById("dd3").style.left="100px";
            document.getElementById("dd4").style.left="150px";
            document.getElementById("dd5").style.left="200px";
            }
    }
    </script>
  • 相关阅读:
    bzoj4105: [Thu Summer Camp 2015]平方运算
    bzoj4035: [HAOI2015]数组游戏
    bzoj1022: [SHOI2008]小约翰的游戏John
    bzoj4665: 小w的喜糖
    CodeChef:Little Elephant and Colored Coins
    bzoj4664: Count
    bzoj4498: 魔法的碰撞
    bzoj4230: 倒计时
    bzoj4532: [BeiJing2014 WinterCamp] 珠链
    python 画正态曲线
  • 原文地址:https://www.cnblogs.com/baimangguo/p/6064172.html
Copyright © 2011-2022 走看看