分享一个色块跟随鼠标移动的菜单代码

时间 2019-12-12

标签分享一个跟随鼠标移动菜单代码栏目无线繁體版

原文原文链接

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>菜单</title>    
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="http://www.dtzhuanjia.com/private/plugin/menu/index.css">
</head>
<body>
    <!--块-->
    <ul class="hc-ul ul-block clearfix">        
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
        <span class="curBlock"></span>
    </ul>
    <div style="margin:20px 0;width:100%;height:1px;"></div>
    <!--线-->
    <ul class="hc-ul ul-line clearfix">        
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
        <span class="curBlock"></span>
    </ul>
    <script src="http://www.dtzhuanjia.com/js/basic/jquery.js"></script>
    <script src="http://www.dtzhuanjia.com/private/plugin/menu/index.js"></script>
    <script>
        var hc = new HoverChange({
            hcWidth : "200px",
            hcType : "block",
            hcBg : "#ff5943",
            hcDuration : "0.6s",
        });
        var hc1 = new HoverChange({
            hcType : "line",
            hcBg : "#0096f0"
        });
    </script>
</body>
</html>

js代码：
//跟随移动html

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";//块速度
    
    //绑定事件相关
    _this.container = ".ul-"+_this.type,//当前容器
    _this.curLi = _this.container+" li",//移入的li
    _this.curBlock = _this.container+" .curBlock",//色块
    _this.method = "_this.changing(_this)";//对应方法   
    
    //初始化方法
    _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();//当前li的索引
            _this.liWidth = $(this).width();//当前li的宽度
            _this.changing(block);
        },function(){
            _this.index = $(this).index();//当前li的索引
            _this.liWidth = $(this).width();//当前li的宽度
            _this.changing(block);     
        });  
    },
    changing : function(block){
        //块状
        $(block).addClass("active").css({
            "left":_this.liWidth*_this.index+"px",
        });
    }
}

css代码：jquery

.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代码中：chrome

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

有四个参数：分别是色块宽度(100px)，类型(block)，背景颜色("#0096f0")，速度("0.5s")，括号中为默认值，能够按照本身需求填写或不填。
因为代码用jquery编写，因此须要引入jquery。在chrome内核浏览器测试无问题。
浏览器

图中上行类型为block，下行类型为line测试

欢迎讨论，如需转载请注明出处，谢谢ui