jQuery实现腾讯信用界面(自制刻度尺)样式


Posted in jQuery onAugust 15, 2017

依据我现有的知识,在前端上"简易"的实现了腾讯信用的界面,同时自己自制了一个竖直的刻度尺插件,曲线的位置可以根据传入的数值动态的改变,这次主要也想总结一下关于jQuery中extend的方法,也是我们在写插件的时候常用的方法

效果图

jQuery实现腾讯信用界面(自制刻度尺)样式

jQuery中的extend方法

这里我参考了前辈的博客,在前辈博客中可以进行更深一步的学习:

文档中给的解释是:jQuery.extend()函数主要是用于将一个或多个对象的内容合并到目标对象上,该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上。

extend也是在我们写插件时常用的方法,

1、扩展方法的原型

$.extend(param,dparam...),它的含义是将dparam合并到param中,

需要注意如果多个对象具有该属性,则后者会覆盖前者的属性值,

也就是说var result = $.extend({},{name : 'JSoso',age:17},{name:"okaychen",sex:"boy"})

最后 result = {name:"okaychen",age:17,sex:"boy"};

2、只有一个参数的情况

只有一个参数时会将改方法合并到jQuery的全局对象中

比如:

$.extend(
{hello:function(){console.log('hello extend')}}

)

最终会将hello方法添加到jQuery全局对象中去。

3、带布尔值的情况

jQuery中的extend还有一种重载原型

语法:$.extend(boolean,dest,src1,src2...) 

第一个布尔值参数表示是否使用深度拷贝,默认为false(可以明确指定为true,但是不能明确指明为false)

jQuery实现腾讯信用界面(自制刻度尺)样式

那么什么是深度拷贝呢?其实不难理解,深度拷贝就是该"属性对象"的"属性"也会被拷贝的目标对象中

var result = $.extend(true, {}
{name:'JSoso',abstract: {age:17,country:'USA'}},

{last:"Amor",abstract: {state:'student',country:'China'}}
);

那么合并后的结果就是:

result = {
name:'JSoso',

last:'Amor',

abstract:{age:17,state:'student',country:'China'}
}

那么如果参数是false,结果会是神马呢?

result = {
name : "JSoso",

last : "Amor",

abstract:{state:"student",country:"China"}
}

会看到第一个abstract内的属性并没有被拷贝,因为没有执行深度拷贝,所以abstract会被后一个覆盖掉了。

关于extend拷贝的方法我总结了上面三点,其实还有好多学问,需要我们去发掘。

流程分析

我看目前网上几乎都是水平的可滑动的刻度尺插件,几乎没有竖直的插件,其实也大同小异。因为做这个东西的需要,所以我需要做一个竖直的刻度尺(而且我本人也不喜欢用插件,我想有一天实现我的插件梦)。

我做这个插件的第一步是先用HTML+ CSS静态的写出大致的效果(这样的同时我觉得我也直观的构思了这个东西的大致架构),比如先0~10做出来,然后计算好间距,然后在后面做文章。 

当我们清晰了这个刻度尺的架构之后,需要做的就是用append的方法(这里我用的jQuery)插入到指定的位置就可以了(因为这个时候你的刻度尺css代码基本已经完成)。

jQuery实现腾讯信用界面(自制刻度尺)样式

然后我们需要处理中间标志(即曲线的初始位置)

var firstRand = true;
if (firstRand) {
 pTop = $(".rulerPointer").position().bottom;
}
var rulerLNo = 0;
for (var z = 0; z < setLen; z++) {
  if (z * setHeight > pTop) {
   limitTop = pTop - z * setHeight;
   rulerLNo = z;
   break;
 }
}

改变曲线的位置<和传入的数值相对应>

if (param.value && param.value >= param.minUnit && param.value <= param.max) {
  $(" .rulerPointer").css("bottom", (param.value / param.minUnit) * 10 * param.mult)
} else {
  $(" .rulerPointer").css("bottom", '0');
}

然后我们用each遍历的方法给刻度尺标上刻度值(这里idx就是索引值,ele表示获取遍历的每一个dom对象)

$("#" + param.wrapperId + " .sizeNo").each(function (idx, ele) {
 if (idx >= rulerLNo && idx < setLen) {
   $(ele).html((idx - rulerLNo) * param.minUnit *param.unitSet);
 }
})

到这里我们的刻度尺的代码已经完成(我只展示了部分代码)。

初始化

当我们完成插件的封装,我们只需要创建一个实例化的对象就可以了。

var measureRuler = new MeasureRuler({
 wrapperId:"rulerWrapper",   
 //刻度尺容器的ID
 max:110,         //最大刻度
 minUnit:1,         //最小刻度
 unitset:10,         //刻度尺单元长度
 value:60,         //初始化值,曲线的初始位置
 mult:1          //刻度尺倍数,默认为10px
})

总结

以上所述是小编给大家介绍的jQuery实现腾讯信用界面(自制刻度尺)样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery实现抽奖功能
Oct 22 jQuery
使用jQuery实现购物车结算功能
Aug 15 #jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 #jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 #jQuery
jQuery实现手势解锁密码特效
Aug 14 #jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
jQuery:unbind方法的使用详解
Aug 14 #jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
You might like
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
Javascript 数组排序详解
2014/10/22 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
五一服装活动方案
2014/01/11 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
黑白记忆观后感
2015/06/18 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS