本文实例讲述了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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleV字形特效/title脚本src=' http : jquery 1。3 .2 .js '/脚本/头体看不到效果的需要刷新一下.脚本类型='text/javascript' //声明变量var Tong={ }；童V={ config: { //每一个的距离space:4，//V形的最大长度和宽度高： 1000，宽： 130，高： 10，宽： 10 }，创建：函数(config，xcolor，ycolor) { if(！config) { config=童. V.config} //1。跟据总的目标V字高度和宽度还有每一层的间隔计算出层数//2.跟据宽度计算出循环//得到所有的行数因为每次都是var行=童V.config.width /(童v . config。空间* 2)；var content div=jQuery(' div div ')；//取整数丢掉小数部分row=ParSeint(行。ToString())；for(I=0；我划船；i ) { var margin=i * Tong .v .配置空间；定义变量空间=parsent(童.v .配置宽度-边距* 2)；var div=Tong .五. CreateEl(边距，0,空格，童. V.config，xcolor，y color)；内容分区。追加(div)；} //用于返回内容数据功能返回content div//jQuery(document . body).追加(div)；} , //创建一个原素CreateEl:函数(x，y，s，config，xcolor，y color){ var panel=jQuery(文档。create element(' div ')；var left div=jQuery(文档。创建元素(' div ')；var right div=jQuery(文档。创建元素(' div ')；var空间div=jQuery(文档。创建元素(' div ')；//设置CSS panel.css({ clear: 'both '，})；左div。CSS({ marginto p : 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？y color : ' # ff 0000 ' })；spacediv.css({ float: '左，textAlign: '中，backgroundColor: '#00ff00 '，textSize:'15px '，width: s 'px '，height : config。El高度' px ' })；空间司。hover(function(){ this。风格。width=(这个。偏移量=50？50 :这个。offsetwithts)' px '；}，function(){ this。风格。width=ParSeint(jQuery(this)).attr(' s ')“px”；});spacediv.attr('s '，s)；spacediv.htmlpanel。追加(左div)；面板。追加(空格div)；面板。追加(右div)；返回面板；}，Test : function(){ var xcol=' # 06C '；var ycol=' # ff 0000 for(x=0；x3；x ) { var item=Tong .五、创作（童. V.config、xcol、ycol)；var temp=xcolxcol=ycoll=Tempjquery(' d ' x).追加（项);}//tong。五、创建()；} };jQuery(function () { //Tong .五、创建();童。五、测试();} );/script div id=' d0 '/div div id=' D1 '/div div id=' D2 '/div/div/body/html希望本文所述对大家jQuery程序设计有所帮助。