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 类定义的4种方法
Sep 12 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
Vue.js组件props数据验证实现详解
Oct 19 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读取纯真ip数据库使用示例
2014/01/26 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
python ElementTree 基本读操作示例
2009/04/09 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
Sony C++笔试题
2013/03/10 面试题
大学新生欢迎词
2014/01/10 职场文书
工作自我评价怎么写
2014/01/29 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
求职简历自我评价范例
2014/03/12 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
校园演讲稿汇总
2014/05/21 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript