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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 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
PHP4之真OO
2006/10/09 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
php类自动加载器实现方法
2015/07/28 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
angular动态表单制作
2018/02/23 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python import用法以及与from...import的区别
2015/05/28 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
给国外客户的邀请函
2014/01/30 职场文书
十一酒店活动方案
2014/02/20 职场文书
运动会演讲稿100字
2014/08/25 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
浅谈Python协程asyncio
2021/06/20 Python
压缩Redis里的字符串大对象操作
2021/06/23 Redis
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL