没有合适的资源?快使用搜索试试~ 我知道了~
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2 下载量 87 浏览量
2020-12-02
20:09:36
上传
评论
收藏 209KB PDF 举报
温馨提示
试读
4页
大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案。你可以设置一个特定的name属性的锚链接,并使用href值作为哈希符号来跳过页面。这种效果当需要列出很长的数据集时,是非常实用的,比方说一个FAQ页面,一问一答的形式经常采用这样的效果,然而页面跳转对于游客来说有时候并不是好友好,因为他一点击直接跳转,陌生的游客对此可能感到困惑,不知道当前的数据跑那里去了, 在本教程中,我将探讨一个解决方案,创建一个简单的页面索引,并采用锚点链接在页面上。”跳转”动作进行动画处理,向下滚动到达这个链接的容器。(完美兼容IE6,7,8) 在线演示 布局 首先是基本的index.html页面
资源详情
资源评论
资源推荐
jQuery建立一个按字母顺序排列的友好页面索引建立一个按字母顺序排列的友好页面索引(兼容兼容IE6/7/8)
大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案。你可以设置一个特定的name属性的锚链接,并
使用href值作为哈希符号来跳过页面。这种效果当需要列出很长的数据集时,是非常实用的,比方说一个FAQ页面,一问一答
的形式经常采用这样的效果,然而页面跳转对于游客来说有时候并不是好友好,因为他一点击直接跳转,陌生的游客对此可能
感到困惑,不知道当前的数据跑那里去了,
在本教程中,我将探讨一个解决方案,创建一个简单的页面索引,并采用锚点链接在页面上。”跳转”动作进行动画处理,向下
滚动到达这个链接的容器。(完美兼容IE6,7,8)
在线演示
布局布局
首先是基本的index.html页面,我加入了一个典型的HTML5文档类型。styles.css为我们的页面样式表,indexscroller.js自定义的
jQuery代码。
使用jquery代码别忘记引入谷歌jquery库,旧的浏览器不支持HTML5的html5shiv trunk 库的副本。在主体部分我使用的是定制
的谷歌Webfont字体,以及与一些艺术CSS3效果。
代码如下:
<!doctype html>
<html lang=”en-US”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>
<title>jQuery Alphabetical Scrolling Links Index</title>
<meta name=”author” content=”Jake Rocheleau”>
<link rel=”shortcut icon” href=”http://spyrestudios.com/favicon.ico”>
<link rel=”icon” href=”http://spyrestudios.com/favicon.ico”>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Milonga”>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”indexscroller.js”></script>
<!–[if lt IE 9]>
<script type=”text/javascript” src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
weixin_38731385
- 粉丝: 2
- 资源: 871
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- CISCN2024-re3-rust-baby(Frida多字节程序插桩爆破)
- soft:磁盘清理工具
- .netcore控制台使用Nssm打包windows服务,加winform管理服务界面
- db-college.sql
- wpf-dragdrop-treeview(WPF较好拖拽效果).7z
- img-1716258776282bf88540b0e387ddd2ea677d02c7f3594ad72383f796d86b02fb7d2ae2543915d.jpg
- 《伦敦共享单车数据分析与代码》
- SKIP-v2.1.1.apk
- IMG20240521103815.jpg
- 松下A4系列伺服参数调试软件
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0