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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
JS开发常用工具函数(小结)
Jul 04 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正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php解析json数据实例
2014/08/19 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
JS实现电商放大镜效果
2017/08/24 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Golang与python线程详解及简单实例
2017/04/27 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python设置环境变量的作用和实例
2019/07/09 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
优秀中学生事迹材料
2014/01/31 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
教师辞职书范文
2015/02/26 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis