简单实现滑动门效果css或js+css

一、通过css实现

<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:not(:last-child):hover{

width: 270px;

}

</style>

<body>

</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>

</body>

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>

</body>

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做为遮罩层，当然我使用的方法是固定图片进行实现的，还有一种方法是通过设置背景来进行实现的，不管是哪一种方法都逃不了核心改变其宽度

https://github.com/Wangbabaa/web.git

简单实现滑动门效果css或js+css相关推荐

一个简单的滑动门效果代码
//滑动门 function menu(a,idName,cssName) { for(i=1;i<=2;i++) { if(i==a) { ...
原生JavaScript实现滑动门效果
一.什么是滑动门首先你要了解什么是滑动门. 生活中我们经常看到一些网站或是商城有一些滑动门的效果, 那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法, 二.实现滑动门所需技术简单的H ...
html css纵向滑动列表,JS实现的简洁纵向滑动菜单(滑动门)效果
本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自 ...
滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
php多重滑动门,CSS如何实现滑动门效果
CSS实现滑动门效果主要通过设置伪元素的样式来实现,在鼠标滑过时给元素设置display:block让它显示,鼠标滑出时隐藏一个网站的导航栏对于网站来说有着举足轻重的地位,导航栏的风格也是各式各样的 ...
css滑动门效果，文字两侧背景花纹自适应
css滑动门效果:不同长度的文字,两侧的背景图案一致,如下图所示. 效果预览: 素材图片:t2.jpg 源代码如下: <!DOCTYPE html> <html lang=" ...
html如何做滑动门效果,JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感 ...
css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
html如何做滑动门效果,div+css制作简单滑动门效果
现在流行的网站设计中,水平导航菜单占据了大壁江山.的确,无论是门户网站还是企事业单位网站,都大量的采用水平的导航菜单设计.而水平导航菜单中,又有绝大多数网站采用"滑动门"设计. 首 ...
css滑动门技术的应用,DIV+CSS滑动门技术简介
你对DIV+CSS滑动门技术的概念和使用是否熟悉,这里和大家分享一下,其实DIV+CSS滑动门技术是一种只需要鼠标悬停便可自动切换板块的JS特效,相信本文介绍一定会让你有所收获. DIV+CSS滑动门 ...

简单实现滑动门效果css或js+css

简单实现滑动门效果css或js+css相关推荐

最新文章

热门文章