-
js里ie與標(biāo)準(zhǔn)瀏覽器事件綁定的區(qū)別 dom操作獲取頁面元素及類名 用js給元素綁定事件（冒泡與捕獲）查看全部
-
js里IE與標(biāo)準(zhǔn)瀏覽器下綁定事件的區(qū)別查看全部
-
浮動布局 定位布局 遮罩層 css2D與3D動畫 css偽類事件hover查看全部
-
浮動布局，遮罩層，css過渡動畫，鼠標(biāo)事件，監(jiān)聽
查看全部 -
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
/*css圖片都設(shè)置成折疊狀態(tài)，給其中得到某一個添加展開狀態(tài)
*{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;? //獲取事件目標(biāo)并兼容瀏覽器
? ? ? ? ? ?var oli=document.getElementsByTagName("li");
? ? ? ? ? ? for(var i=0;i<oli.length;i++)
? ? ? ? ? ? ?{? ?
? ? ? ? ? ? ? ? oli[i].className="";
? ? ? ? ? ? ? }
? ? ? ? ? ? ? /*如果直接寫target.className="big"就不能實(shí)現(xiàn)效果，因?yàn)閠arget雖然是獲取事件目標(biāo)，但是li里面有很多其他元素，鼠標(biāo)指
在li里面時，不一定真正指在li上，所以要進(jìn)行下面的判斷*/
? ? ? ? ? ?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加載完才顯示列表查看全部
-
列表并列顯示:查看全部
-
鼠標(biāo)事件，監(jiān)聽查看全部
-
過度動畫查看全部
-
浮動布局，遮罩層，查看全部
-
也可以用jquery方法這樣實(shí)現(xiàn)
$(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");
? ? ? ? ? ?});
? ? ? ? });
查看全部 -
列表之下的所有元素應(yīng)用效果：.wrapper ul * 平滑過渡效果 transition:有三個參數(shù)，對哪一個做變換； linear 效果樣式 動畫持續(xù)時間 0.1s查看全部
-
.wrapper.hover mask {opacity:0.15} 表示鼠標(biāo)懸停時的遮罩層的透明度發(fā)生改變 對懸停項(xiàng)其遮罩層是不需要陰影效果的，通過opacity 權(quán)重級越高其優(yōu)先級也就越高。 .wrapper li.big a:hover .mask{opacity :0}查看全部
-
手風(fēng)琴查看全部
-
知識點(diǎn)transition動畫，鼠標(biāo)滑動事件，遮罩層查看全部
-
遮罩層 浮動 css transition動畫 鼠標(biāo)事件查看全部
-
手風(fēng)琴效果查看全部
舉報