zoukankan      html  css  js  c++  java
  • 简单手风琴特效、轮播

    <div style="position: relative;  100%; height: 500px;overflow:hidden;">
                <div id="1" style=" 85%; height: 500px; position: absolute; float: left; transition: 0.7s;background-image:url(img/by1.jpg)" onmouseover="bian(1)"></div>
                <div id="2" style=" 85%; height: 500px; position: absolute; float: left; transition: 0.7s;background-image:url(img/by2.jpg);left:5%;" onmouseover="bian(2)"></div>
                <div id="3" style=" 85%; height: 500px; position: absolute; float: left; transition: 0.7s;background-image:url(img/by3.jpg);left:10%;" onmouseover="bian(3)"></div>
                <div id="4" style=" 85%; height: 500px; position: absolute; float: left; transition: 0.7s;background-image:url(img/by4.jpg);left:15%;" onmouseover="bian(4)"></div>
            </div>
    <script>
        function bian(n)
        {
            if (n == 1)
            {
                document.getElementById("1").style.left = "";
                document.getElementById("2").style.left = "85%";
                document.getElementById("3").style.left = "90%";
                document.getElementById("4").style.left = "95%";
            }
            if (n == 2) {
                document.getElementById("1").style.left = "";
                document.getElementById("2").style.left = "5%";
                document.getElementById("3").style.left = "90%";
                document.getElementById("4").style.left = "95%";
            }
            if (n == 3) {
                document.getElementById("1").style.left = "";
                document.getElementById("2").style.left = "5%";
                document.getElementById("3").style.left = "10%";
                document.getElementById("4").style.left = "95%";
            }
            if (n == 4) {
                document.getElementById("1").style.left = "";
                document.getElementById("2").style.left = "5%";
                document.getElementById("3").style.left = "10%";
                document.getElementById("4").style.left = "15%";
            }
    
    
        }
    
    
    </script>

    简单轮播:

    <div id="t"  style="background-image:url(img/by1.jpg);100%;height:500px;">
            
    
        </div>
    <script>
        var tp = new Array();
        tp[0] = "url(img/by1.jpg)";
        tp[1] = "url(img/by2.jpg)";
        tp[2] = "url(img/by3.jpg)";
        tp[3] = "url(img/by4.jpg)";
        var tt = document.getElementById("t");
        var xb = 0;
        function huan() {
            xb++;
            if (xb == tp.length)
            {
                xb = 0;
            }
            if (xb == 0)
            {
                tt.style.backgroundImage = tp[0];
            }
            if (xb == 1)
            { tt.style.backgroundImage = tp[1];}
            if (xb == 2)
            { tt.style.backgroundImage = tp[2]; }
            if(xb == 3)
            { tt.style.backgroundImage = tp[3]; }
    
            window.setTimeout("huan()",2000);
        }
        window.setTimeout("huan()",2000);
    </script>
  • 相关阅读:
    qt中线程的使用方法
    QT中定时器的使用方法
    Common Lisp学习笔记(八)
    Common Lisp学习笔记(七)
    Common Lisp学习笔记(六)
    vim使用笔记
    Django学习笔记:urlresolvers
    python closures and decorators
    规范命名:变量名的力量
    eclipse openGL glut运行环境配置
  • 原文地址:https://www.cnblogs.com/wy1992/p/6563835.html
Copyright © 2011-2022 走看看