jquery实现的V字形显示效果代码


Posted in Javascript onOctober 27, 2015

本文实例讲述了jquery实现的V字形显示效果代码。分享给大家供大家参考,具体如下:

这里介绍jquery实现的V字形小效果,希望大家喜欢。

运行效果截图如下:

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="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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
jQuery拖动图片删除示例
May 10 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 #Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 #Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 #Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 #Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 #Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 #Javascript
jQuery无刷新分页完整实例代码
Oct 27 #Javascript
You might like
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
node.js超时timeout详解
2014/11/26 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
浅析Python中的for 循环
2016/06/09 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
黄河象教学反思
2014/02/10 职场文书
银行求职信
2014/05/31 职场文书
英语系本科生求职信
2014/07/15 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis
Consul在linux环境的集群部署
2022/04/08 Servers
Pandas 数据编码的十种方法
2022/04/20 Python