jquery實現(xiàn)的V字形顯示效果代碼

更新時間：2015年10月27日 11:21:17 作者：企鵝

這篇文章主要介紹了jquery實現(xiàn)的V字形顯示效果代碼,涉及jQuery數(shù)學運算及樣式操作的相關技巧,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)的V字形顯示效果代碼。分享給大家供大家參考，具體如下：

這里介紹jquery實現(xiàn)的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.跟據(jù) 總的目標V字高度和寬度 還有每一層的間隔 計算出層數(shù)
    //2.跟據(jù) 寬度計算出循環(huán)
    //得到所有的行數(shù) 因為每次都是
    var row = Tong.V.config.width / (Tong.V.config.space * 2);
    var contentDiv = jQuery("<div><div>");
    //取整數(shù) 丟掉小數(shù)部分
    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);
    }
    //用于返回內容數(shù)據(jù)功能
    return contentDiv;
    //  jQuery(document.body).append(div);
   }
   ,
   //創(chuàng)建一個原素
   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框架后出錯的解決方法
下面小編就為大家?guī)硪黄胘query框架后出錯的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
使用jquery庫實現(xiàn)電梯導航效果
這篇文章主要為大家詳細介紹了使用jquery庫實現(xiàn)電梯導航效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
網(wǎng)頁中返回頂部代碼(多種方法)另附注釋說明
下面就說下簡單的返回頂部效果的代碼實現(xiàn)，附注釋說明，最簡單的靜態(tài)返回頂部，點擊直接跳轉頁面頂部及用js模擬滾動效果上滑至頂部
2013-04-04
jQuery EasyUI之驗證框validatebox實例詳解
本文通過實例代碼給大家講解了jQuery EasyUI之驗證框validatebox知識，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
2017-04-04
Jquery實現(xiàn)下拉菜單案例
這篇文章主要為大家詳細介紹了Jquery實現(xiàn)下拉菜單案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
jQuery插件的寫法分享
這幾天在學習jQuery插件的寫法，搜索了一些資料，包括jQuery官方的示例，但發(fā)現(xiàn)描述的并不是很清晰。最后，終于搜索到一篇講解比較清晰的文章，這里自己總結了一下，并以一個具體的示例來說明jQuery插件的寫法
2013-06-06
基于jQuery實現(xiàn)復選框是否選中進行答題提示
近期有項目需求是這樣的，需要根據(jù)用戶選擇的選項給出相應的提示，本文給大家介紹基于jQuery實現(xiàn)復選框是否選中進行答題提示，對jquery復選框是否選中相關知識感興趣的朋友一起看看吧
2015-12-12
jQuery插件FusionCharts實現(xiàn)的MSBar3D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的MSBar3D圖效果,結合完整實例形式分析了jQuery使用FusionCharts載入xml數(shù)據(jù)繪制MSBar3D圖的相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery實現(xiàn)跨域iframe接口方法調用
頁面a.html域名為www.a.com嵌入頁面http://www.b.com/b.html,b.html要調用a.html中的js函數(shù)，由于兩個頁面不在一個域中，會提示沒權限。如何解決該問題呢，請看下面示例代碼。
2015-03-03
基于jquery trigger函數(shù)無法觸發(fā)a標簽的兩種解決方法
下面小編就為大家分享一篇基于jquery trigger函數(shù)無法觸發(fā)a標簽的兩種解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01