PHP:dirname()的用法_Filesystem函數
786
2023-12-15
本文實例講述了jquery實現的V字形顯示效果代碼。分享給大家供大家參考，具體如下：
這里介紹jquery實現的V字形小效果，希望大家喜歡。
運行效果截圖如下：
在線演示地址如下：
http://demo.gimoo.net/js/2015/jquery-show-v-txt-style-codes/
具體代碼如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>V字形特效</title>
<script src="http://www.gimoo.net/t/1904/jquery1.3.2.js"></script>
</head>
<body>
看不到效果 的需要刷新一下...
<script type="text/javascript">
//聲明變量
var Tong = {};
Tong.V = {
config: {
//每一個的距離
space:4,
//V 形的最大長度和寬度
height: 1000,
width: 130,
elHeight: 10,
elWidth: 10,
},
Create: function (config, xcolor, ycolor) {
if (!config) {
config = Tong.V.config;
}
//1.跟據 總的目標V字高度和寬度 還有每一層的間隔 計算出層數
//2.跟據 寬度計算出循環
//得到所有的行數 因為每次都是
var row = Tong.V.config.width / (Tong.V.config.space * 2);
var contentDiv = jQuery("<div><div>");
//取整數 丟掉小數部分
row = parseInt(row.toString());
for (i = 0; i < row; i++) {
var margin = i * Tong.V.config.space;
var space = parseInt(Tong.V.config.width - margin * 2);
var div = Tong.V.CreateEl(margin, 0, space, Tong.V.config, xcolor, ycolor);
contentDiv.append(div);
}
//用于返回內容數據功能
return contentDiv;
// jQuery(document.body).append(div);
}
,
//創建一個原素
CreateEl: function (x, y, s, config, xcolor, ycolor) {
var panel = jQuery(document.createElement("div"));
var leftdiv = jQuery(document.createElement("div"));
var rightdiv = jQuery(document.createElement("div"));
var spacediv = jQuery(document.createElement("div"));
//設置CSS
panel.css({
clear: 'both',
});
leftdiv.css({
marginTop: 4 + 'px',
float: 'left',
marginLeft: x + 'px',
width: config.elWidth + 'px',
height: config.elHeight + 'px',
border: "1px solid ",
backgroundColor: xcolor ? xcolor : "#06C"
});
rightdiv.css({
float: 'left',
marginTop: 4 + 'px',
marginLeft: y + 'px',
width: config.elWidth + 'px',
height: config.elHeight + 'px',
border: "1px solid ",
backgroundColor: ycolor ? ycolor : "#ff0000"
});
spacediv.css({
float: 'left',
textAlign: 'center',
backgroundColor: '#00ff00',
textSize:'15px',
width: s + 'px',
height: config.elHeight + 'px'
});
spacediv.hover(function () {
this.style.width= ( this.offsetWidth <= 50 ? 50 : this.offsetWidth)+'px';
}, function () {
this.style.width = parseInt(jQuery(this).attr("s") )+ "px";
});
spacediv.attr("s", s);
spacediv.html(s);
panel.append(leftdiv);
panel.append(spacediv);
panel.append(rightdiv);
return panel;
},
Test: function () {
var xcol = "#06C";
var ycol = "#ff0000";
for (x = 0; x < 3; x++) {
var item= Tong.V.Create(Tong.V.config
,
xcol,
ycol);
var temp = xcol;
xcol = ycol;
ycol = temp;
jQuery("#d" + x).append(item);
}
//Tong.V. Create();
}
};
jQuery(
function () {
//Tong.V.Create();
Tong.V.Test();
}
);
</script>
<div>
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
希望本文所述對大家jQuery程序設計有所幫助。
