单纯使用CSS能实现滑动门效果？

2023-02-19 19:17:02html-css015

单纯使用CSS能实现滑动门效果？,第1张

可以的，纯css做滑动门有两种办法，一个利用hover伪类，另一种就是设置锚点。对应两种方式触发滑动门效果，鼠标悬浮和点击。

下面各举一例，

鼠标悬浮触发：（此例ie6下无效，因其暂不支持li:hover的伪类）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>纯CSS下拉菜单</title>

font-size:12px

text-decoration:none

color:#000000}

li ul{

display:none

margin-left:5px}

li:hover ul{

width:306px

padding:20px

height:250px

display:block

}

li:hover .fira{border-bottom:#FFFFFF 1px solid

}#kpk{

position:relative

width:420px

}

#kpk>li{

float:left

list-style:none

margin-right:20px

}

#kpk>li .fira{

border:1px #c6c6c6 solid

}

.seca{

position:absolute

z-index:1

left:-5px

top:23px

border:1px #c6c6c6 solid

height:250px

width:306px

padding:20px

height:250px

}

.fira{

width:70px

display:block

line-height:22px

background-color:white

text-align:center

z-index:2

}</style>

</head><body>

<div>

<li>

<li><A href="#" target=_self>1.首页新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.首页最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.首页物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.首页弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.首页揭开郑州神枪手神秘面纱头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.首页美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.首页浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.首页西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.首页女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.首页建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

</ul>-->

</li>

<li>

<li><A href="#" target=_self>1.链接一新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.链接一最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.链接一物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.链接一弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.链接一揭开郑州神枪手神秘面纱头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.链接一美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.链接一浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.链接一西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.链接一女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.链接一建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

</ul>-->

</li>

<li>

<li><A href="#" target=_self>1.链接二新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.链接二最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.链接二物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.链接二弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.链接二揭开郑州神枪手神秘面纱头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.链接二美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.链接二浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.链接二西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.链接二女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.链接二建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

</ul>-->

</li>

<li>

<li><A href="#" target=_self>1.链接三新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>

<li><A href="#" target=_self>2.链接三最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>

<li><A href="#" target=_self>3.链接三物权法:满70年住宅建设用地使用权将自动续期</A></li>

<li><A href="#" target=_self>4.链接三弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>

<li><A href="#" target=_self>5.链接三揭开郑州神枪手神秘面纱头号狙击手是近视眼</A></li>

<li><A href="#" target=_self>6.链接三美军高官:不排除和中国发生直接军事对抗可能</A></li>

<li><A href="#" target=_self>7.链接三浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>

<li><A href="#" target=_self>8.链接三西方炒作"中国航母威胁论"称05年已正式服役</A></li>

<li><A href="#" target=_self>9.链接三女孩生活无法自理请人大代表递交安乐死议案</A></li>

<li><A href="#" target=_self>10.链接三建设部：住房公积金制度将覆盖农民工</A></li>

</ul>

<!--<ul>

</ul>-->

</li>

</ul>

</div>

</body>

</html>

锚点点击例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

#nav{

width:303px

height:200px

border:1px solid #CCCCCC

}

#column a {

float:left

width:100px

border-right:1px solid #CCC

border-bottom:1px solid #CCC

font:bold 14px/30px Arial, Helvetica, sans-serif

color:#000

text-decoration:none

text-align:center

}

#contant {

width:303px

height:162px

overflow:hidden

}

ul {

margin:0

padding:0

list-style-type:none

padding:4px 0 0 5px

}

li {

font-size:12px

overflow:hidden

padding-left:2px

line-height:27px

}

</style>

</head>

<body>

<li><a href="#">我喜欢CSS </a></li>

<li><a href="#">我喜欢CSS</a></li>

</ul>

<li><a href="#">我喜欢编程</a></li>

<li><a href="#">我喜欢编程 </a></li>

<li><a href="#">我喜欢编程</a></li>

</ul>

<li><a href="#">我喜欢美工</a></li>

<li><a href="#">我喜欢美工 </a></li>

<li><a href="#">我喜欢美工</a></li>

</ul>

</div>

</body>

</html>

楼主自行copy代码到本地查看，样式微调。。。

这个要模拟得好的话必须得结合js才行的，光是那排字母就不光是点击，应该要支持手指在上面精确的滑动到某个字母范围，这个一时半会写不出来。你可以去网上找个常见的JQ滚屏插件来改动下自己琢磨。

简单的办法，ABCD..XYZ做成锚链接，加个js平滑滚动，样式你自己想办法完善，把A-Z那排链接display: block后设置成正方形方块，加个ul>li套上用定位放到左上角即可：

<!DOCTYPE html>

<html>

<body>

h2:target{

background:#00C}

}

</style>

<body>

<h2 id="L">L开头的电话</h2>

<h2 id="W">W开头的电话</h2>

</body>

</html>

