当前位置: 代码迷 >> JavaScript >> 指定对象边框闪烁,该如何处理
  详细解决方案

指定对象边框闪烁,该如何处理

热度:152   发布时间:2012-06-07 15:05:14.0
指定对象边框闪烁
现有3个ul元素:
HTML code

<ul class='overdiv'>
    <li class="showImg"><input type="checkbox" name="chk0" class="chk" /><img id="ul0" src="images/net.png"/></li>
    <li><b>责任人:</b> ww </li>
</ul>
<ul class='overdiv'>
    <li class="showImg"><input type="checkbox" name="chk1" class="chk" /><img id="ul0" src="images/net.png"/></li>
    <li><b>责任人:</b> aa </li>
</ul>
<ul class='overdiv'>
    <li class="showImg"><input type="checkbox" name="chk2" class="chk" /><img id="ul0" src="images/net.png"/></li>
    <li><b>责任人:</b> bb </li>
</ul>


如何使第一和第三个ul的边框闪烁,第二个不动。

------解决方案--------------------
HTML code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
        </style>        
    </head>
    <body>
        <ul class='overdiv'>
            <li class="showImg"><input type="checkbox" name="chk0" class="chk" /><img id="ul0" src="images/net.png"/></li>
            <li><b>责任人:</b> ww </li>
        </ul>
        <ul class='overdiv'>
            <li class="showImg"><input type="checkbox" name="chk1" class="chk" /><img id="ul0" src="images/net.png"/></li>
            <li><b>责任人:</b> aa </li>
        </ul>
        <ul class='overdiv'>
            <li class="showImg"><input type="checkbox" name="chk2" class="chk" /><img id="ul0" src="images/net.png"/></li>
            <li><b>责任人:</b> bb </li>
        </ul>        
        <script>
            function $(el){
                return typeof el == 'string' ? document.getElementById(el) : el;
            }
            function $t(name, cot){
                cot = cot || document;
                return cot.getElementsByTagName(name);
            }
            function autoFlash(obj, color1, color2){
                obj.style.border = '1px solid #fff';
                obj.timer = setInterval(function(){
                    var s = obj.style
                    if( s.borderColor == color1 ){
                        s.borderColor = color2;
                    }else{
                        s.borderColor = color1;
                    }
                }, 101)
            }
            var uls = $t('ul');
            autoFlash(uls[0], 'red', 'blue');
            
            
        </script>
    </body>
</html>

------解决方案--------------------
JScript code
  $(':not(.overdiv:nth-child(2))').css(
    'border', 
    '1px solid #ccc'
  );

------解决方案--------------------
jquery?

直接把 选择器 和 css 赋值 换下就可以了。
------解决方案--------------------
这里$和jquery的缩写 冲突了。

你用了jquery就把 上面的函数 cut 了吧

------解决方案--------------------
HTML code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
        </style>        
    </head>
    <body>
        <ul class='overdiv'>
            <li class="showImg"><input type="checkbox" name="chk0" class="chk" /><img id="ul0" src="images/net.png"/></li>
            <li><b>责任人:</b> ww </li>
        </ul>
        <ul class='overdiv'>
            <li class="showImg"><input type="checkbox" name="chk1" class="chk" /><img id="ul0" src="images/net.png"/></li>
            <li><b>责任人:</b> aa </li>
        </ul>
        <ul class='overdiv'>
            <li class="showImg"><input type="checkbox" name="chk2" class="chk" /><img id="ul0" src="images/net.png"/></li>
            <li><b>责任人:</b> bb </li>
        </ul>  
        <script src="http://code.jquery.com/jquery-latest.js"></script>        
        <script>
            function autoFlash(obj, color1, color2){
                var s = obj.style
                s.border = '1px solid #fff';
                obj.timer = setInterval(function(){
                    if( s.borderColor == color1 ){
                        s.borderColor = color2;
                    }else{
                        s.borderColor = color1;
                    }
                }, 101)
            }
            $('ul').each(function(i){
                if( i != 1 ){
                    autoFlash(this, 'red', 'blue');
                }
            })
            
            
            
        </script>
    </body>
</html> 
  相关解决方案