CSS 最简洁hover事件的淡入淡出写法,且不占文档流位置!

Posted 2023-05-12

参考技术A 关于CSS的特效,大部分都是使用了hover事件,或者你再完成一些特殊要求的时候,你会使用mouseenter和mouseleave来代替hover,我就遇到过一种就是鼠标移开时,悬浮显示的元素依然占了文档流,而且你不能使用display:none;来隐藏他,这样的话,过渡效果会受到影响!

最简单的hover写法,淡入淡出,关键在于pointer-events的使用,保证淡入淡出都有过渡效果的同时,子元素不会被父元素hover事件所影响!

淡入淡出js轮播广告

淡入淡出js轮播广告，写法类似自动播放的tab选项卡，加入了淡入淡出效果。

js代码：

function lunbo(contClass, numArr, normalClass, hoverClass){
    function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
            node = document;
        if ( tag == null )
            tag = ‘*‘;
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\\\s)"+searchClass+"(\\\\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
            if ( pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
            }
        }
        return classElements;
    }
    var numArray = getElementsByClass(numArr),
        contArray = getElementsByClass(contClass),
        now = 0,
        len = numArray.length;
    //默认第一个显示
    numArray[0].className = hoverClass + ‘1‘;
    contArray[0].style.display = ‘block‘;
    //渐现
    function fadeIn(el){
        el.style.opacity = 0;
        el.style.filter = ‘alpha(opacity = 0)‘;
        el.style.display = ‘block‘;
        var n = 0;
        function fadeShow(){
            if (n < 1){
                n += 0.1;
                el.style.opacity = n;
                el.style.filter = ‘alpha(opacity = ‘+n*100+‘)‘;
                var setTimeId = setTimeout(fadeShow, 50);
            }else{
                el.style.opacity = 1;
                el.style.filter = ‘alpha(opacity = 100)‘;
                clearTimeout(setTimeId);
            }
        }
        fadeShow();
    }
    //渐隐
    function fadeOut(el){
        el.style.opacity = 1;
        el.style.filter = ‘alpha(opacity = 100)‘;
        var n = 1;
        function fadeHide(){
            if (n > 0){
                n -= 0.1;
                el.style.opacity = n;
                el.style.filter = ‘alpha(opacity = ‘+n*100+‘)‘;
                var setTimeId = setTimeout(fadeHide, 50);
            }else{
                el.style.opacity = 0;
                el.style.filter = ‘alpha(opacity = 0)‘;
                clearTimeout(setTimeId);
                el.style.display = ‘none‘;
            }
        }
        fadeHide();
    }
    //所有数字默认状态
    function normalNum(){
        for (var i = 0; i < len; i++){
            numArray[i].className =  normalClass + (i+1);
        }
    }
    //当前数字hover状态
    function showNum(now){
        numArray[now].className = hoverClass + (now+1);
    }
    //自动播放
    function autoPlay(){
        if (now < (len - 1)){
            normalNum();
            fadeOut(contArray[now]);
            showNum(now + 1);
            fadeIn(contArray[now + 1]);
            now += 1;
        }else{
            normalNum();
            fadeOut(contArray[now]);
            showNum(0);
            fadeIn(contArray[0]);
            now = 0;
        }
        lunboSettimeId = setTimeout(autoPlay, 3000);
    }
    lunboSettimeId = setTimeout(autoPlay, 3000);
    //点击事件
    for (var i = 0; i < len; i++){(function(i){
        numArray[i].onclick = function(){
            clearTimeout(lunboSettimeId);
            normalNum();
            fadeOut(contArray[now]);
            showNum(i);
            fadeIn(contArray[i]);
            now = i;
            lunboSettimeId = setTimeout(autoPlay, 3000);
        }
    })(i)
    }
}
lunbo(‘cont‘, ‘num‘, ‘num_normal‘, ‘num_hover‘);

参数说明：
contClass：轮播内容的class名；
numArr：所有数字样式名（附加用来获取数组的，无样式内容），也可改成小缩略图；
normalClass：数字默认样式名的前部分，如此例中数字默认样式为.num_normal1到.num_normal5，此参数传num_normal；
hoverClass：数字当前样式名的前部分，使用类似上边默认样式

html代码：

<div class="lunbo_box">
    <div class="cont"><img src="images/pic1.jpg"  /></div>
    <div class="cont"><img src="images/pic2.jpg"  /></div>
    <div class="cont"><img src="images/pic3.jpg"  /></div>
    <div class="cont"><img src="images/pic4.jpg"  /></div>
    <div class="cont"><img src="images/pic5.jpg"  /></div>
    <ul class="num_ul">
        <li class="num num_normal1"></li>
        <li class="num num_normal2"></li>
        <li class="num num_normal3"></li>
        <li class="num num_normal4"></li>
        <li class="num num_normal5"></li>
    </ul>
</div>

css代码：

div,ul,li{ margin:0; padding:0; font-size:12px;}
.lunbo_box{ position:relative; width:280px; height:210px; border:1px solid #666;}
.cont{ display:none; position:absolute; width:280px; height:210px; left:0; top:0;}
.cont img{ width:280px; height:210px;}
.num_ul{ position:absolute; width:120px; height:20px; right:10px; bottom:10px; list-style:none;}
.num_ul li{float:left; display:inline; width:21px; height:20px;margin-left:2px; cursor:pointer; overflow:hidden;}
.num_normal1,.num_normal2,.num_normal3,.num_normal4,.num_normal5,.num_hover1,.num_hover2,.num_hover3,.num_hover4,.num_hover5{background-image:url(../images/num.gif);}
.num_normal1{ background-position:0 0;}
.num_normal2{background-position:-21px 0;}
.num_normal3{background-position:-42px 0;}
.num_normal4{background-position:-63px 0;}
.num_normal5{background-position:-84px 0;}
.num_hover1{ background-position:0 -20px;}
.num_hover2{background-position:-21px -20px;}
.num_hover3{background-position:-42px -20px;}
.num_hover4{background-position:-63px -20px;}
.num_hover5{background-position:-84px -20px;}