js效果

zhanglong_longlong 2014-04-23 12:33:08

<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ul>
<div>弹出层</div>

需要的效果是，鼠标移入aa背景变红色，鼠标移入div层背景色不会消失，在移入bb，aa背景色就消失。

...全文

167 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhanglong_longlong 2014-04-23

打赏
举报

用js不要用jquery

Go 旅城通票 2014-04-23

打赏
举报

 <ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ul>
<div>弹出层</div>

<script>
    window.onload = function () {
        var ul = document.getElementsByTagName('ul')[0], lis = ul.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++)
            lis[i].onmouseover = function () {
                for (var i = 0; i < lis.length; i++) lis[i].style.backgroundColor = '';
                this.style.backgroundColor = 'red';
            }
    }
</script>

jzshmyt 2014-04-23

打赏
举报



<script>
function mov(li){
    var ul = li.parentNode;
    li.style.background="red";
    var lis = ul.getElementsByTagName("li");
    for(var k=0;k<lis.length;k++){
        if(li!=lis[k]){
            lis[k].style.background="white"
        }
    }
}
</script>

<ul>
<li onmouseover=mov(this)>aa</li>
<li onmouseover=mov(this)>bb</li>
<li onmouseover=mov(this)>cc</li>
</ul>
<div>弹出层</div>

处理了一下兼容性问题

iceqijunfei 2014-04-23

打赏
举报

楼上的写的有点问题，正确代码如下，亲测有效。

<!DOCTYPE html>
<html>
<body>

<script>
function mov1(){
    var li=document.getElementById("a");
    li.style.background="red";
    var lio=document.getElementById("b");
    lio.style.background="white";
var lioo=document.getElementById("c");
    lioo.style.background="white";
    }
function mov2(){
var li=document.getElementById("b");
    li.style.background="red";
var lio=document.getElementById("a");
    lio.style.background="white";
var lioo=document.getElementById("c");
    lioo.style.background="white";
    }
function mov3(){
var li=document.getElementById("c");
    li.style.background="red";
var lio=document.getElementById("b");
    lio.style.background="white";
var lioo=document.getElementById("a");
    lioo.style.background="white";
    }
</script>
 
<ul>
<li id="a" onmouseover=mov1()>aa</li>
<li id="b" onmouseover=mov2()>bb</li>
<li id="c" onmouseover=mov3()>cc</li>
</ul>
<div>弹出层</div>

</body>
</html>

jzshmyt 2014-04-23

打赏
举报


<script>
function mov(li){
    var ul = li.parentNode;
    li.style.background="red";
    for(var k=0;k<ul.childNodes.length;k++){
        if(li!=ul.childNodes[k]){
            ul.childNodes[k].style.background=""
        }
    }
}
</script>

<ul>
<li onmouseover=mov(this)>aa</li>
<li onmouseover=mov(this)>bb</li>
<li onmouseover=mov(this)>cc</li>
</ul>
<div>弹出层</div>

javascript脚本实现页面飘窗效果，下载直接调用

利用js实现轮播效果其中封装了一个简单的匀速动画函数

类似百度2012世界末日页面地震效果，供学习类似百度2012世界末日页面地震效果，供学习

编辑整理的1500个前端开发常用JavaScript特效chm，包括了菜单效果、按钮效果、鼠标效果、页面效果、字符排版、计算、小游戏等的网页特效集，都是些较简单的JS特效。

Rainyday.js 是一个轻量的 JavaScript 库，利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js 尽可能的模拟现实的雨滴效果，几乎可以以假乱真了。