/* Smooth scrolling(平滑滚动到锚链接)

Changes links that link to other parts of this page to scroll

smoothly to those links rather than jump to them directly, which

can be a little disorienting.

sil, http://www.kryogenix.org/

v1.0 2003-11-11

v1.1 2005-06-16 wrap it up in an object

var ss = {

fixAllLinks: function() {

// Get a list of all links in the page

var allLinks = document.getElementsByTagName('a')

// Walk through the list

for (var i=0i<allLinks.lengthi++) {

var lnk = allLinks[i]

if ((lnk.href && lnk.href.indexOf('#') != -1) &&

( (lnk.pathname == location.pathname) ||

('/'+lnk.pathname == location.pathname) ) &&

(lnk.search == location.search)) {

// If the link is internal to the page (begins in #)

// then attach the smoothScroll function as an onclick

// event handler

ss.addEvent(lnk,'click',ss.smoothScroll)

}

smoothScroll: function(e) {

// This is an event handler get the clicked on element,

// in a cross-browser fashion

if (window.event) {

target = window.event.srcElement

} else if (e) {

target = e.target

} else return

// Make sure that the target is an element, not a text node

// within an element

if (target.nodeName.toLowerCase() != 'a') {

target = target.parentNode

}

// Paranoia check this is an A tag

if (target.nodeName.toLowerCase() != 'a') return

// Find the <a name> tag corresponding to this href

// First strip off the hash (first character)

anchor = target.hash.substr(1)

// Now loop all A tags until we find one with that name

var allLinks = document.getElementsByTagName('a')

var destinationLink = null

for (var i=0i<allLinks.lengthi++) {

var lnk = allLinks[i]

if (lnk.name && (lnk.name == anchor)) {

destinationLink = lnk

break

}

if (!destinationLink) destinationLink = document.getElementById(anchor)

// If we didn't find a destination, give up and let the browser do

// its thing

if (!destinationLink) return true

// Find the destination's position

var destx = destinationLink.offsetLeft

var desty = destinationLink.offsetTop

var thisNode = destinationLink

while (thisNode.offsetParent &&

(thisNode.offsetParent != document.body)) {

thisNode = thisNode.offsetParent

destx += thisNode.offsetLeft

desty += thisNode.offsetTop

}

// Stop any current scrolling

clearInterval(ss.INTERVAL)

cypos = ss.getCurrentYPos()

ss_stepsize = parseInt((desty-cypos)/ss.STEPS)

ss.INTERVAL =

setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10)

// And stop the actual click happening

if (window.event) {

window.event.cancelBubble = true

window.event.returnValue = false

}

if (e && e.preventDefault && e.stopPropagation) {

e.preventDefault()

e.stopPropagation()

}

scrollWindow: function(scramount,dest,anchor) {

wascypos = ss.getCurrentYPos()

isAbove = (wascypos < dest)

window.scrollTo(0,wascypos + scramount)

iscypos = ss.getCurrentYPos()

isAboveNow = (iscypos < dest)

if ((isAbove != isAboveNow) || (wascypos == iscypos)) {

// if we've just scrolled past the destination, or

// we haven't moved from the last scroll (i.e., we're at the

// bottom of the page) then scroll exactly to the link

window.scrollTo(0,dest)

// cancel the repeating timer

clearInterval(ss.INTERVAL)

// and jump to the link directly so the URL's right

location.hash = anchor

}

getCurrentYPos: function() {

if (document.body && document.body.scrollTop)

return document.body.scrollTop

if (document.documentElement && document.documentElement.scrollTop)

return document.documentElement.scrollTop

if (window.pageYOffset)

return window.pageYOffset

return 0

addEvent: function(elm, evType, fn, useCapture) {

// addEvent and removeEvent

// cross-browser event handling for IE5+, NS6 and Mozilla

// By Scott Andrew

if (elm.addEventListener){

elm.addEventListener(evType, fn, useCapture)

return true

} else if (elm.attachEvent){

var r = elm.attachEvent("on"+evType, fn)

return r

} else {

alert("Handler could not be removed")

}

ss.STEPS = 25

ss.addEvent(window,"load",ss.fixAllLinks)

</script>

技术文章 >web前端 >html教程

求助：CSS超链接，选中中再点击其它地方，设置的选中样式就消失了。_html/css_WEB-ITnose

2016-06-24 12:16:52原创579

CSS设置：

#page a:hover {text-decoration:nonecolor:red}

#page a:active {text-decoration:underlinecolor:red}

选中后，再点击其它空白地方，设置的 a:active样式就消失了。应该是该样式一直保留到点击同一级别的其它链接才对啊...

回复讨论(解决方案)

伪类，兼容性不是很好。你可以用 js 来做一个点击后增加一个 class 上去。

a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF}/* 当有鼠标悬停在链接上 */a:active {color: #0000FF} /* 被选择的链接 */

这个只有被激活状态的时候，才算符合条件吧

CSS code?1234a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */a:active {color: #0000FF} /* 被选择的链接 */

这个只有被激……

这个在点击链接的时候不就算激活吗啊？

这个应该是点击的那一下，鼠标没有松开之前。。正在操作的过程中。。。。

好吧，那请问下，怎么改呢？

改成a:visited不能达到你要的效果吗？

或者，如果你要的效果比较多的话，可以组合使用啊

比如a:visited:hover，这样表示已经访问过的链接，再有鼠标悬浮时的情况。

按照自己的情况自己组合试试。

不过，如果操作次数多了话，最好清一下缓存，因为浏览器会记住你之前访问的网站，刷新之后，还是会显示已经访问过的情况。

改成a:visited不能达到你要的效果吗？

或者，如果你要的效果比较多的话，可以组合使用啊

比如a:visited:hover，这样表示已经访问过的链接，再有鼠标悬浮时的情况。