jQuery页面滚动右侧浮动导航切换

体验效果:http://hovertree.com/texiao/jquery/49/效果图:代码如下:转自:http://hovertree.com/h/bjaf/2slij8q4.htm参

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

jQuery页面滚动右侧浮动导航切换此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

体验效果:
http://hovertree.com/texiao/jquery/49/

效果图:
jQuery页面滚动右侧浮动导航切换

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery锚点滚动导航菜单 - 何问起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/49/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/49/css/menu.css">
<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/49/js/menu.js"></script>
</head>
<body>

<div id="menu">
<ul>
<li><a href="#item1" class="cur">One</a></li>
<li><a href="#item2">Two</a></li>
<li><a href="#item3">Three</a></li>
<li><a href="#item4">Four</a></li>
<li><a href="#item5">Five</a></li>
</ul>
</div>

<div id="content">
<div class="item" id="item1">
<h1>1F</h1>
<h1>jQuery锚点滚动导航菜单</h1>
<a href="http://hovertree.com/h/bjaf/2slij8q4.htm" target="_blank">原文</a>
<a href="http://hovertree.com" target="_blank">首页</a>
<a href="http://hovertree.com/texiao/" target="_blank">特效</a>
<br />请点击右侧导航或 滚动鼠标 看看效果。
</div>
<div class="item" id="item2">
<h1>2F</h1>
</div>
<div class="item" id="item3">
<h1>3F</h1>
<img src="http://hovertree.com/hvtimg/bjafjd/070joeh7.jpg" />
</div>
<div class="item" id="item4">
<h1>4F</h1>
<img src="http://hovertree.com/hvtimg/bjafjd/hs6oi257.jpg" alt="战斗" />
</div>
<div class="item" id="item5">
<h1>5F</h1>
<img src="http://hovertree.com/hvtimg/bjafjd/xusm0re6.jpg" alt="美女" />
</div>
</div>
</body>
</html>

转自:http://hovertree.com/h/bjaf/2slij8q4.htm

参考:hovertree.com/code/jquery/nqgp4xcl.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120619.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 一次阿里笔试

    一次阿里笔试时间2020年2月5日主题阿里一面:笔试/代码面时长一个小时前置条件已经历电话面试,约定好笔试时间其它社招、在线笔试结果通过题目类型并发、很简单的算法题题目及当时自己提交的答案1、(JDK1.8)线程A打印a,线程B打印l,线程C打印i,三个线程交替打印,各打印102次,alialiali……publicclassThreadP…

  • win7 boot设置_重装系统boot missing

    win7 boot设置_重装系统boot missing转自 http://blog.wsdd.org/安装linux,vista/win7双系统后,怎么引导是个问题理论上,可以从windows的bootloader引导linux,也可以linux的grub引导windows但windows更霸道,经常霸占MBR,所以最好是linux不放MBR,然后从windows的bootloader引导linux把linux装在自己的分区,不要

    2022年10月12日
  • 怎样用python求平均值_如何用python求平均值【Python教程】,python平均值[通俗易懂]

    进修了Python相干数据类型,函数的学问后,应用字符串的支解完成了输入恣意多个数据,并盘算其平均值的小顺序。思绪是吸收输入的字符串,以空格为分隔符,将支解的数据存入列表(lst1)中,将lst1中的数据转存入另一个空列表(lst)中,转存时将字符串转化为整型,从而应用函数求出lst中数的和、平均值。print(“—–求平均值,可输入恣意多个数——-“)lst=[]#定义一个…

  • rsyslog详解

    rsyslog详解一、日志介绍日志概念日志是系统用来记录系统及应用程序运行时的一些相关信息的文本文件日志作用日志是为了保存相关程序的运行状态、错误信息等,为了对系统进行分析、保存历史记录以及在出现错误时发现、分析错误使用linux系统日志类型内核信息服务信息应用程序信息二、rsyslog1、rsyslog介绍rsyslog是linux系统中用来实现日志功能的服务。默认已经安装,并且自动启用。作用:主要用来采集日志,不生产日志其特性包括: 支持输出日志到各种数据库,如MySQ

  • goland 激活码2021(破解版激活)

    goland 激活码2021(破解版激活),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号