能用纯css加div做出幻灯片或滑动门效果么?

html-css018

能用纯css加div做出幻灯片或滑动门效果么?,第1张

完全可以哦,滑动式的利用css的hover,也就是纯css菜单的原理,

点击式的利用的是锚点的原理。

实例如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>纯CSS实现的Tab</title>

<style>

*{ margin:0 padding:0}

#main{width:500px margin:100px auto}

#title>a{ float:left border:1px solid #000 padding:2px 4px display:block text-decoration:none color:#000}

#content{ width:500px height:300px border:1px solid #000 overflow:hidden}

#content>div{float:left padding:2px 4px width:500px height:300px}

#a1:hover #a2>#tab2{ display:block}

</style>

</head>

<body>

<div id="main">

<div id="title">

<a href="#tab1">tab1title</a>

<a href="#tab2">tab2title</a>

<a href="#tab3">tab3title</a>

<a href="#tab4">tab4title</a>

<div style="clear:both"></div>

</div>

<div id="content">

<div id="tab1"> tab1 content </div>

<div id="tab2"> tab2 content </div>

<div id="tab3"> tab3 content </div>

<div id="tab4"> tab4 content </div>

<div style="clear:both"></div>

</div>

</div>

</body>

</html>

理论上,BC默认的display:none当鼠标hoverA的时候,$("B,C").css("display","normal'),当鼠标离开的时候在把display设置为none,或者当你不考虑兼容性时,可以考虑用透明度做