-
js里ie与标准浏览器事件绑定的区别 dom操作获取页面元素及类名 用js给元素绑定事件（冒泡与捕获）查看全部
-
js里IE与标准浏览器下绑定事件的区别查看全部
-
浮动布局 定位布局 遮罩层 css2D与3D动画 css伪类事件hover查看全部
-
浮动布局，遮罩层，css过渡动画，鼠标事件，监听
查看全部 -
<!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>
查看全部 -
列表并列显示 绝对定位不灵活 display:table 有兼容问题 table 要等table加载完才显示列表查看全部
-
列表并列显示:查看全部
-
鼠标事件，监听查看全部
-
过度动画查看全部
-
浮动布局，遮罩层，查看全部
-
也可以用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");
});
});
查看全部 -
列表之下的所有元素应用效果：.wrapper ul * 平滑过渡效果 transition:有三个参数，对哪一个做变换； linear 效果样式 动画持续时间 0.1s查看全部
-
.wrapper.hover mask {opacity:0.15} 表示鼠标悬停时的遮罩层的透明度发生改变 对悬停项其遮罩层是不需要阴影效果的，通过opacity 权重级越高其优先级也就越高。 .wrapper li.big a:hover .mask{opacity :0}查看全部
-
手风琴查看全部
-
知识点transition动画，鼠标滑动事件，遮罩层查看全部
-
遮罩层 浮动 css transition动画 鼠标事件查看全部
-
手风琴效果查看全部
举报