js移动端 可移动滑块
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移动端 可移动滑块的更多相关文章
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- ASP.NET Core 与 Vue.js 服务端渲染
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- node.js服务端程序在Linux上持久运行
如果要想在服务端部署node.js程序,让其持久化运行,就不能单单使用npm start命令运行,当然了,这样运行是毫无问题的,但是当关闭xshell窗口或者是关闭进程的时候(其实关闭xshell窗口 ...
- JS神经网络deeplearn.js:浏览器端机器智能框架
JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- NET Core 与 Vue.js 服务端渲染
NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...
- js 移动端之监听软键盘弹出收起
js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...
- cropper.js移动端使用
cropper.js移动端使用 一.总结 一句话总结: 启示:找对关键词,找对相关方面的应用,效果真的非常好 比如 cropper.js移动端使用,这样设置了(dragMode: 'move',//拖 ...
随机推荐
- OC中APPDelegate[[UIApplication shareApplication]delegate]]Swift实现
直接上代码: var myDelegate:AppDelegate? myDelegate = UIApplication.sharedApplication().delegate as? AppDe ...
- java中commons-beanutils的介绍
1. 概述 commons-beanutil开源库是apache组织的一个基础的开源库.为apache中很多类提供工具方法.学习它是学习其它开源库实现的基础. Commons-beanutil中包 ...
- 在SAE搭建Python+Django+MySQL(基于Windows)
为了与时俱进,工作闲余開始研究Python,刚一接触就被Python这"优雅"的语法吸引住.后来接触到了Django.尽管还没有太深入的研究.但对这样的新概念的WEB开发非常感兴趣 ...
- CSDN 厦门大学线下编程比赛第一题:求和(同余定理)
题目意思: 给定a和n,计算a+aa+aaa+aaaa+...+a...a(n个a) 的和. 输入描写叙述:測试数据有多组,以文件结尾.每行输入a,n(1<=a,n<=1000000). ...
- mySql学习笔记:比sql server书写要简单
在学mySql.总的感觉,mySql与Sql Server差不多,语法都很象,但mySql也许是吸取了SQL SERVER的一些经验,SQL语句书写起来更加简单. 比如说,设置主键.索引,SQL SE ...
- LeetCode241——Different Ways to Add Parentheses
Given a string of numbers and operators, return all possible results from computing all the differen ...
- Setup Script in SoapUI - 停止项目运行 (abort project)
TestSuite需要依赖一个先决条件(比如Login) 当Login失败则立即停止Project运行 在Project的Setup Script的代码如下 import com.eviware.so ...
- Robot Framework 搭建和RIDE(GUI) 的环境
在windows x64的环境上进行安装,集成Selenium2和AutoIt的libraries,以下安装步骤在win 7,win 8.1,win 10, win 2012 R2上测试通过 1. 下 ...
- raid5什么意思?如何做raid5?raid5 几块硬盘?
raid5什么意思?如何做raid5?raid5 几块硬盘? 分类: 项目管理2012-09-28 00:38 5326人阅读 评论(0) 收藏 举报 一.raid什么意思?RAID是“Redunda ...
- 自动生成Makefile的全过程详解
一.简介 Linux下的程序开发人员,一定都遇到过Makefile,用make命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile,如果要想写出一个符合自由软件惯例的 ...