国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

分享一個色塊跟隨鼠標移動的菜單代碼

heartFollower / 934人閱讀

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




    
    
    菜單    
    
    
    


    
    
  • 菜單1
  • 菜單2
  • 菜單3
  • 菜單4
  • 菜單5
  • 菜單1
  • 菜單2
  • 菜單3
  • 菜單4
  • 菜單5

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

歡迎討論,如需轉載請注明出處,謝謝

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86510.html

相關文章

  • 分享一個色塊跟隨鼠標移動菜單代碼

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

    tinna 評論0 收藏0
  • 分享一個色塊跟隨鼠標移動菜單代碼

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

    陸斌 評論0 收藏0
  • 原生js練習題---第五課

    摘要:那該如何是好原題給出思路是讓事件負責標記按鍵就好了,而方向鍵的事件處理使用設個周期比較小的定時器持續監聽,由于周期小,長按時就會立刻執行相應的事件處理,效果更加流暢。閃爍實現效果閃爍簡單的一個定時器應用,用或都可以實現。 0x1模擬select控件 實現效果:5-01模擬select控件 比較簡單的點擊事件處理,也就處理點擊選擇框展示菜單、點擊菜單選擇、點擊頁面任意角落隱藏菜單這三件事...

    winterdawn 評論0 收藏0
  • 【30分鐘學完】canvas動畫|游戲基礎(extra1-1):美圖我也行

    摘要:前言本文是接續系列教程的,主要是介紹顏色系統在中的應用。本來是與一起成文的,因為莫名其妙的字數限制只能分割放送了。提供可以獲取畫布上任何一個像素,并可以自由的操作他們。繪制指定的位置繪制對象的內容。 前言 本文是接續系列教程的extra1,主要是介紹顏色系統在canvas中的應用。 本來是與extra1一起成文的,因為segmentfault莫名其妙的字數限制bug只能分割放送了。 ...

    G9YH 評論0 收藏0

發表評論

0條評論

heartFollower

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<