左滑删除
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左划出现删除按钮,右滑隐藏</title>
<script type="text/javascript">
function slide_delete_init() {
// 获取所有行,对每一行设置监听
var lines = document.querySelectorAll(".line-scroll-wrapper");
//按钮宽度 -> 偏移量
var len = lines.length;
if (len ===0 ) return;
var delete_btn_width = document.querySelector(".line-btn-delete").offsetWidth;
var lastX, lastXForMobile;
// 用于记录被按下的对象
var pressedObj; // 当前左滑的对象
var lastLeftObj; // 上一个左滑的对象
// 用于记录按下的点
var start;
// 网页在移动端运行时的监听
for (var i = 0; i < len; ++i) {
lines[i].addEventListener('touchstart', function(e){
lastXForMobile = e.changedTouches[0].pageX;
pressedObj = this; // 记录被按下的对象
// 记录开始按下时的点
var touches = event.touches[0];
start = {
x: touches.pageX, // 横坐标
y: touches.pageY // 纵坐标
};
});
lines[i].addEventListener('touchmove',function(e){
// 计算划动过程中x和y的变化量
var touches = event.touches[0];
delta = {
x: touches.pageX - start.x,
y: touches.pageY - start.y
};
// 横向位移大于纵向位移,阻止纵向滚动
if (Math.abs(delta.x) > Math.abs(delta.y)) {
event.preventDefault();
}
});
lines[i].addEventListener('touchend', function(e){
if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
lastLeftObj.style.transform = "translate(0,0)"; // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
var diffX = e.changedTouches[0].pageX - lastXForMobile;
if (diffX < -150) {
pressedObj.style.transform = "translate(-"+delete_btn_width+"px,0)"; // 左滑
if (lastLeftObj && lastLeftObj != pressedObj)
lastLeftObj.style.transform = "translate(0,0)"; // 已经左滑状态的按钮右滑
lastLeftObj = pressedObj; // 记录上一个左滑的对象
} else if (diffX > 150) {
if (pressedObj == lastLeftObj) {
pressedObj.style.transform = "translate(0,0)"; // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
}
});
}
// 网页在PC浏览器中运行时的监听
for (var i = 0; i < len; ++i) {
lines[i].addEventListener('mousedown', function(e){
lastX = e.clientX;
pressedObj = this; // 记录被按下的对象
});
lines[i].addEventListener('mouseup', function(e){
if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
$(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
var diffX = e.clientX - lastX;
if (diffX < -150) {
pressedObj.style.transform = "translate(-"+delete_btn_width+"px,0)"; // 左滑
if (lastLeftObj && lastLeftObj != pressedObj)
lastLeftObj.style.transform = "translate(0,0)"; // 已经左滑状态的按钮右滑
lastLeftObj = pressedObj; // 记录上一个左滑的对象
} else if (diffX > 150) {
if (pressedObj == lastLeftObj) {
pressedObj.style.transform = "translate(0,0)"; // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
}
});
}
//点击其他部分则回退状态
document.addEventListener('touchstart',function (e) {
if (e.target != pressedObj && e.target != lastLeftObj){
pressedObj.style.transform = "translate(0,0)";
pressedObj.style.transform = "translate(0,0)";
}
});
document.addEventListener('mousedown',function (e) {
if (e.target != pressedObj && e.target != lastLeftObj){
pressedObj.style.transform = "translate(0,0)";
pressedObj.style.transform = "translate(0,0)";
}
});
}
window.onload = function () {
slide_delete_init();
}
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
.line-wrapper {
width: 100%;
height: 144px;
overflow: hidden;
font-size: 28px;
border-bottom: 1px solid #aaa;
}
.line-scroll-wrapper {
width: 100%;
height: 100%;
position: relative;
background: #b7eb8f;
transform: translate(0,0);
-moz-transition: transform 0.5s; /* Firefox 4 */
-webkit-transition: transform 0.5s; /* Safari ºÍ Chrome */
-o-transition: transform 0.5s; /* Opera */
}
.line-btn-delete {
height: 100%;
position: absolute;
top: 0px;
right: -132px;
width: 132px;
text-align: center;
background: red;
line-height: 144px;
font-size: 24px;
color: #fff;
}
</style>
</head>
<body>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div>
123456
</div>
<div class="line-btn-delete">删除</div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div>
123456
</div>
<div class="line-btn-delete">删除</div>
</div>
</div>
</body>
</html>
转载 :https://www.cnblogs.com/s-b-b/p/5829283.html
原版
环形进度条
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.square{
margin: 20px auto;
width: 200px;
height: 200px;
/*border: 1px solid #aaa;*/
position: relative;
}
.half-square{
width: 100px;
height: 200px;
position: absolute;
overflow: hidden;
top:0;
}
.half-square.left{
left: 0;
/*border: 1px solid rgb(3,205,203);*/
}
.half-square.right{
right:0;
/*border: 1px solid green;*/
}
.background{
width:200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.circle{
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
}
.circle.left{
left: 0;
border-left:20px solid rgb(3,205,203);
border-top: 20px solid rgb(3,205,203);
transform: rotate(135deg);
}
.circle.right{
right: 0;
border-right:20px solid rgb(3,205,203);
border-top: 20px solid rgb(3,205,203);
transform: rotate(-135deg);
}
.circle.inner{
border:20px solid rgb(230,230,230);
display: table-cell;
vertical-align: middle;
position: relative;
}
.inner-content{
margin: 0 auto;
width: 50%;
text-align: center;
}
</style>
<script type="text/javascript">
var percent = 0;
var circleTimeId = null;
function circlePercent(time){
if(percent>100 || percent<0){
return false;
}
if(percent > time ){
clearInterval(circleTimeId);
}else{
if(percent<=50){
per=percent*3.6-135;
document.getElementById("right-circle").style.transform = "rotate("+per+"deg)";
}else{
per=(percent-50)*3.6+135;
document.getElementById("right-circle").style.transform = "rotate(45deg)";
document.getElementById("left-circle").style.transform = "rotate("+per+"deg)";
}
document.getElementById("percent-num").innerHTML= percent;
percent = percent + 1;
}
}
function time(time){
circleTimeId = setInterval("circlePercent("+time+")",200);
}
</script>
</head>
<body onload="time(70)">
<div class="square">
<div class="background">
<div class="circle inner">
<div class="inner-content"><span id="percent-num">0</span>%</div>
<div class="inner-content">进度</div>
</div>
</div>
<div class="half-square left">
<div class="circle left" id="left-circle">
</div>
</div>
<div class="half-square right">
<div class="circle right" id="right-circle">
</div>
</div>
</div>
</body>
</html>
环形倒计时
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
/*环形进度条 优化*/
.square{
width: 50px;
height: 50px;
/*border: 1px solid #aaa;*/
position: relative;
}
.circle{
width: 50px;
height: 50px;
border: 5px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
}
.square div{
box-sizing: border-box;
}
.half-square{
width: 50%;
height: 100%;
position: absolute;
overflow: hidden;
top:0;
}
.half-square.left{
left: 0;
/*border: 1px solid rgb(3,205,203);*/
}
.half-square.right{
right:0;
/*border: 1px solid green;*/
}
.background{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.circle.left{
left: 0;
border-left:5px solid rgb(3,205,203);
border-top: 5px solid rgb(3,205,203);
transform: rotate(135deg);
}
.circle.right{
right: 0;
border-right:5px solid rgb(3,205,203);
border-top: 5px solid rgb(3,205,203);
transform: rotate(-135deg);
}
.circle.inner{
border:5px solid rgb(230,230,230);
display: table-cell;
vertical-align: middle;
position: relative;
}
.inner-content{
margin: 0 auto;
width: 100%;
text-align: center;
}
</style>
<script type="text/javascript">
var t = 0;
var circleTimeId = null;
function circlePercent(time,size){
var percent = t/time *100
if(percent>100){
document.getElementById("percent-num").innerHTML= time;
clearInterval(circleTimeId);
}else{
if(percent<=50){
per=percent*3.6-135;
document.getElementById("right-circle").style.transform = "rotate("+per+"deg)";
}else{
per=(percent-50)*3.6+135;
document.getElementById("right-circle").style.transform = "rotate(45deg)";
document.getElementById("left-circle").style.transform = "rotate("+per+"deg)";
}
document.getElementById("percent-num").innerHTML= parseInt(t);
t = t + size;
}
}
function time(time,size){
t = 0;
//每time秒刷新渲染
if (!size) { size = 0.1 }
circleTimeId = setInterval(()=>{circlePercent(time,size)},size * 1000);
}
</script>
</head>
<body onload="time(10, 0.02)">
<div class="square">
<div class="background">
<div class="circle inner">
<div class="inner-content"><span id="percent-num">0</span></div>
<div class="inner-content">秒</div>
</div>
</div>
<div class="half-square left">
<div class="circle left" id="left-circle">
</div>
</div>
<div class="half-square right">
<div class="circle right" id="right-circle">
</div>
</div>
</div>
</body>
</html>