-
- 慕粉1724599673 2021-01-22
- js里ie与标准浏览器事件绑定的区别 dom操作获取页面元素及类名 用js给元素绑定事件（冒泡与捕获）
-
截图0赞 · 0采集
-
- 慕粉1724599673 2021-01-22
- js里IE与标准浏览器下绑定事件的区别
-
截图0赞 · 0采集
-
- 慕粉1724599673 2021-01-22
- 浮动布局 定位布局 遮罩层 css2D与3D动画 css伪类事件hover
-
截图0赞 · 0采集
-
- 慕沐0269658 2019-05-11
浮动布局，遮罩层，css过渡动画，鼠标事件，监听
- 0赞 · 0采集
-
- 慕仰9764282 2018-09-25
<!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>
- 0赞 · 0采集
-
- wtxy 2018-09-03
- 列表并列显示 绝对定位不灵活 display:table 有兼容问题 table 要等table加载完才显示列表
- 0赞 · 0采集
-
- wtxy 2018-09-03
- 列表并列显示:
- 0赞 · 0采集
-
- 慕盖茨8503527 2018-08-31
- 鼠标事件，监听
-
截图0赞 · 0采集
-
- 慕盖茨8503527 2018-08-31
- 过度动画
-
截图0赞 · 0采集
-
- 慕盖茨8503527 2018-08-31
- 浮动布局，遮罩层，
-
截图0赞 · 0采集
-
- 凃图 2018-07-02
也可以用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");
});
});
- 0赞 · 0采集
-
- 仙剑vs逍遥 2018-03-17
- 列表之下的所有元素应用效果：.wrapper ul * 平滑过渡效果 transition:有三个参数，对哪一个做变换； linear 效果样式 动画持续时间 0.1s
- 0赞 · 0采集
-
- 仙剑vs逍遥 2018-03-17
- .wrapper.hover mask {opacity:0.15} 表示鼠标悬停时的遮罩层的透明度发生改变 对悬停项其遮罩层是不需要阴影效果的，通过opacity 权重级越高其优先级也就越高。 .wrapper li.big a:hover .mask{opacity :0}
- 0赞 · 0采集
-
- 慕瓜4412515 2017-12-17
- 手风琴
- 0赞 · 0采集
-
- qq_啊呐_03348953 2017-11-09
- 知识点transition动画，鼠标滑动事件，遮罩层
- 0赞 · 0采集
-
- 慕粉1462455617 2017-06-25
- 遮罩层 浮动 css transition动画 鼠标事件
- 0赞 · 0采集
-
- 慕粉2244244512 2017-06-13
- 手风琴效果
-
截图0赞 · 0采集
-
- 慕粉2244244512 2017-06-13
- 手风琴效果
-
截图0赞 · 0采集
-
- qq_啊啦嘞_0 2017-06-11
- DOM.attechEvent('onclick', callback) IE绑定事件方法 DOM.addEventListener('click',callback,false)标准浏览器绑定事件
- 0赞 · 0采集
-
- 宇宙_king 2017-06-07
- 浏览器绑定事件
-
截图0赞 · 0采集
-
- 宇宙_king 2017-06-07
- 悬停阴影
-
截图0赞 · 0采集
-
- 宇宙_king 2017-06-07
- js事件：IE和普通浏览器的事件添加； 事件添加中的回调函数：可能点击的是子元素，tagName判断到父元素，父元素添加类。
-
截图1赞 · 0采集
-
- Revontulet 2017-05-25
- function mouseoverHandler(e){ var target = e.target||e.srcElement; //取得外部元素 var outer = document.getElementById('imageMenu'); //取得每个列表项 var list = outer.getElementsByTagName('li'); //清空所有LI元素的big for(var i = 0; i < list.length; i++){ list[i].className = list[i].className.replace(/ ?big/g, ''); } //根据事件的冒泡原理，找到需要变更class 的LI元素 while(target.tagName != "LI" && target.tagName!="BODY"){ target=target.parentNode; } //给当前元素加上class big target.className += ' big'; }
- 0赞 · 0采集
-
- WEB丶FriEnD 2017-05-17
- window.onload=function(){ initList(); }
- 1赞 · 0采集
-
- Wendy_22 2017-05-01
- //事件绑定方法 function bind(el, eventType, callback){ if(typeof el.addEventListener === 'function'){ //标准事件绑定方法 el.addEventListener(eventType, callback, false); }else if(typeof el.attechEvent === 'function'){ //IE事件绑定方法 el.attachEvent('on' + eventType, callback); } }
- 0赞 · 0采集
-
- 一颗心的星空 2017-03-31
- 1、全面的事件监听函数 2、tagName返回的是大写，如'LI' 3、以防while()判断语句中向上查找LI元素直到BODY元素都还没有找到时，要关闭这个循环，所以设置了||target.tagName=='BODY'。此处不适合把li overflow:hidden掉
-
截图0赞 · 0采集
-
- 一颗心的星空 2017-03-31
- .wrapper li.big a:hover .mask优先级比.wrapper:hover .mask高。通过此设置不同的opacity使得悬停的盒子无阴影遮盖，其它盒子有遮盖
- 0赞 · 0采集
-
- 不骄不躁306 2017-03-17
- 改变某个元素的明暗度的实现方法：1.通过设置当前元素的透明度opacity、2.通过设置当前元素的background值 3.通过设置一个遮罩层的透明度来实现 4.通过设置当前元素的滤镜来实现
- 0赞 · 0采集
-
- 慕粉1467639534 2017-02-26
- 这段没看懂。所以标记一下。
-
截图0赞 · 0采集
-
- qq_蓝色纳木错_0 2017-02-22
- dom事件监听
-
截图0赞 · 0采集
