鼠标滚动导航放大缩小

进入页面的样式

鼠标向下的样式

滚轮向上还是可以变大，直接上代码，

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>鼠标滚动放大缩小导航栏代码</title>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0;}
.menu .header { position: fixed; left: 0; top: 0; width: 100%; background-color: #323436;}
.menu .inner { width: 1000px; margin: 0 auto; overflow: hidden; zoom: 1;}
.menu h1 { float: left;}
.menu h1 img { display: block; border: 0;}
.menu .nav { float: right; list-style-type: none; font-family: "Microsoft Yahei";}
.menu .nav li { float: left; margin-left: 5px;}
.menu .nav a { float: left; color: #cecece; text-decoration: none;}
.menu .nav a:hover { background-color: #555;}.menu .large .inner { padding: 20px 0;}
.menu .large h1 img { height: 64px;}
.menu .large .nav { padding-top: 10px;}
.menu .large .nav a { height: 44px; padding: 0 20px; line-height: 44px; font-size: 18px;}.menu .small .inner { padding: 10px 0;}
.menu .small h1 img { height: 34px;}
.menu .small .nav { padding-top: 3px;}
.menu .small .nav a { height: 28px; padding: 0 10px; line-height: 28px; font-size: 14px;}.menu .header, .menu .inner, .menu a, .menu img, .menu li { transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;}.section { height: 1000px;}
</style>
</head><body class="menu">
<div class="header large"><div class="inner"><!-- <h1><a href="#"><img src="data:images/logo.png" alt="logo"></a></h1> --><ul class="nav"><li><a class="cur" href="#" title="首页">首页</a></li><li><a href="#" title="详情">详情</a></li><li><a href="#" title="可以得">可以得</a></li><li><a href="#" title="阿西吧">阿西吧</a></li></ul></div>
</div>
<div class="section"><p style="margin-top: 300px; text-align: center; color: #f50;">鼠标向下滚动查看菜单变化</p>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){$(window).on('scroll', function(){if($(window).scrollTop() > 100){$('.header').removeClass('large').addClass('small');} else {$('.header').removeClass('small').addClass('large');}});
});
</script>
</body>

鼠标滚动导航放大缩小相关推荐

关于viewer.js插件js版鼠标滚动事件放大缩小改为图片移动
主要是为了记录下需求中解决问题的思路,本人前端相当糟糕. 问题的产生是由于图片太长,页面一次性展示不全,业务人员提出修改前端图片显示中的鼠标滚动改为上下移动.由于项目中图片展示使用的是viewer,j ...
vue实现鼠标滚动图片放大缩小拖拽
1.封装可放大缩小拖拽组件 <template><div class="drag-outer"ref="dragWrap":style=&qu ...
Unity 在zSpace上使用鼠标控制相机旋转和鼠标指引式放大缩小，在触屏上手势位置为中心放大缩小
在zSpace上使用鼠标控制相机旋转和鼠标指引式放大缩小,在触屏上手势位置为中心放大缩小鼠标和触屏的操作下面展示一些内联代码片. using System; using System.Colle ...
python字体大小快捷键_PyCharm（2019.1版本）用鼠标滚轮控制放大缩小字体
今天准备使用pycharm来编写scrapy爬虫,结果发现字体很小,习惯性用Ctrl+鼠标滚轮来控制字体大小,发现它竟然不听使唤,才想起来PyCharm是新安装的一直没用,赶紧来设置一番吧. 使用过p ...
pycharm编辑器如何用鼠标滚轮随时放大缩小代码
pycharm编辑器如何用鼠标滚轮随时放大缩小代码我们用pycharm的时候发现不能快捷的像其他编辑器那样用鼠标滚轮随时放大缩小代码,这是因为你还没有设置,下面我们就来设置一下. 1.放大代码设置 ...
js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）
系列文章目录文章目录系列文章目录背景与效果图 1.背景如下(功能图): 2.效果图如下: 拖拽后的效果缩放的效果放大的效果一.功能:支持鼠标长按拖拽 1.鼠标事件: 2.拖拽功能流程 3. ...
js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小
方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){$(".MAX_div").remove();$("#Cover_Div&q ...
mxGraph画图区域使用鼠标滚轮实现放大/缩小
// 重写鼠标滚轮事件 mxEvent.addMouseWheelListener = function (funct) {}// 添加初次载入事件 window.onload = function ...
mxGraph绘图区域使用鼠标滚轮实现放大/缩小
// 重写鼠标滚轮事件 mxEvent.addMouseWheelListener = function (funct) {}// 增加初次加载事件 window.onload = function ...

鼠标滚动导航放大缩小

鼠标滚动导航放大缩小相关推荐

最新文章

热门文章