摘要：问题：当鼠标移动到元素上，多次触发mouseover,mouseout事件。（注，该问题是在实现鼠标移动到一起菜单，滑动弹出二级时碰到的；因为鼠标移动到二级菜单时，动画再次触发，才意识到该问题；之前因为使用的是：hover伪类实现的显示二级菜单，并且没有加入动画，所以并没有发现该问题。）问题原因分析：事件的冒泡机制，当子元素上发生相应事件时，会触发父级元素的该事件。如A元素包含B元素，在A，B元素上分别添加mouseover,mouseout监听事件，当鼠标移到A上，但不在B上时，触发A的mouseover,同时对应的event.eventPhase为2即目标阶段；当鼠标继续移入B元素中时，这 阅读全文

摘要：1）记得动画类代码要在启动新的动画时删除旧的动画launch 淘宝首页图片轮播效果 1 2 3 4 5 1 2 3 4 5 阅读全文

摘要：当元素加完边框后，因为边框占用一定空间，造成后面元素偏移，这样感觉不好。如何解决这个问题呢？ padding登场了。可以给元素设置内边距{padding： 0 6px;},当鼠标悬浮时添加边框，同时将内边距变小相应的大小{border-width:0 1px;padding:0 5px; } ps:这个技巧太赞了，可见平时不起眼的padding有时可以派上大用场，细节才是王道。 阅读全文

摘要：a的默认样式是inline，如果对其设置了line-height:100px;vertical-align:middle;那么其中的文字就会垂直居中，而且会超出容器，a的实际位置也会跟着变。而如果对其设置了inline-block;那么文字依然如上，但是a的实际位置会在容器内部。于是，我认为line-height等只会对文字有效。而inline-block会使a按正常容器中的位置展示。 阅读全文

摘要：实现该选项卡与选项内容之间背景相同，同时无边框效果。下面介绍基本实现原理，细节实现可以自己改变。 1）选项卡{z-index:10002;}鼠标悬浮在选项卡时{border-width:0 1px;border-style:solid;border-color:#eee;background:#fff;} 2) 弹出框它包含有两层：外面的wrap,开始设置为{display:none;},里面的panel 3)wrap{position:relative;margin-top:-1px;}panel{position:absolute;top:0;left:0;border:1px ... 阅读全文

摘要：1 (function(){ 2 var obj=document.getElementById('J_WeekendImg'); 3 4 function wrapChangeSrc(src){ 5 return function(event){ 6 event.target.setAttribute('src',src); 7 }; 8 } 9 obj.addEventListener('mouseover',wrapChangeSrc('./img/T1YvOzFpVdXXaXRhvb-145-3... 阅读全文

摘要：css 浮动中避免包含元素高度为0的4种解决方法 阅读全文

摘要：iconfont 阅读全文

摘要：1）在看《web前端修炼之道》中对其中一段代码，一直运行不通 1 function extend(subClass,superClass){ 2 var F=function(){}; 3 F.prototype=superClass.prototype; 4 subClass.prototype=new F(); 5 subClass.prototype.constructor=subClass; 6 subClass.superClass=superClass.prototype; 7 if(superClass.prototype.cons... 阅读全文

摘要：JavaScript中__proto__与prototype的关系 阅读全文

摘要：1）css中的百分比，就目前所知，基本上都是根据父元素的大小来计算的。launch 边距使用百分比 阅读全文