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

tinna 发布于2019-08-30 13:16 / 2511人阅读

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

js代码：
//跟随移动

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代码：

.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",
});

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115432.html

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

demo地址：http://www.dtzhuanjia.com/pri...html：菜单菜单1 菜单2 菜单3 菜单4 菜单5 ...

heartFollower 2019-08-21 11:17 评论0 收藏0
分享一个色块跟随鼠标移动的菜单代码

demo地址：http://www.dtzhuanjia.com/pri...html：菜单菜单1 菜单2 菜单3 菜单4 菜单5 ...

陆斌 2019-08-01 16:05 评论0 收藏0
原生js练习题---第五课

摘要：那该如何是好原题给出思路是让事件负责标记按键就好了，而方向键的事件处理使用设个周期比较小的定时器持续监听，由于周期小，长按时就会立刻执行相应的事件处理，效果更加流畅。闪烁实现效果闪烁简单的一个定时器应用，用或都可以实现。 0x1模拟select控件实现效果：5-01模拟select控件比较简单的点击事件处理，也就处理点击选择框展示菜单、点击菜单选择、点击页面任意角落隐藏菜单这三件事...

winterdawn 2019-08-19 18:11 评论0 收藏0
【30分钟学完】canvas动画|游戏基础(extra1-1)：美图我也行

摘要：前言本文是接续系列教程的，主要是介绍颜色系统在中的应用。本来是与一起成文的，因为莫名其妙的字数限制只能分割放送了。提供可以获取画布上任何一个像素，并可以自由的操作他们。绘制指定的位置绘制对象的内容。前言本文是接续系列教程的extra1，主要是介绍颜色系统在canvas中的应用。本来是与extra1一起成文的，因为segmentfault莫名其妙的字数限制bug只能分割放送了。 ...

G9YH 2019-08-02 16:01 评论0 收藏0