• 开关效果


    <style>
             /*关闭状态*/
    .news_box{100%;height:2rem;margin-bottom:15px;}
    .dashDiv{
       float: right;
        border-radius: 1rem;
        background-color: #cbcbcb;
        3.2rem;
        height: 1.65rem;
        margin-top: 0.2rem;
        margin-right: 0.4rem;
        box-sizing: border-box;
        transition: 1s;
        position: absolute;
        right: 0;
    }

    .dashDiv .dashSpan{
        border-radius: 50%;
        border: 1px solid #FFFFFF;
        background-color: #FFFFFF;
        float: left;
        1.5rem;
        height: 1.5rem;
        box-sizing: border-box;
        margin-top: 0.0704rem;
        margin-left: 0.0704rem;
    }

    /*开通状态*/

    .dashDivSelectd{
        background-color: #4cd964;
        transition: 1s;
        border-radius: 1rem;
        3.2rem;
        height: 1.65rem;
        margin-top: 0.2rem;
        margin-right: 0.4rem;
        position: absolute;
        right: 0;
        float: right;
        box-sizing: border-box;

    }
    .dashDivSelectd .dashSpan{
        border-radius: 50%;
        float: right;
        margin-right: 0.0704rem;
        border: 1px solid #FFFFFF;
        background-color: #FFFFFF;
        1.5rem;
        height: 1.5rem;
        box-sizing: border-box;
        margin-top: 0.0704rem;
    }
    </style>



    <div class="news_box" id="cue">
            <div class="dashDiv">
                   <a class="dashSpan" href="javascript:;"></a>
             </div>
    </div>


    <div class="news_box" id="cue1">
            <div class="dashDiv">
                   <a class="dashSpan" href="javascript:;"></a>
             </div>
    </div>


    <script>
        function hasClass(obj, cls) {
            return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
        }  
        function addClass(obj, cls) {
            if (!hasClass(obj, cls)) obj.className += " " + cls;
        }
        function removeClass(obj, cls) {
            if (hasClass(obj, cls)) {
            var reg = new RegExp('(\s|^)' + cls + '(\s|$)');
            obj.className = obj.className.replace(reg, ' ');
            }
        }
        function toggleClass(obj,cls){
            if(hasClass(obj,cls)){
            removeClass(obj,cls);
            }else{
            addClass(obj,cls);
            }

        }

    function hint(target){
        var Cue = document.getElementById(target);
        var DashDiv =Cue.getElementsByClassName("dashDiv")[0];
        var DashSpan =Cue.getElementsByClassName("dashSpan")[0];
        var Success =Cue.getElementsByClassName("success")[0];   
        DashSpan.onclick =function(){
            toggleClass(DashDiv,"dashDivSelectd");
        }
    }

    // 调用
    hint("cue");
    hint("cue1");


    </script>

  • 相关阅读:
    A*寻路算法
    Flump使用GPU渲染Flash动画
    Flash AS3.0 垃圾回收机制
    flash builder无法启动的解决方法
    AS3.0 BitmapData类介绍
    x&(x1)表达式的意义
    Feathers: Stage3D加速的UI组件
    Knockout.js入门
    TcxStyleRepository使用示例
    TPageControl使用代码节选
  • 原文地址:https://www.cnblogs.com/water-wf/p/10949321.html
Copyright © 2020-2023  润新知