-
数字使用strong，斜体使用i查看全部
-
手风琴03查看全部
-
手风琴02查看全部
-
手风琴01查看全部
-
笔记1查看全部
-
浮动布局，遮罩层，css过渡动画，鼠标事件，监听
查看全部 -
在IE浏览器与标准浏览器下，绑定事件的区别查看全部
-
此节内容目前不太明白以后待续分解查看全部
-
DOM.addEventListener('click', callback, false)查看全部
-
得好好消化一下啊查看全部
-
和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。查看全部
-
C通过设置一个遮罩层的透明度来实现查看全部
-
1.浮动布局 2.遮罩层 透明度 3.动画 方法：1.JavaScript 属性值 2.css3-transition 过渡 4.鼠标事件 悬停监听 onmouseover查看全部
-
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
/*css图片都设置成折叠状态，给其中得到某一个添加展开状态
*{margin:0;padding:0;}
#box{width:1004px;
margin:0 auto;
border-bottom:1px solid red;
border-left:1px dashed red;
overflow:hidden;}
li{float:left;
width:200px;
overflow:hidden;
list-style-type:none;
border-right:1px dashed red;}
a{display:block;
width:200px;
overflow:hidden;}
img{width:400px;
border:0;}
.big,.big a{width:400px;}
</style>
<script>
window.onload=function()
{
function addhandler(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler,false);
}
else if(element.attachEvent)
{
element.attachEvent("on"+type,handler);
}
else
{
element["on"+type]=handler;
}
}
function mymouseoverhandler(e)
{
var target=e.target||e.srcElement; //获取事件目标并兼容浏览器
var oli=document.getElementsByTagName("li");
for(var i=0;i<oli.length;i++)
{
oli[i].className="";
}
/*如果直接写target.className="big"就不能实现效果，因为target虽然是获取事件目标，但是li里面有很多其他元素，鼠标指
在li里面时，不一定真正指在li上，所以要进行下面的判断*/
while(target.tagName!="LI"&&target.tagName!="BODY")
{
target=target.parentNode;
}
target.className="big";
}
function mybox()
{
var oli=document.getElementsByTagName("li");
for(var i=0;i<oli.length;i++)
{
addhandler(oli[i],"mouseover",mymouseoverhandler);
}
}
mybox();
}
</script>
</head>
<body>
<ul id="box">
<li class="big"><a href="#"><img src="boor1.png"/></a></li>
<li><a href="#"><img src="boor2.png"/></a></li>
<li><a href="#"><img src="boor3.png"/></a></li>
<li><a href="#"><img src="boor4.png"/></a></li>
</ul>
</body>
</html>
查看全部 -
也可以用jquery方法这样实现
$(window).load(function () {
var lis = $("#subject").find("li");
lis.each(function () {
}).mouseover(function () {
lis.removeClass("big");
$(this).addClass("big");
}).mouseleave(function () {
lis[i].addClass("big");
$(this).removeClass("big");
});
});
查看全部
举报