資訊專欄INFORMATION COLUMN
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
歡迎討論，如需轉載請注明出處，謝謝
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115432.html
摘要：那該如何是好原題給出思路是讓事件負責標記按鍵就好了，而方向鍵的事件處理使用設個周期比較小的定時器持續監聽，由于周期小，長按時就會立刻執行相應的事件處理，效果更加流暢。閃爍實現效果閃爍簡單的一個定時器應用，用或都可以實現。 0x1模擬select控件 實現效果：5-01模擬select控件 比較簡單的點擊事件處理，也就處理點擊選擇框展示菜單、點擊菜單選擇、點擊頁面任意角落隱藏菜單這三件事...
摘要：前言本文是接續系列教程的，主要是介紹顏色系統在中的應用。本來是與一起成文的，因為莫名其妙的字數限制只能分割放送了。提供可以獲取畫布上任何一個像素，并可以自由的操作他們。繪制指定的位置繪制對象的內容。 前言 本文是接續系列教程的extra1，主要是介紹顏色系統在canvas中的應用。 本來是與extra1一起成文的，因為segmentfault莫名其妙的字數限制bug只能分割放送了。 ...
閱讀 1836·2023-04-25 14:49
閱讀 3116·2021-09-30 09:47
閱讀 3099·2021-09-06 15:00
閱讀 2224·2019-08-30 13:16
閱讀 1435·2019-08-30 10:48
閱讀 2667·2019-08-29 15:11
閱讀 1286·2019-08-26 14:06
閱讀 1662·2019-08-26 13:30
