jquery實作的V字形顯示效果代碼_jquery
- WBOY原創
- 2016-05-16 15:34:481756瀏覽
本文實例講述了jquery實現的V字形顯示效果代碼。分享給大家參考，具體如下：
這裡介紹jquery實現的V字形小效果，希望大家喜歡。
運作效果截圖如下：
線上示範網址如下：
http://demo.jb51.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="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程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn