分享一個(gè)色塊跟隨鼠標(biāo)移動(dòng)的菜單代碼

陸斌發(fā)布于2019-08-01 16:05 / 455人閱讀

demo地址：
http://www.dtzhuanjia.com/pri...
html：

js代碼：
//跟隨移動(dòng)

function HoverChange(obj){
    _this = this;
    _this.obj = obj||{};
    _this.type = obj.hcType;//模塊類型[block|line]
    _this.hcWidth = obj.hcWidth||"100px";//塊寬度
    _this.hcBg = obj.hcBg||"#0096f0";//塊顏色
    _this.hcDuration = obj.hcDuration||"0.5s";//塊速度
    
    //綁定事件相關(guān)
    _this.container = ".ul-"+_this.type,//當(dāng)前容器
    _this.curLi = _this.container+" li",//移入的li
    _this.curBlock = _this.container+" .curBlock",//色塊
    _this.method = "_this.changing(_this)";//對應(yīng)方法   
    
    //初始化方法
    _this.init(_this.curLi,_this.curBlock);
}
HoverChange.prototype ={
    init : function(li,block){
        $(block).css({
            "width" : _this.hcWidth,
            "background-color": _this.hcBg,
            "transition-duration" : _this.hcDuration,
            "margin-left" : ($(li).width()-parseInt(_this.hcWidth))*0.5+"px"
        });
        $(li).hover(function(){
            _this.index = $(this).index();//當(dāng)前l(fā)i的索引
            _this.liWidth = $(this).width();//當(dāng)前l(fā)i的寬度
            _this.changing(block);
        },function(){
            _this.index = $(this).index();//當(dāng)前l(fā)i的索引
            _this.liWidth = $(this).width();//當(dāng)前l(fā)i的寬度
            _this.changing(block);     
        });  
    },
    changing : function(block){
        //塊狀
        $(block).addClass("active").css({
            "left":_this.liWidth*_this.index+"px",
        });
    }
}

css代碼：

.hc-ul{width:1200px;margin:0 auto;padding:0;}
.hc-ul{background:#f1f1f1;height:50px;position:relative;}
.hc-ul li{float:left;width:20%;text-align:center;cursor:pointer;height: 50px;line-height: 50px;position:relative;z-index:999;list-style-type:none;}
.hc-ul .curBlock {left:0;border-radius:100px;background-color:transparent;position:absolute;transition:left;}

/*塊*/
.ul-block .curBlock{height:50px;}
/*線*/
.ul-line .curBlock{bottom:1px;height:2px;}

說明：
html代碼中：

var hc = new HoverChange({
    hcWidth : "200px",
    hcType : "block",
    hcBg : "#ff5943",
    hcDuration : "0.6s",
});

有四個(gè)參數(shù)：分別是色塊寬度(100px)，類型(block)，背景顏色("#0096f0")，速度("0.5s")，括號中為默認(rèn)值，可以按照自己需求填寫或不填。
由于代碼用jquery編寫，所以需要引入jquery。在chrome內(nèi)核瀏覽器測試無問題。

圖中上行類型為block，下行類型為line

歡迎討論，如需轉(zhuǎn)載請注明出處，謝謝

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50289.html

發(fā)表評論

登陸后可評論

0條評論

陸斌

男|高級講師

我要關(guān)注我要私信

TA的文章

融億云：限時(shí)秒殺,香港cn2云服務(wù)器僅9.9元/首月;99元/首年起

閱讀 3750·2021-09-22 10:57
使用css時(shí)，可能會(huì)出錯(cuò)的兩個(gè)地方

閱讀 1921·2019-08-30 15:55
如何獲取籃球比賽實(shí)時(shí)賠率

閱讀 2711·2019-08-30 15:44
對列布局columns的理解

閱讀 1739·2019-08-30 15:44
在線工具收集

閱讀 1885·2019-08-30 15:44
水平、垂直居中方式總結(jié)

閱讀 2256·2019-08-30 12:49
瀏覽器渲染原理及流程

閱讀 1060·2019-08-29 18:47
css實(shí)現(xiàn)居中、自適應(yīng)

閱讀 3143·2019-08-29 16:15

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

分享一個(gè)色塊跟隨鼠標(biāo)移動(dòng)的菜單代碼

相關(guān)文章