PC 拖动 以百分比计算

<!doctype html>
<html>
<head>
    <meta charset=‘utf-8‘ />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>兼容手机与PC 拖动 以百分比计算  </title>
</head>

<body>
<div style="width:500px;  height:500px; border:1px solid #ccc; position:relative;  margin:0 auto">
<div id="oDiv" style="width:100px;height:100px;background-color:red;position:absolute; top:0; left:0; cursor: pointer"></div>
</div>

<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
    var oMask = document.getElementById(‘oDiv‘);
    var oDiv=$("#oDiv");
    var oDivW=oDiv.width()/2;
    var ifKey=false;
    oDiv.on("mousedown", down);
    oDiv.on("mousemove", move);
    oDiv.on("mouseout mouseup", up);
    //  oMask.addEventListener("touchmove", move)

    function down(e){
        e.preventDefault();
        e.stopPropagation();
        ifKey=true;

    }
    function up(e){
        e.preventDefault();
        e.stopPropagation();
        ifKey=false;

    }

    function move(e) {
        var bodyW=500;
        var bodyH=500;

        if(ifKey==true){
            e.preventDefault();//阻止其他事件
            // e.preventDefault();
            // 如果这个元素的位置内只有一个手指的话
           if(e.type=="mousemove"){
                var ox= e.clientX-bodyW-oDivW;
                var oy= e.clientY;
                document.title=(oy);
            if(ox<50){
                    ox=50;

                }else if(ox>450){
                    ox=450

                }

                if(oy<50){
                    oy=50;
                    }else if(oy>450){
                            oy=450;
                        }

                var bfX=(ox-oDivW)*0.2;
                var bfy=(oy-oDivW)*0.2;
                oMask.style.left=(bfX)+"%";
                oMask.style.top=(bfy)+"%";

            }
        }

    }

</script>
</body>
</html>
时间: 2024-11-04 06:30:15

PC 拖动 以百分比计算的相关文章

报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常

起因: 做项目的时候做了一个表格内容超过DIV容器自动横向滚动处理.别的浏览器都正常:但是在IE下面明明表格table和容器DIV宽度一致但是却出现了滚动条.如图 然后本人做实验找了半天原因终于是找到了,是IE浏览器使用百分比计算宽度值不是整数值引起的. 实例1:使用百分比计算结果是整数的情况下显示正常. <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>IE8奇葩滚动条问题实

pc 拖动效果,拖动带范围

<!doctype html> <html> <head> <meta charset='utf-8' /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale

CSS中IE8和chrom像素百分比计算差异

IE8中和chrome在计算像素百分比上,IE8舍一位取元素像素大小,chrome则使用四舍五入取元素像素大小: 比如:<body><div stype=“width:30%”></div></body> 假设body宽1366px,在IE8中div宽度为1366*0.3=409.8px,舍一位最终结果为409px:而在chrome中四舍五入则为410px:

模拟计算超越全国百分比计算方式

最近有个小需求,根据输入的数字,判断超越全国百分多少用户,首先老子肯定是搞不到全国用户的数据的,然后想了半天模拟方式; 百度后各种函数都出来了,作为屌丝的我函数认识我,我不认识他,而且还贼复杂,最后使用了最简单的方式实现了 然后代码如下: /** * 模拟计算超越全国百分之多少的计算方法类 * @param $money * create by lizhanqi(forbidden change code if you need tell to me) * 禁止改动,如需改动联系我 * 百元以内

Python 百分比计算

遇到计算百分比的情况,查了一下,有两种方式 具体实现方式见下面代码 # 方式1 格式化为float ,然后 处理成%格式, 需要对分子/分母 * 100如下, percentList.append('{:.2f}%'.format(member/denominator*100)) # 方式2 直接使用参数格式化:{:.2%} {:.2%}: 显示小数点后2位 percentList.append('{:.2%}'.format(member/denominator)) print("所求百分比为

IE7百分比计算bug

今天使用百分比写一个导航的demo,在IE7中检测时候最后一个导航掉下来,跟前边的不在一行,而在别的浏览器中都显示正常,包括非IE7的其它IE更高或者更低的版本.还以为是IE7的百分比解释有什么bug呢,但是在“查看元素”中调试的时候,无意发现,有时候不会掉下来,而有时候又掉下来,就这样在宽度的加加减减的时候,对齐不对齐现象也是时有时无的发生. #nav{width:80%;height:60px;margin:60px auto;color:#fff;} #nav li{list-style-

百分比相对计算注意事项CSS3

百分比计算 1.涉及元素定位,和大小计算,基于元素自身的包含块. 2.元素背景图的大小计算,位置计算,基于元素自身的宽,高. 2.元素图片边框使用的图图片大小计算,基于元素自身的宽,高.

Excel计算百分比时分母为0的处理

作者:iamlaosong 实际工作中经常碰到百分比计算,但是,如果分母为0,则单元格显示#DIV/0!,可以用if函数进行判断(直接判断分母,或者用iserror(A1/B1)或isnumber(A1/B1)函数判断计算结果),这样就不会显示#DIV/0!,显示什么,可以根据需要设定,例如: =IF(B1<>0,A1/B1,0)     ' 分母为0时显示0 =IF(B1<>0,A1/B1,1)     ' 分母为0时显示1 =IF(B1<>0,A1/B1,"

高通QCOM 8610平台电量计算

一: SOC(荷电状态)计算方法 公式: SOC = RUC / (FCC-UUC) 名词: 术语 全称 注释 FCC Full-Charge Capacity 满电荷电量 UC Remaining Capacity RC 剩余电量 CC Coulumb Counter 电量计 UUC Unusable Capacity 不可用电量 RUC Remaining Usable Capacity RUC=RC-CC-UUC,剩余可用电量 OCV Open Circuit Voltage 开路电压,电