一、通过css实现
<style>
*{
padding:0;
margin:0;
}
//固定图片的宽度
img{
width:270px;
height:480px;
}
div.box{
margin:50pxauto0;
width:810px;
height:480px;
// 横向分布
display:flex;
// 设置划出隐藏
overflow:hidden;
border: 1pxsolid#555;
}
section{
width:90px;
box-shadow:-1px1px4px2pxrgba(0,0,0,0.3);
transition:all0.7s
}
//核心代码实现触碰到不是最后一个孩子的时候将其宽度变回原来的宽度
section:not(:last-child):hover{
width:270px;
}
</style>
<body>
<divclass="box">
<section><imgsrc="../1.jpg"alt=""></section>
<section><imgsrc="../2.jpg"alt=""></section>
<section><imgsrc="../3.jpg"alt=""></section>
<section><imgsrc="../5.jpg"alt=""></section>
<section><imgsrc="../6.jpg"alt=""></section>
<section><imgsrc="../7.jpg"alt=""></section>
<section><imgsrc="../8.jpg"alt=""></section>
</div>
</body>
心得：由于css只能选择实现最后一个展现出被选中的效果所以就有相应的js来实现第一被选中的效果了见下文
通过js实现
<style>
*{
padding: 0;
margin: 0;
}
img{
width: 270px;
height: 480px;
}
div.box{
margin: 50px auto 0;
width: 810px;
height: 480px;
display: flex;
overflow: hidden;
border: 1px solid #555;
}
section{
width: 90px;
box-shadow: -1px 1px 4px 2px rgba(0,0,0,0.3);
// 设置动画
transition: all 0.7s
}
section.on{
width: 270px;
}
</style>
<body>
<div class="box" id="box">
<section class="on"><img src="../1.jpg" alt=""></section>
<section><img src="../2.jpg" alt=""></section>
<section><img src="../3.jpg" alt=""></section>
<section><img src="../5.jpg" alt=""></section>
<section><img src="../6.jpg" alt=""></section>
<section><img src="../7.jpg" alt=""></section>
<section><img src="../8.jpg" alt=""></section>
</div>
</body>
<script src="../框架/agent.js"></script>
<script>
let oBox = document.getElementById('box');
// 调用框架中事件代理函数
agent1('box','mouseover','section',function(){
clearCls('box','section','on');
this.className = 'on';
})
</script>
实现中间被选中有遮罩层效果的滑动门
<style>
*{
padding: 0;
margin: 0;
}
img{
width: 270px;
height: 480px;
opacity: 1;
}
div.box{
margin: 50px auto 0;
width: 810px;
height: 480px;
display: flex;
overflow: hidden;
border: 1px solid #555;
}
aside{
position: absolute;
top: 0;
left: 0;
width: 270px;
height: 480px;
background-color: #666;
opacity: 0.4;
}
section{
position: relative;
width: 90px;
box-shadow: -1px 1px 4px 2px rgba(0,0,0,0.3);
transition: all 0.7s;
background-color: #000;
}
section.on{
width: 270px;
}
section.on aside{
opacity: 0;
}
</style>
<body>
<div class="box" id="box">
<section><img src="../1.jpg" alt=""><aside></aside></section>
<section><img src="../2.jpg" alt=""><aside></aside></section>
<section><img src="../3.jpg" alt=""><aside></aside></section>
<section class="on"><img src="../5.jpg" alt=""><aside></aside></section>
<section><img src="../6.jpg" alt=""><aside></aside></section>
<section><img src="../7.jpg" alt=""><aside></aside></section>
<section><img src="../8.jpg" alt=""><aside></aside></section>
</div>
</body>
<script src="../框架/agent.js"></script>
<script>
let oBox = document.getElementById('box');
agent1('box','mouseover','section',function(){
clearCls('box','section','on');
this.className = 'on';
this.style.cssText =``
})
function agent1(parentId, eventType, label, fun) {
let oParent = document.getElementById(parentId);
oParent['on' + eventType] = function (ev) {
let e = ev || Event;
e.stopPropagation();
// 阻止 oParent 的冒泡
let child = e.target || e.srcElement;
let LABEL=label.toUpperCase()
// !重要
// child.nodeName是标签的名字 e.target事件所指向的目标
while (child.nodeName!==LABEL && child.nodeName!==oParent.nodeName) {
child=child.parentNode;
}
if (child.nodeName === LABEL) {
fun.call(child);
// 将方法绑定到child；
}
}
}
</script>
心得：aside做为遮罩层，当然我使用的方法是固定图片进行实现的，还有一种方法是通过设置背景来进行实现的，不管是哪一种方法都逃不了核心改变其宽度
/Wangbabaa/web.git
