jquery實(shí)現(xiàn)的V字形顯示效果代碼
本文實(shí)例講述了jquery實(shí)現(xiàn)的V字形顯示效果代碼。分享給大家供大家參考,具體如下:
這里介紹jquery實(shí)現(xiàn)的V字形小效果,希望大家喜歡。
運(yùn)行效果截圖如下:
在線演示地址如下:
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: { //每一個(gè)的距離 space:4, //V 形的最大長(zhǎng)度和寬度 height: 1000, width: 130, elHeight: 10, elWidth: 10, }, Create: function (config, xcolor, ycolor) { if (!config) { config = Tong.V.config; } //1.跟據(jù) 總的目標(biāo)V字高度和寬度 還有每一層的間隔 計(jì)算出層數(shù) //2.跟據(jù) 寬度計(jì)算出循環(huán) //得到所有的行數(shù) 因?yàn)槊看味际? 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); } //用于返回內(nèi)容數(shù)據(jù)功能 return contentDiv; // jQuery(document.body).append(div); } , //創(chuàng)建一個(gè)原素 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")); //設(shè)置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>
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Jquery中使用show()與hide()方法動(dòng)畫顯示和隱藏圖片
- jQuery+Ajax+PHP+Mysql實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)實(shí)例講解
- jQuery實(shí)現(xiàn)點(diǎn)擊小圖片淡入淡出顯示大圖片特效
- jQuery仿淘寶網(wǎng)產(chǎn)品品牌隱藏與顯示效果
- jQuery實(shí)現(xiàn)點(diǎn)擊小圖顯示大圖代碼分享
- jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示下劃線的漸變下拉菜單效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示(兩種方法)
- jQuery地圖map懸停顯示省市代碼分享
- jQuery實(shí)現(xiàn)高亮顯示網(wǎng)頁(yè)關(guān)鍵詞的方法
相關(guān)文章
JQuery中DOM加載與事件執(zhí)行實(shí)例分析
這篇文章主要介紹了JQuery中DOM加載與事件執(zhí)行,實(shí)例分析了jQuery中DOM加載及事件執(zhí)行的原理與實(shí)現(xiàn)方法,并補(bǔ)充說(shuō)明了windows.onload方法和$(document).ready()方法的區(qū)別,需要的朋友可以參考下2015-06-06jQuery實(shí)現(xiàn)下拉菜單(內(nèi)容為時(shí)間)的實(shí)時(shí)更新及圖表的隨動(dòng)更新的方法
這篇文章主要介紹了實(shí)現(xiàn)下拉菜單(內(nèi)容為時(shí)間)的實(shí)時(shí)更新及圖表的隨動(dòng)更新的方法的相關(guān)資料,需要的朋友可以參考下2016-07-07jQuery實(shí)現(xiàn)有動(dòng)畫淡出效果的二級(jí)折疊菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)有動(dòng)畫淡出效果的二級(jí)折疊菜單代碼,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10jQuery實(shí)現(xiàn)信息提示框(帶有圓角框與動(dòng)畫)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)信息提示框效果,帶有圓角框與動(dòng)畫功能,點(diǎn)擊上面按鈕實(shí)現(xiàn)對(duì)應(yīng)文字的漸變顯示效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08詳解jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法
這篇文章主要介紹了jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法,需要的朋友可以參考下2015-11-11jquery圖片不完全按比例自動(dòng)縮小的簡(jiǎn)單代碼
開發(fā)前期用自動(dòng)生產(chǎn) 固定大小的圖片 進(jìn)行 顯示,發(fā)現(xiàn)不能滿足,在前期的時(shí)候把保存了原圖,現(xiàn)在只能顯示原圖,原圖由于上傳時(shí)候沒(méi)有做任何限制所有要使用 圖片不完全按比例縮小,下面是代碼2013-07-07Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
Lazy Load 是一個(gè)用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁(yè)面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的2012-10-10Iscrool下拉刷新功能實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)?lái)一篇Iscrool下拉刷新功能實(shí)現(xiàn)方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06