原生js元素惯性滚动
2024-06-17 06:26:04
元素惯性滚动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0px; top:0;}
</style>
<script>
window.onload=function(){ var oDiv=document.getElementById('div1'); var iSpeedX=0; var iSpeedY=0; var lastX=0; var lastY=0; var timer=null; let sudu = 0.8;oDiv.onmousedown=function(ev){ //div的鼠标按下事件，主要计算鼠标当前位置，和移动位置。这样可以计算出鼠标移动速度。var oEvent=ev || event; var disX=oEvent.clientX-oDiv.offsetLeft; var disY=oEvent.clientY-oDiv.offsetTop; clearInterval(timer); document.onmousemove=function(ev){ //鼠标拖动事件。 var oEvent=ev || event; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; iSpeedX=oEvent.clientX-lastX; iSpeedY=oEvent.clientY-lastY; lastX=oEvent.clientX; lastY=oEvent.clientY; } document.onmouseup=function(){ //当鼠标抬起后，清掉移动事件。document.onmousemove=null; document.onmouseup=null; oDiv.releaseCapture && oDiv.releaseCapture(); startMove(); } oDiv.setCapture && oDiv.setCapture(); return false; } function startMove(){ //移动函数，主要操作是计算鼠标移动速度和移动方向。clearInterval(timer); timer=setInterval(function(){ iSpeedY+=3; var t=oDiv.offsetTop+iSpeedY; var l=oDiv.offsetLeft+iSpeedX; if(t>document.documentElement.clientHeight-oDiv.offsetHeight){ t=document.documentElement.clientHeight-oDiv.offsetHeight; iSpeedY*=-sudu; iSpeedX*=sudu; } if(t<0){ t=0; iSpeedY*=-sudu; iSpeedX*=sudu; } if(l>document.documentElement.clientWidth-oDiv.offsetWidth){ l=document.documentElement.clientWidth-oDiv.offsetWidth; iSpeedX*=-sudu; iSpeedY*=sudu; } if(l<0){ l=0; iSpeedX*=-sudu; iSpeedY*=sudu; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; if(Math.abs(iSpeedX)<1)iSpeedX=0; if(Math.abs(iSpeedY)<1)iSpeedY=0; if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){ clearInterval(timer); } document.title=i++; },30); }
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>拖拽，摩擦，甩动元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS惯性拖拽</title>
<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
#div1{width:100px;height:100px;position:absolute;left:0;top:0;border:1px solid #000;}
.box{width:10px;height:10px;background:green; position:absolute;left:0;top:0;}
</style>
<script>
window.onload=function(){var oDiv=document.getElementById('div1');oDiv.onmousedown=function(ev){var speedX=0,speedY=0; //要求的速度var lastX=0,lastY=0; //最后一次的距离var oEvt=ev||event;var disX=oEvt.clientX-oDiv.offsetLeft;var disY=oEvt.clientY-oDiv.offsetTop; document.onmousemove=function(ev){var oEvt=ev||event;oDiv.style.left=oEvt.clientX-disX+'px';oDiv.style.top=oEvt.clientY-disY+'px'; speedX = oDiv.offsetLeft-lastXspeedY = oDiv.offsetTop-lastYlastX=oDiv.offsetLeftlastY=oDiv.offsetTopconsole.log(lastX,speedX); };document.onmouseup=function(){document.onmousemove=document.onmouseup=null;//alert(speedX+'|'+speedY); move(oDiv,speedX,speedY);};return false;}; function move(obj,speedX,speedY){clearInterval(obj.timer);obj.timer=setInterval(function(){speedX*=0.95 //摩擦speedY*=0.95 //摩擦obj.style.left=obj.offsetLeft+speedX+'px';obj.style.top=obj.offsetTop+speedY+'px';if(Math.abs(speedX)<1) speedX=0;if(Math.abs(speedY)<1) speedY=0;if(speedX==0&&speedY==0){clearInterval(obj.timer); }console.log(speedX,speedY);},30); }
};
</script>
</head>
<body>
<div id="div1"><img style="width:100%" src="cc.png" alt=""></div>
</body>
</html>原生js元素惯性滚动相关推荐
- js源生惯性滚动与回弹(备用)
js源生惯性滚动与回弹(备用) js源生惯性滚动与回弹(备用) <!DOCTYPE html> <html lang="zh-CN"><head> ...
- 原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动 一.原理 黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
- 原生JS实现的滚动抽奖工具（可设置每个奖品概率、滚动速度、滚动圈数）
使用原生JS实现的滚动抽奖效果,可对每个奖品设置概率 实现以下功能: 1.可针对每个奖品设置概率 2.可设置最少滚动圈数 3.可设置滚动速度 4.可设置从倒数第几个开始减慢速度 演示图 HTML部分 ...
- 原生JS 实现字幕滚动
原生JS 实现字幕滚动 <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
- 原生JS实现无限滚动瀑布流布局
API HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度.一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的 ...
- 【原生JS】写滚动指定位置展示动画
用原生js做滚动到指定位置展示动画,动画效果用Animate.css 直接上代码 <!DOCTYPE html> <html lang="en"><h ...
- 原生js实现字幕滚动
使用css和原生js实现的字幕滚动效果,无缝衔接 效果 原理 容器设置固定宽度,超出部分隐藏,滚动部分绝对定位并通过定时器改变位置 实现 html部分 <div class="scro ...
- 原生js实现歌词滚动以及卡拉OK效果
干货转自网易实践者社区,感谢作者[严跃杰] [歌词滚动效果] 滚动歌词比较常见的一种歌词显示方式,今天我们来讨论如何通过原生js来完成一个简单的滚动歌词实现. 一般来说,滚动歌词有如下几项需求: 1. ...
- html完成公告滚动条,原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构 我是公告1 我是公告2 我是公告3 我是公告4 2.css样式 body, div, ul, li { ...
最新文章
- 集线器、路由器与交换机
- HiveJDBC与其他JDBC一起使用时出现java.lang.IllegalArgumentException: Bad URL format
- python编码效率高吗_【原创】杠精的日常-讨论python快排的效率
- metasploitable2渗透测试
- mysql主从数据库同步问题_聊聊MySQL主从数据库同步的那些事儿
- eclipse 方法补全快捷键设置
- Android开发网络连接超时
- hbuilderx的快捷键整理pdf_47个电脑快捷键大全，让你工作提升100倍，一般人我不告诉他...
- OpenCV搜索文件夹中的图片并保存图片路径和信息
- Premiere Elements使用指南：键盘快捷键
- 开源爬虫框架各有什么优缺点？
- 修改服务器的maxpostsize的值,maxPostSize属性改变tomcat的post请求的请求体大小设置...
- jmeter监控服务器的方法
- 馈线互调测试仪仿真软件,CYME电力工程仿真分析软件
- springboot 整合 j2cache
- openssl密码套件详解
- 正版maya安装时，更改注册登录方式方法
- office 论文 页码_原创：如何设置毕业论文的页眉和页码（word2007和word2010)
- Cesium 显示三维地球和地图的开源js库
- Google Chrome无法添加扩展程序（插件）的解决方案