JavaScript动画案例——筋斗云，手风琴，固定导航栏
2024-05-11 05:09:37
文章目录
- 手风琴
- 固定导航栏
- 筋斗云
手风琴
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>ul {list-style: none;}* {margin: 0;padding: 0;}div {width: 1150px;height: 400px;margin: 50px auto;border: 1px solid red;overflow: hidden;}div li {width: 240px;height: 400px;float: left;}div ul {width: 1300px;}</style>
</head>
<body>
<div id="box"><ul><li></li><li></li><li></li><li></li><li></li></ul>
</div>
<script src="common.js"></script>
<script>//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值function getStyle(element, attr) {return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;}function animate(element, json, fn) {clearInterval(element.timeId);//清理定时器//定时器,返回的是定时器的idelement.timeId = setInterval(function () {var flag = true;//默认,假设,全部到达目标//遍历json对象中的每个属性还有属性对应的目标值for (var attr in json) {//判断这个属性attr中是不是opacityif (attr == "opacity") {//获取元素的当前的透明度,当前的透明度放大100倍var current = getStyle(element, attr) * 100;//目标的透明度放大100倍var target = json[attr] * 100;var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);current += step;//移动后的值element.style[attr] = current / 100;} else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex//层级改变就是直接改变这个属性的值element.style[attr] = json[attr];} else {//普通的属性//获取元素这个属性的当前的值var current = parseInt(getStyle(element, attr));//当前的属性对应的目标值var target = json[attr];//移动的步数var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);current += step;//移动后的值element.style[attr] = current + "px";}//是否到达目标if (current != target) {flag = false;}}if (flag) {//清理定时器clearInterval(element.timeId);//所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数if (fn) {fn();}}//测试代码console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);}, 20);}//先获取所有的li标签var list = my$("box").getElementsByTagName("li");for (var i = 0; i < list.length; i++) {list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";//鼠标进入list[i].onmouseover = mouseoverHandle;//鼠标离开list[i].onmouseout = mouseoutHandle;}//进入function mouseoverHandle() {for (var j = 0; j < list.length; j++) {animate(list[j], {"width": 100});//动画效果}animate(this, {"width": 800});}//离开function mouseoutHandle() {for (var j = 0; j < list.length; j++) {animate(list[j], {"width": 240});//动画效果}}</script>
</body>
</html>固定导航栏
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0}img {vertical-align: top;}.main {margin: 0 auto;width: 1000px;margin-top: 10px;}.fixed {position: fixed;top: 0;left: 0;}</style>
</head>
<body>
<div class="top" id="topPart"><img src="data:images/top.png" alt=""/>
</div>
<div class="nav" id="navBar"><img src="data:images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart"><img src="data:images/main.png" alt=""/>
</div>
<script src="common.js"></script>
<script>//获取页面向上或者向左卷曲出去的距离的值function getScroll() {return {left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0};}//滚动事件window.onscroll=function () {//向上卷曲出去的距离和最上面的div的高度对比if(getScroll().top>=my$("topPart").offsetHeight){//设置第二个div的类样式my$("navBar").className="nav fixed";//设置第三个div的marginTop的值my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";}else{my$("navBar").className="nav";my$("mainPart").style.marginTop="10px";}};</script>
</body>
</html>筋斗云
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0}ul {list-style: none}body {background-color: #333;}.nav {width: 800px;height: 42px;margin: 100px auto;background: url(images/rss.png) right center no-repeat;background-color: #fff;border-radius: 10px;position: relative;}.nav li {width: 83px;height: 42px;text-align: center;line-height: 42px;float: left;cursor: pointer;}.nav span {position: absolute;top: 0;left: 0;width: 83px;height: 42px;background: url(images/cloud.gif) no-repeat;}ul {position: relative;}</style>
</head>
<body>
<div class="nav"><span id="cloud"></span><ul id="navBar"><li>C++</li><li>C语言</li><li>Shell</li><li>JavaScript</li><li>SQL</li><li>Java</li><li>C#</li><li>Python</li></ul>
</div>
<script src="common.js"></script>
<script>//匀速动画function animate(element, target) {//清理定时器clearInterval(element.timeId);element.timeId = setInterval(function () {//获取元素的当前位置var current = element.offsetLeft;//移动的步数var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);current += step;element.style.left = current + "px";if (current == target) {//清理定时器clearInterval(element.timeId);}//测试代码:console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);}, 20);}//获取云彩var cloud = my$("cloud");//获取所有的li标签var list = my$("navBar").children;//循环遍历分别注册鼠标进入,鼠标离开,点击事件for (var i = 0; i < list.length; i++) {//鼠标进入事件list[i].onmouseover = mouseoverHandle;//点击事件list[i].onclick = clickHandle;//鼠标离开事件list[i].onmouseout = mouseoutHandle;}function mouseoverHandle() {//进入//移动到鼠标此次进入的li的位置animate(cloud, this.offsetLeft);}//点击的时候,记录此次点击的位置var lastPosition = 0;function clickHandle() {//点击lastPosition = this.offsetLeft;}function mouseoutHandle() {//离开animate(cloud, lastPosition);}</script>
</body>
</html>JavaScript动画案例——筋斗云，手风琴，固定导航栏相关推荐
- DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)
目录 1.缓动动画--美团外卖下拉框菜单 2.半透明--信息滑入 3.模态窗口拖拽效果 4.放大镜效果 5.滚动条滑到一定位置的固定导航栏 6.12306购票网站多级联动 7.斗鱼TV无规则弹幕特效 ...
- 微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏 固定导航栏 可滑动导航栏 顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
- CSS3通用顶部固定导航栏代码
下载地址CSS3通用顶部固定导航栏代码是一款漂亮的下拉菜单. dd:
- 【JavaScript】 - 滚动固定导航栏
黄色箭头指向 滚动条 黑色箭头指向 导航栏 没有滚动 之前 导航栏没有固定在顶部 任务是:随着滚动条滚动到一定位置 导航栏固定 顶部 dispaly:fixed 以下代码的 display ...
- bootstrap使用之stickUp（固定导航栏）
1.stickUp是jQuery下的一个导航栏插件,当界面较长时,导航栏会固定在顶部,不会移动. 如下图: 2.废话少说,下载http://www.bootcss.com/p/stickup/.在里面 ...
- CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质 首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步 就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
- 固定导航栏android,Android 状态栏和导航栏的真终极解决方案
去年我写过一篇文章,透明状态栏和导航栏的终极解决方案,并在 Github 上开源了代码,https://github.com/Zackratos/UltimateBar,其实在那之后,我一直对这个项目 ...
- html右侧导航栏固定,固定导航栏.html
Document * { margin: 0; padding: 0 } .top { height: 168px; } img { vertical-align: top; } .main { ma ...
- jquery实现随着鼠标滚动固定导航栏
下面是简单的导航栏固定效果..感觉代码很少,write less Do more.也算是jquery比较方便的原因. 下面代码仅供参考 <!DOCTYPE html> <html l ...
最新文章
- python中字符串前面加一个u或者r的区别
- 使用Apache Cassandra设置一个SpringData项目
- MyBatis之Mapper动态代理开发
- ESXI6.5虚拟开机自启动设置
- linux 抓包文件 导出,Fiddler抓包13-fiddler 抓包导出 curl 命令行
- mysql 搜索_MySQL模糊搜索的几种姿势
- MATLAB挠曲线方程,挠曲线方程.PPT
- 概要设计模板 外部接口设计_0226 rest接口设计
- 项目管理知识体系指南 （五）
- 密钥加密法（指针应用）
- 决策树可视化以及数据所要的处理（查漏补缺）
- 根据卡号查询所属银行
- 索引的使用以及常见索引类型，组合索引的具体使用方法。
- 编程实践精华总结集锦系列2: SpringBoot/Maven/IDEA/Java/Kotlin/Redis等等
- Pyhton语言介绍
- c++狼人杀12人标准场有发言有选警附exe文件
- 基于java+springboot+mybatis+vue+elementui的旧物置换网站
- 2021-07-01:并查集，200岛屿问题，547朋友圈问题
- RTFN：一种用于时间序列分类的鲁棒时间特征网络（概要解析）
- CocoaChina 允许iOS开发者相互推广自己的作品，发码大师相当不错！