js控制元素左右缓慢移动和页面上下缓慢移动

左右移动：有快到慢

页面上下移动：

左右移动代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画函数</title><script src="./js/animation.js"></script><style>* {padding: 0;margin: 0;}.box {position: fixed;top: 0px;left: 0px;width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box"></div><script>var box = document.querySelector(".box");// move(box, 400, function () { alert("success") });moveA(box, 400);</script>
</body></html>

上下移动代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动事件</title><script src="./js/animation.js"></script><style>* {padding: 0;margin: 0;}html,body {height: 100%;}.box {position: relative;width: 1200px;height: 100%;margin: 0px auto;}.box .sidbar {position: absolute;top: 50%;right: 0px;width: 50px;height: 100px;margin-right: -60px;background-color: red;}/* .box .sidbar {position: fixed;top: 0px;right: 0px;width: 50px;height: 100px;margin-right: 110px;background-color: red;} */.box .sidbar .back {display: none;font-size: 12px;margin-top: 80px;}.header {width: 100%;height: 414px;background-color: skyblue;}.banner {width: 100%;height: 300px;background-color: orange;}.main {width: 100%;height: 1000px;background-color: grey;}.footer {width: 100%;height: 500px;background-color: purple;}</style>
</head><body><div class="box"><div class="sidbar"><div class="back"><a href="javascript:;">返回首页</a></div></div><div class="header">头部区域</div><div class="banner">轮播图区域</div><div class="main">主体内容区域</div><div class="footer">页脚部分</div></div><script>var box = document.querySelector(".sidbar");var back = document.querySelector(".back");document.addEventListener("scroll", function () {// console.log(window.pageYOffset);if (window.pageYOffset > 414) {box.style.position = "fixed";box.style.top = "0px";box.style.marginRight = "110px";} else {box.style.position = "absolute";box.style.top = "50%";box.style.marginRight = "-60px";}if (window.scrollY > 714) {back.style.display = "block";} else {back.style.display = "none";}})back.addEventListener("click", function () {scrollV(back, 0);})</script>
</body></html>

Js代码：

function moveA(obj, target, callBack) {if (obj.timer) {clearInterval(obj.timer);}obj.timer = setInterval(function () {// 调整步长var step = (target - obj.offsetLeft) / 10step = target > 0 ? Math.ceil(step) : Math.floor(step)// 开始移动if (obj.offsetLeft != target) {obj.style.left = obj.offsetLeft + step + "px";} else {// 到达目的地，执行回掉函数callBack && callBack();clearInterval(obj.timer);}}, 30);}function scrollV(obj, target, callBack) {if (obj.timer) {clearInterval(obj.timer);}obj.timer = setInterval(function () {// 调整步长console.log(window.scrollY);var step = (target - window.scrollY) / 10step = target > 0 ? Math.ceil(step) : Math.floor(step)// 开始移动if (window.scrollY != target) {window.scroll(0, window.scrollY + step);} else {// 到达目的地，执行回掉函数callBack && callBack();clearInterval(obj.timer);}}, 30);}

js控制元素左右缓慢移动和页面上下缓慢移动相关推荐

js控制元素显示与否JS控制HTML元素的显示和隐藏
转载:https://www.cnblogs.com/unpolishedgem/p/3247098.html 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个 ...
js控制元素旋转速度
本来是项目中需要画一个叉叉,在一个单独的html页面中利用四个三角形挡住父元素的背景颜色的方法画出来之后,一时兴起用js让它转了起来,最后写了两个按钮控制了速度. 源码: <!-- /* * @ ...
js控制公共模板中，不同页面中的导航选中效果-判断当前的url
用js的做法也很多.比较推荐的方法是判断当前的url,然后根据url在nav中的位置,来对nav中的某个导航增加选中样式,代码如下: <!doctype html> <html la ...
Js控制CSS切换样式表实现页面风格切换
看到别人网站都有一个无刷新切换风格的功能,自己很喜欢,但始终没找到方法,后来看了网上的教程,总算自己做出来了,下面只说关键步骤,相信通过这篇教程,你会搞定这个功能. 首先,我们需要自己写好几种CSS风 ...
关于js控制元素的隐藏和显示
jsp <div class="row" style="display:none" id="amount"><EF:EFI ...
js控制元素隐藏和显示
方法一: document.querySelector("#id").style.visibility="hidden";document.querySelec ...
js控制网页动态效果
目录实现效果技术点导航文字高亮实现左侧菜单栏实现倒计时实现轮播图实现点击小圆点,高亮,图片跟随切换图自动播放小圆点冲突问题鼠标经过与离开效果实现实现效果前提:都必须用js来实现 ...
js获取元素的方法与属性
js获取元素的方法可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量 <scripttyp ...
移动端页面——js控制制作
移动端一般设计图尺寸为720px或者640px,一般来说使用rem(指相对于根元素(即html元素)的字体大小的单位). 可以使用js来控制,方便快速做出移动页面适应大部分手机的移动页面例如设计图为 ...

js控制元素左右缓慢移动和页面上下缓慢移动

js控制元素左右缓慢移动和页面上下缓慢移动相关推荐

最新文章

热门文章