拖动缓动效果代码实现

来源：互联网发布：java包装类编辑：程序博客网时间：2024/05/16 05:45

这里只写了简单的拖动缓冲效果

该效果大部分都是用在了拖动->到底->异步加载

html 部分

<div class="box"><div class="boxcon"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p><p>31</p><p>32</p><p>33</p><p>34</p><p>35</p><p>36</p><p>37</p><p>38</p><p>39</p><p>40</p> </div></div>

js 部分

var box = document.querySelector(".box");var con = document.querySelector(".boxcon");var start = false;var parentY = box.offsetTop,childY=0;con.addEventListener("mousedown",function(event){// console.log(event)childY = event.clientY;start = true;},false)con.addEventListener("mouseup",function(){ this.removeAttribute("style") start = false;},false)con.addEventListener("mousemove",function(event){//y = 1/x;var mm = parseInt(window.getComputedStyle(box,null)["height"].replace("px",""))+box.scrollTop;var mmm = window.getComputedStyle(con,null)["height"].replace("px","");if (start && ((mm == mmm && childY >= event.clientY)  || (box.scrollTop ==0 &&  childY <= event.clientY))) {var yy = event.clientY-childY;var sy = yy>0 ? Math.sqrt(yy) : -Math.sqrt(Math.abs(yy));this.style.transform = "translate(0px,"+sy+"px)"// var _y = this.offsetTop - parentY;};},false);

demo地址点击查看

http://works.ibeeger.com/dev/scroll/

0 0

拖动缓动效果 代码实现

拖动缓动效果代码实现