jquery实现的V字形显示效果代码
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了jquery实现的V字形显示效果代码,涉及jQuery数学运算及样式操作的相关技巧,需要的朋友可以参考下
本文实例讲述了jquery实现的V字形显示效果代码。分享给大家供大家参考,具体如下:
这里介绍jquery实现的V字形小效果,希望大家喜欢。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
<!DOCTYPE html> <html xmlns="http://.w3./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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程