jquery实现的V字形显示效果代码
更新时间：2015年10月27日 11:21:17 作者：企鹅
这篇文章主要介绍了jquery实现的V字形显示效果代码,涉及jQuery数学运算及样式操作的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
下面小编就为大家带来一篇引用jquery框架后出错的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了使用jquery库实现电梯导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
下面就说下简单的返回顶部效果的代码实现，附注释说明，最简单的静态返回顶部，点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部2013-04-04
jQuery EasyUI之验证框validatebox实例详解
本文通过实例代码给大家讲解了jQuery EasyUI之验证框validatebox知识，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-04-04
这篇文章主要为大家详细介绍了Jquery实现下拉菜单案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这几天在学习jQuery插件的写法，搜索了一些资料，包括jQuery官方的示例，但发现描述的并不是很清晰。最后，终于搜索到一篇讲解比较清晰的文章，这里自己总结了一下，并以一个具体的示例来说明jQuery插件的写法2013-06-06
近期有项目需求是这样的，需要根据用户选择的选项给出相应的提示，本文给大家介绍基于jQuery实现复选框是否选中进行答题提示，对jquery复选框是否选中相关知识感兴趣的朋友一起看看吧2015-12-12
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts实现的MSBar3D图效果,结合完整实例形式分析了jQuery使用FusionCharts载入xml数据绘制MSBar3D图的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
页面a.html域名为www.a.com嵌入页面http://www.b.com/b.html,b.html要调用a.html中的js函数，由于两个页面不在一个域中，会提示没权限。如何解决该问题呢，请看下面示例代码。2015-03-03
基于jquery trigger函数无法触发a标签的两种解决方法
下面小编就为大家分享一篇基于jquery trigger函数无法触发a标签的两种解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
最新评论