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

2019-11-20 11:23:46

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jquery实现的V字形显示效果代码。分享给大家供大家参考，具体如下：

这里介绍jquery实现的V字形小效果，希望大家喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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结合CSS制作动态的下拉菜单

下一篇：JS基于Ajax实现的网页Loading效果代码