jquery弹性云拖动计算功能

  jquery弹性云拖动计算功能

  西安天互7月份上线了自主研发的弹性云产品,第三代云主机全新上线,新一代存储架构安全稳定,性能更强。

  今天来和大家分享下jquery弹性云拖动计算功能:首先html页面必须有的,拖动元素、拖动范围、背景等。

  拖动效果分为两种:一是根据鼠标拖动像素的区间范围改变拖动元素的位置,二是拖动元素随着鼠标所在像素的改变而同时改变。

  一是根据鼠标拖动像素的区间范围改变元素的位置:获取拖动元素对象,在他的点下元素事件(这里注意:是点下mousedown而不是点击click)函数中将拖动范围距离浏览器左边的偏移位置。

  例如:var
pw=$(beijing).offset().left;接着嵌套一个document的mousemove移动事件,在此事件函数中获取鼠标的x坐标即像素,此时拖动元素相对于其父元素即拖动背景范围的横向偏移,像素为(鼠标x坐标-背景距离浏览器左边距离pw),此时需要得到相对应的数据条数
例如:1G 2G 3G 4G 5G等等,每一条对应一个区间,当鼠标拖动到这个区间的时候,将拖动元素移入这个区间。

  所对应的这条数据的位置 (此时拖动元素相对于背景的位移是=鼠标位移-拖动背景位移-鼠标相对于拖动元素的位移) 位移是横坐标之间的差值。

  代码为判断此时鼠标像素存在于哪个区间,次数和数据条数相同,(如果觉得代码繁多可以循环执行,根据循环次数改变对应值)区间范围的计算是:区间像素=背景宽度像素/(数据条数-1)。第一条数据没有左边的部分,最后一条条数据没有右边的部分。所以第一条数据的范围应该是0-区间像素/2,此时把拖动元素放在和第一条数据对应的位置(就是修改他的绝对定位的left值),将对应数据的值传给一个文本域,最后一条道理相同。中间的数据判断像素区间都是:背景宽度像素/(数据条数-1)。

  比如第二条数据的判断区间:第一条数据区间长度至第一条数据区间长度+正常的区间长度(像素),把拖动元素放在和此区间对应数据所在的位置,将对应数据的值传给一个文本域,以此类推至最后一条之前。然后独立写一个document的mouseup事件,在事件函数中解除移动事件unbind,也可以在此做价格计算。

  二是拖动元素随着鼠标所在像素的改变而同时改变:

  这个就等于用鼠标拖动图片一样,网上有很多的教程,只不过只有横向拖动,和第一种方式差别少了判断多了比例的计算,只是要计算拖动多少像素应该对应的数据数是多少,这有一个比率的计算。就是总共有多少条数据,比如1到100兆,每兆都可以选择到,就有一百条数据。比率=总数据条数/(拖动范围宽度-拖动元素的宽度)。在鼠标拖动的拖动事件中将(拖动元素的中间位置的坐标相对于拖动背景的坐标计算出来乘以比率)就是拖动元素目前所在位置对应的数据数,将他写入文本域。

  当然还有点击背景让拖动元素改变,文本域中的数据改变,原理差别不是很大,若会以上两步,改变点击事件应该不会太费劲。

  文章摘自西安天互通信有限公司,如需购买弹性云主机,请链接到我们的购买地址http://www.idcs.cn/cloud/#ywj。

  欢迎来电咨询!

  销售热线:400-675-6239

jquery弹性云拖动计算功能

时间: 2024-11-13 09:06:42

jquery弹性云拖动计算功能的相关文章

用JQuery仿造QQ头像裁剪功能

原文:用JQuery仿造QQ头像裁剪功能 最近工作真心忙碌,几乎没时间写博客.今天趁周末来仿一个QQ头像裁剪功能插件.效果如下: 所有文件都可在我的Github上下载,从头到尾从简到繁按步骤一共分了9个HTML文件,每个步骤文件里的注释都写的很清楚,故在本博客内不赘述. 原理: 主要是通过css的clip来裁剪图片可视区域,拖动剪裁窗口这里使用了JQ-UI的draggable插件(但是缩放没有,贪方便可以使用Resizable插件,但都用插件的话就没有研究的意义了). 缩放功能原理其实很简单,不

Bazaar:阿里云Serverless计算服务探秘

摘要: Serverless 指用户无需管理服务器情况下构建和运行应用程序的一种方式.可见 Serverless 并不是真的不需要服务器,毕竟程序代码不能靠意念来执行,仍然是需要硬件服务器实体来作为运行代码的基础的. 作者:Bazaar项目组 1.     什么是 Serverless "Serverless computing refers to the concept of building and running applications that do not require serve

#化鲲为鹏,我有话说# 鲲鹏弹性云服务器配置 Tomcat

在鲲鹏弹性云服务器上配置 Tomcat 1 下载 Tomcat 地址 :http://tomcat.apache.org/ 根据需要选择版本,这里使用 Tomcat 9,下载压缩包 2 将文件发送到服务器 这里用 scp 如果不是很理解这行代码的意思,可以参考上一篇博文, 鲲鹏弹性云服务器部署 JAVA https://bbs.huaweicloud.com/blogs/128132 3 远程登录服务器解压缩 进入 文件目录 , 提示 tab 键 可以自动补全文件名 , 输入 ll  查看文件详

腾讯云高级研究员张雨春:腾讯云城市计算助力行业数字化升级

10月28日FMI 2018人工智能与大数据高峰论坛深圳场圆满落幕,腾讯云高级研究员张雨春从腾讯云城市计算助力行业数字化升级方向进行了精彩的分享. 腾讯云高级研究员张雨春 以下是张雨春演讲内容,飞马网根据现场速记进行了不改变原意的编辑(有删减): 张雨春:大家好!很高兴作为最后一位演讲嘉宾参加这次峰会.今天我给大家带来的分享是<腾讯云城市计算助力行业数字化升级>,城市计算的概念最近几年炒得很热,BAT三家先后提出了AI城市.智慧城市.城市大脑等解决方案.今年7月份,深圳市政府提出了建设新型智慧

小非大人说·华为云——弹性云服务器ECS

小非大人说·华为云--弹性云服务器ECS小非大人:工程师小闲大人:售前小年大人:老板 昨天听 小闲大人 说,国内公有云市场的份额已经基本稳固,于是小非大人一惊,这就稳固啦,那我赶紧开始学习吧. 第一章(想标题中..) 小年大人 咳嗽一声,既然大家都说完了,那我说两句,给新来的同学就公有云梳理下框架,首先回到10年前,VMware,Citrix,微软的产品,VIEW,VSPHERE,XEN DESKTOP,Hyper-V,这些都是私有云的产品,经过多年深耕,已经在各行各业广泛应用,但近几年,可以看

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

借助Jquery Jqprint实现网页打印功能

今天利用闲余时间研究了一下Jquery Jqprint插件,使用该Jquery脚本可以轻而易举的实现打印网页指定区域内容的功能: 例子一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

通过javascript库JQuery实现页面跳转功能代码

通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum").val();//#gotopagenum是文本框的id属性 location.href = "NewList.aspx?pagenum="+pn;//location.href实现客户端页面的跳转 }); 实例2: 实现跳转:window.location = 'user!add.

Scanner与Switch的简单应用(+-*/计算功能)

简易计算功能+-*/ import java.util.Scanner; public class jisuanqi { public static void main(String arg[]){ for(int a=0;a<1;a--) { jisuanqi(); } } private static void jisuanqi() { //*********************创建scanner输入获取数字 以及运算符 Scanner a = new Scanner(System.in