document.addEventListener('DOMContentLoaded', function() {
//动态创建回到首页dom
var backDom = document.createElement("div");
backDom.className = "z-back";
backDom.innerHTML = '<a href="/"><svg class="icon-back" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M879.461 517.238l-366.588-336.911-368.334 335.167c-6.983 6.983-6.983 17.457 0 24.441s17.457 6.983 24.441 0l343.894-314.219 343.894 314.219c3.492 3.492 6.983 5.238 12.219 5.238s8.726-1.745 12.219-5.238c5.238-5.238 5.238-15.712-1.745-22.695zM767.739 524.219c-10.474 0-17.457 6.983-17.457 17.457v267.084h-143.143v-186.784h-190.277v186.784h-143.143v-267.084c0-10.474-8.726-17.457-17.457-17.457-10.474 0-17.457 6.983-17.457 17.457v301.997h214.715v-186.784h118.704v186.784h214.715v-301.997c-1.745-10.474-8.726-17.457-19.202-17.457zM642.051 274.591h106.484v92.519c0 10.474 8.726 17.457 17.457 17.457 10.474 0 17.457-6.983 17.457-17.457v-127.433h-143.143c-10.474 0-17.457 6.983-17.457 17.457 1.745 8.726 10.474 17.457 19.202 17.457z" /></svg></a>';
document.body.appendChild(backDom);
//回到首页拖拽效果
//获取屏幕宽高
var screenW = window.screen.availWidth;
var screenH = window.screen.availHeight;
var dragBox = document.querySelector(".z-back");
dragBox.addEventListener("touchstart", function(e) {
var touch = e.touches[0];
startX = touch.pageX;
startY = touch.pageY;
var left = getCss(dragBox, "left");
var top = getCss(dragBox, "top");
var width = getCss(dragBox, "width");
var height = getCss(dragBox, "height");
dragBox.addEventListener("touchmove", function(e) {
e.preventDefault();
var touch = e.touches[0];
var x = touch.pageX - startX;
var y = touch.pageY - startY;
var nowLeft = left + x;
var nowTop = top + y;
//边界值处理
if(x > 0){
nowLeft = nowLeft > screenW - width ? screenW - width : nowLeft;
}else{
nowLeft = nowLeft > 0 ? nowLeft : 0;
}
if(y > 0){
nowTop = nowTop > screenH - height ? screenH - height : nowTop;
}else{
nowTop = nowTop > 0 ? nowTop : 0;
}
dragBox.style.left = nowLeft + "px";
dragBox.style.top = nowTop + "px";
}, false);
}, false);
dragBox.addEventListener("touchend", function(e) {
dragBox.removeEventListener("touchstart,touchmove,touchend", function() { });
}, false)
}, false); //获取元素样式
function getCss(curEle, attr) {
var val = null,
reg = null;
if ("getComputedStyle" in window) {
val = window.getComputedStyle(curEle, null)[attr];
} else {
if (attr === "opacity") {
val = curEle.currentStyle["filter"];
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;
} else {
val = curEle.currentStyle[attr];
}
}
reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
return reg.test(val) ? parseFloat(val) : val;
}

js移动端 可移动滑块的更多相关文章

  1. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  2. ASP.NET Core 与 Vue.js 服务端渲染

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  3. 原生js移动端列表无缝间歇向上滚动

    在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...

  4. node.js服务端程序在Linux上持久运行

    如果要想在服务端部署node.js程序,让其持久化运行,就不能单单使用npm start命令运行,当然了,这样运行是毫无问题的,但是当关闭xshell窗口或者是关闭进程的时候(其实关闭xshell窗口 ...

  5. JS神经网络deeplearn.js:浏览器端机器智能框架

    JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...

  6. 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  7. NET Core 与 Vue.js 服务端渲染

    NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...

  8. js 移动端之监听软键盘弹出收起

    js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...

  9. cropper.js移动端使用

    cropper.js移动端使用 一.总结 一句话总结: 启示:找对关键词,找对相关方面的应用,效果真的非常好 比如 cropper.js移动端使用,这样设置了(dragMode: 'move',//拖 ...

随机推荐

  1. Gradle学习之创建Task的方法

    请通过下面方式下载本系列文章的Github演示样例代码: git clone https://github.com/davenkin/gradle-learning.git     Gradle的Pr ...

  2. Python3基础(四) 条件与循环控制

    Python的流程控制语句包括:if条件语句.while循环语句.for循环语句.range函数以及break.continue.pass控制语句.这些语句在Python中的语义和在其他语言中基本是一 ...

  3. 在Centos6.5下Samba的简单配置

    本文的目的主要用来说明怎样在CentOS6.5的环境下配置出一个简单可用的samba服务,而且能够通过windows对其文件进行訪问 安装相关软件 # yum install samba samba- ...

  4. 从头认识Spring-1.9 内部类注入Bean

    这一章节我们来讨论一下内部类注入Bean. 1.domain 蛋糕类:(跟前一章节的一样) package com.raylee.my_new_spring.my_new_spring.ch01.to ...

  5. JavaScript Patterns 2.5 (Not) Augmenting Build-in Prototypes

    Disadvantage Other developers using your code will probably expect the built-in JavaScript methods t ...

  6. bzoj 1367 [ Baltic 2004 ] sequence —— 左偏树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1367 好题啊!论文上的题: 论文上只给出了不下降序列的求法: 先考虑特殊情况,如果原序列上升 ...

  7. 支持HTTP2的cURL——基于Alpine的最小化Docker镜像

    cURL是我喜欢的开源软件之一.虽然cURL的强大常常被认为是理所当然的,但我真心地认为它值得感谢和尊重.如果我们的工具箱失去了curl,那些需要和网络重度交互的人(我们大多数人都是这样的)将会陷入到 ...

  8. [Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. P2068 统计和

    P2068 统计和 这题真的非常水了 如果不会 右转[模板]树状数组 2 基本上是一模一样的 #include <bits/stdc++.h> #define lowbit(x) x&am ...

  10. JavaScript--改变 HTML 样式

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式.如何改变 HTML 元素的样式呢? 语法: Object.style.property=new style; 注意:Objec ...