V字形特效窗口

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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 type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.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>

​x
 
<!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 type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
看不到效果 的需要刷新一下...
    <script type="text/javascript">
        //声明变量
        var Tong = {};
        Tong.V = {
            config: {
                //每一个的距离

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

V字形特效窗口

分类

网站常用

描述

jquery实现的V字形特效，一个小效果，希望大家喜欢。