border流光效果，js通用，兼容ie7+，火狐，谷歌

html

<div id="box"></div>

css

#box{
     width: 200px;
     height: 200px;
     border:3px solid #eee;/* 必要条件 */
     position: absolute;/* 必要条件 */
     left:600px;
     top:200px;
}

此时页面上是一个边框为3px的#eee的200px的方形

js

$(‘#box‘).mouseover(function(){
    borderChange(‘#box‘,true,‘orange‘,1)
})
$(‘#box‘).mouseout(function(){
    borderChange(‘#box‘,false,‘orange‘,1)
})

borderChange()

// 通过js设置borderhover流光效果。
// 要求：1，hover元素需设置定位；
// 2，hover元素需设置border
var changeSwitch = false; //创建四个边框div的开关
var childW3,childH4,HoverW1;// 创建时第三个子div的宽，创建第四个子div的高，hover时第一个子div的宽
/*
borderChange鼠标hover元素时触发的函数
cName为hover元素的class名或Id名,格式例如：‘.box‘，‘#box‘,string
open:移入true，移出false，必填，Boolean
AfterColor：为移入时的边框颜色，必填，string
time就是动画执行时间单位s秒，格式例如：1s ,选填,number
timing_function是速度曲线，值详见https://www.runoob.com/cssref/css3-pr-transition-timing-function.html，选填，string
*/
function borderChange(cName,open,AfterColor,time,timing_function){
    if(time == undefined){
        time = 0.5;
    }
    if(timing_function == undefined){
        timing_function = ‘ease-in‘;
    }
    childW3 = parseInt(getStyle(cName,‘borderLeftWidth‘))*2+$(cName).width();
    childH4 = parseInt(getStyle(cName,‘borderLeftWidth‘))+$(cName).height();
    HoverW1 = parseInt(getStyle(cName,‘borderLeftWidth‘))+$(cName).width();
    HoverH2 = parseInt(getStyle(cName,‘borderLeftWidth‘))*2+$(cName).height();
    if(changeSwitch == false){
        var divChild = ‘‘;
        //上边
        divChild += ‘<div class="borderJS1" style="width: 0;height: 0;left:-‘+ getStyle(cName,‘borderLeftWidth‘) +‘;top:-‘+ getStyle(cName,‘borderLeftWidth‘) +‘;border-top:‘+ getStyle(cName,‘borderLeftWidth‘) +‘ solid ‘+ AfterColor +‘;position:absolute;"></div>‘
        //右边
        divChild += ‘<div class="borderJS2" style="width: 0;height: 0;left:‘+ $(cName).width() +‘px;top:-‘+ getStyle(cName,‘borderLeftWidth‘) +‘;border-left:‘+ getStyle(cName,‘borderLeftWidth‘) +‘ solid ‘+ AfterColor +‘;position:absolute;"></div>‘
        //下边
        divChild += ‘<div class="borderJS3" style="width:‘+ childW3+‘px;left:-‘+ getStyle(cName,‘borderLeftWidth‘) +‘;top:‘+ $(cName).height() +‘px;border-top:‘+ getStyle(cName,‘borderLeftWidth‘) +‘ solid ‘+ $(cName).css(‘borderLeftColor‘) +‘;position:absolute;"></div>‘
        //左边
        divChild += ‘<div class="borderJS4" style="height:‘+ childH4 +‘px;left:-‘+ getStyle(cName,‘borderLeftWidth‘) +‘;top:-‘+ getStyle(cName,‘borderLeftWidth‘) +‘;border-left:‘+ getStyle(cName,‘borderLeftWidth‘) +‘ solid ‘+ $(cName).css(‘borderLeftColor‘) +‘;position:absolute;"></div>‘
        changeSwitch = true;
        $(cName).append(divChild)
    }
    $(cName).css({
        ‘border-bottom‘:getStyle(cName,‘borderLeftWidth‘)+‘ solid ‘+ AfterColor +‘‘,
        ‘border-left‘:getStyle(cName,‘borderLeftWidth‘)+‘ solid ‘+ AfterColor +‘‘
    })
    if(open == true){
        setTimeout(function(){
            $(‘.borderJS1‘).css({‘width‘:HoverW1+‘px‘,‘transition‘:‘border-top ‘+ time +‘s ‘+ timing_function +‘ 0s,width ‘+ time +‘s ‘+ timing_function +‘ 0s‘})
            $(‘.borderJS2‘).css({‘height‘:HoverH2+‘px‘,‘transition‘:‘border-left ‘+ time +‘s ‘+ timing_function +‘ 0s,height ‘+ time +‘s ‘+ timing_function +‘ 0s‘})
            $(‘.borderJS3‘).css({‘width‘:‘0px‘,‘transition‘:‘width ‘+ time +‘s ‘+ timing_function +‘ 0s‘})
            $(‘.borderJS4‘).css({‘height‘:‘0px‘,‘transition‘:‘height ‘+ time +‘s ‘+ timing_function +‘ 0s‘,})
        },10)
    }else{
        setTimeout(function(){
            $(‘.borderJS1‘).css({
                ‘width‘: ‘0‘,
                ‘height‘: ‘0‘,
                ‘left‘:-getStyle(cName,‘borderLeftWidth‘),
                ‘top‘:-getStyle(cName,‘borderLeftWidth‘),
                ‘border-top‘:getStyle(cName,‘borderLeftWidth‘) +‘ solid ‘+ AfterColor +‘‘,
                ‘position‘:‘absolute‘
            })
            $(‘.borderJS2‘).css({
                ‘width‘: ‘0‘,
                ‘height‘: ‘0‘,
                ‘left‘:$(cName).width() +‘px‘,
                ‘top‘:-getStyle(cName,‘borderLeftWidth‘),
                ‘border-left‘:getStyle(cName,‘borderLeftWidth‘) +‘ solid ‘+ AfterColor +‘‘,
                ‘position‘:‘absolute‘
            })
            $(‘.borderJS3‘).css({
                ‘width‘:childW3+‘px‘,
                ‘left‘:-getStyle(cName,‘borderLeftWidth‘),
                ‘top‘:$(cName).height() +‘px‘,
                ‘border-top‘:getStyle(cName,‘borderLeftWidth‘) +‘ solid ‘+$(cName).css(‘borderRightColor‘),
                ‘position‘:‘absolute‘
            })
            $(‘.borderJS4‘).css({
                ‘height‘:childH4 +‘px‘,
                ‘left‘:-getStyle(cName,‘borderLeftWidth‘),
                ‘top‘:-getStyle(cName,‘borderLeftWidth‘),
                ‘border-left‘:getStyle(cName,‘borderLeftWidth‘) +‘ solid ‘+$(cName).css(‘borderRightColor‘),
                ‘position‘:‘absolute‘
            })
        },10)
    }
}

此时还不可以说做完了，需要做兼容，getStyle（）函数在borderChange（）函数中会使用

// 获取元素属性值的兼容写法
function getStyle(cName,attr){
    if(document.querySelector(cName).currentStyle){
        //IE,opera
        return document.querySelector(cName).currentStyle[attr];
    }else{
        //非IE，重点在于ff浏览器需要明确获取的元素属性，例如在google上获取，borderColor 在火狐上就得borderLeftColor
        console.log(getComputedStyle(document.querySelector(cName))[attr]);
        return getComputedStyle(document.querySelector(cName))[attr];
    }
}

现在就做好了一个效果单一，但是可以套用border流光效果。

原文地址：https://www.cnblogs.com/YvanNovEmotion/p/12016556.html