V字形特效窗口

2024-09-05 12:18:32

字體：大中小

來源：轉載

供稿：網友

jquery實現的V字形特效，一個小效果，希望大家喜歡。

<!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="/ajaxjs/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   class="msuwoss"   id="d0"></div>        <div   class="iii8o0e"   id="d1"></div>        <div   class="s8ck8u4"   id="d2"></div>    </div></body></html>

上一篇：在頁面中控制網頁最大化、最小化、關閉

下一篇：獲取上傳圖片的大小及長、寬像素