帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 楼层导航(原创)
楼层导航(原创)
浏览:642次
-
评论:0次
-
发布时间:2017-04-24
Html
Css
Js
头部
服饰
美妆
手机
家电
数码
运动
居家
母婴
食品
图书
1F
服饰
2F
美妆
3F
手机
4F
家电
5F
数码
6F
运动
7F
居家
8F
母婴
9F
食品
10F
图书
* { margin:0; padding:0; } .main div { width:90%; height:400px; text-align:center; margin:10px auto; } li { list-style-type:none; width:40px; height:40px; line-height:40px; text-align:center; border-bottom:1px dashed #aaa; position:relative; } li.hover { background-color:#c81623; } /*鼠标移动上去后的效果*/ li span { display:none; position:absolute; width:40px; height:40px; text-align:center; } li.hover span { display:block; top:0; left:0; background-color:#c81623; color:white; } /*鼠标移动上去后的效果*/ ul { position:fixed; left:10px; top:100px; display:none; } li span.cli { display:block; top:0; left:0; background-color:#c81623; color:white; }
//鼠标移动上去的事件 $(function() { $("ul li").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); }); var mark = 1; //鼠标点击事件 $("ul li").click(function() { $(this).find("span").addClass("cli"); $(this).siblings().find('span').removeClass("cli"); //siblings为找到该li的所有同辈元素; }); //鼠标点击跳转效果 $("ul li").click(function() { mark = 2; var index = $(this).index(); var h = $(".louti").eq(index).offset().top; //offset为获取匹配元素在当前视口的相对偏移,有top和left; $('body').animate({ scrollTop: h }, 500, function() { //scrollTop为获取匹配元素相对滚动条顶部的偏移。 mark = 1 }) }); $(window).scroll(function() { var H = $(this).scrollTop(); //获取滚动条的高度 if (mark == 1) { $(".louti").each(function() { index = $(this).index(); h = $(".louti").eq(index).offset().top; if (H >= h) { $("li").eq(index).find("span").addClass("cli"); $("li").eq(index).siblings().find("span").removeClass("cli") } }); } //当滚动到一定高度时楼梯式导航消失与显示 var $height = $(window).scrollTop(); var $main_h = $(".main").offset().top; console.log($height); console.log($main_h); if ($height > $main_h) { $("ul").fadeIn(600); } else { $("ul").fadeOut(600); } }) })
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
2.1.1
<!doctype html><html><head><meta charset="utf-8"><title>楼层导航(原创)-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:鼠标滚动,显示对应的楼层导航
纯JS下拉列表二级联动
根据容器的高度进行截取字符的长度
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
642
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值