侧导航运动

html==========

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body style="height:1000px">
123
<div id="box">123</div>
</body>
</html>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/demo.js"></script>

css=======

#box{width: 100px;height: 100px;background: red url() 0 0 no-repeat;position: absolute;bottom: 0;right: 0;}

js=======

window.onscroll=function() {
var obj=document.getElementById(‘box‘);
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+"px";
startMove(parseInt((document.documentElement.clientHeight-obj.offsetHeight)/2+scrollTop));
}
var timer=null;
function startMove (target) {
clearInterval(timer);
var obj=document.getElementById(‘box‘);
timer=setInterval(function() {
var speed=(target-obj.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(target==obj.offsetTop){
clearInterval(timer);
}else{
obj.style.top=obj.offsetTop+speed+"px";
}
},40);
}

时间: 2024-10-18 19:26:49

侧导航运动的相关文章

mui跳转页面关闭侧导航

主页面带有menu按钮,点击侧滑页面出来,点击侧滑页面的<li>标签,跳转到新页面,点击新页面,menu关闭. 主页面代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-w

Jquery学习笔记(8)--京东导航菜单(2)增加弹框

京东导航,添加中间的弹框栏,使用position定位,放在左侧栏的li标签里面,成为一个整体,保证鼠标在弹框里的时候,弹框不消失: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jquery.js&quo

悬浮导航代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

抽屉式导航可能降低产品一半的用户参与度

设想你需要设计一个含有许多页面和模块,不能在一屏内显示完全的应用.你一定会首先想到去设计一个底部或顶部的Tab导航.等一下,多出来的一排导航看上去有点碍眼?我们尝试下把他们收到侧边栏里,或者叫安卓团队给它的名字"侧边抽屉导航". 如果你们的应用的也是多视图的,在你们的团队里,以下话题一定常常引发激烈讨论: 是把导航选项都显示在屏幕上,让你们的用户可以清晰认知app结构,并避免多余操作才能发现;还是使用侧导航让主屏的显示区域更大些. 目前,侧导航在安卓设备上比较流行,而iOS平台上使用的

自定义导航条

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ body::-webkit-scrollbar { width: 16px; height: 16px; background-color: red; } /*定义滚动条轨道 内阴影+圆角*/ body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: g

产品设计课程——TAB导航与侧边抽屉的交互方式

如果你是个产品设计经理,或是说你是一个产品设计师.现在的你需要设计一个含有许多页面和模块,不能在一屏内显示完全的应用.你一定会首先想到去设计一个底部或顶部的Tab导航.可是这样的话,多出来的一排导航看上去有点碍眼.如果尝试把他们收到侧边栏里,比如“侧边抽屉导航”又会如何呢?今天就让我们围绕这产品设计课程,将这一个问题仔细探讨一下,本文来自于e良师益友网,elsyy.com. 如果你们的应用的也是多视图的,在你们的团队里,以下话题一定常常引发激烈讨论: 是把导航选项都显示在屏幕上,让你们的用户可以

Bootstrap 附加导航(Affix)插件 问题与解决方式

使用 Bootstrap 附加导航(Affix)插件 出现各种问题:记录下解决问题的方式,供大家使用参考,言有不当,欢迎拍砖. ★  Link点击后的位置偏移 点击侧导航条时,页面上指定的Link会滚动过高,被顶导航条遮住.这个貌似不是Affix的问题,而是顶导航条固定位置的原因.也可以定义到外层div中,这个自己发挥 Css代码 /* Janky fix for preventing navbar from overlapping */   h1[id] {     padding-top: 

移动端重构——侧边栏导航

demo1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.

为什么说slam技术不等于智能导航?

? ? ? ? 在机器人智能移动中,SLAM发挥了无可比拟的作用,SLAM (simultaneous localization and mapping),也称为CML (Concurrent Mapping and Localization), 主要帮助机器人进行即时定位与地图构建,或并发建图与定位.但SLAM技术并不等于智能导航.为什么这么说呢?原因如下: ? ? ? SLAM技术主要是解决机器人的地图构建与即时定位,而机器人进行智能导航主要解决的是机器人与环境的自主交互,尤其是点到点自主移