jquery实现的V字形显示效果代码

本文实例讲述了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"））;//设置CSSpanel.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程序设计有所帮助。