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 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
php实现的RSS生成类实例
2015/04/23 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
基于php判断客户端类型
2016/10/14 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python super的使用方法及实例详解
2019/09/25 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
淘宝好评语句大全
2014/12/31 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python