js锚点
2011-02-22 13:48
78 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0049)http://www.planeart.cn/downs/AnchorArt/demo.html? -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>AnchorArt.js</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT src="AnchorArt_js.files/AnchorArt.js" type=text/javascript></SCRIPT>
<STYLE type=text/css>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #eee
}
P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 12px 0px; PADDING-TOP: 0px
}
#wrapper {
BORDER-RIGHT: #ddd 3px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 20px; MARGIN: 0px 0px 20px 220px; BORDER-LEFT: #ddd 3px solid; WIDTH: 550px; PADDING-TOP: 20px; BORDER-BOTTOM: #ddd 3px solid; BACKGROUND-COLOR: #fff; moz-border-radius: 0px 0px 15px 15px
}
H1 {
FONT-SIZE: 20px; Z-INDEX: 2; LEFT: 10px; MARGIN: 0px 0px 0px 20px; COLOR: #aa0000; FONT-FAMILY: Georgia, "Times New Roman", Times, serif; POSITION: absolute; TOP: 20px
}
H2 {
FONT-SIZE: 16px; MARGIN: 20px 0px 10px 20px; COLOR: #aaa; FONT-FAMILY: "Arial Narrow", Arial, Helvetica, sans-serif
}
#nav {
BORDER-RIGHT: #ddd 3px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ddd 3px solid; PADDING-LEFT: 10px; FONT-SIZE: 12px; LEFT: 20px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ddd 3px solid; WIDTH: 150px; COLOR: #000; LINE-HEIGHT: 1.4em; PADDING-TOP: 10px; BORDER-BOTTOM: #ddd 3px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; POSITION: absolute; TOP: 38px; BACKGROUND-COLOR: #fff; moz-border-radius: 15px
}
#nav H2 {
MARGIN: 0px 0px 5px; BORDER-BOTTOM: #ddd 1px solid
}
#nav A {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; COLOR: #777; PADDING-TOP: 3px; TEXT-DECORATION: none
}
#nav A:hover {
COLOR: #444; BACKGROUND-COLOR: #f7f7f7
}
#wrap {
FONT-SIZE: 12px; MARGIN-LEFT: 250px; WIDTH: 350px
}
#header {
BORDER-RIGHT: #ddd 3px solid; PADDING-RIGHT: 1em; BORDER-TOP: #ddd 3px solid; PADDING-LEFT: 1em; BACKGROUND: #aa0000; PADDING-BOTTOM: 1em; BORDER-LEFT: #ddd 3px solid; COLOR: #fff; PADDING-TOP: 1em; BORDER-BOTTOM: #ddd 3px solid; moz-border-radius: 3px
}
#header A {
COLOR: #fff
}
#header STRONG {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
#header .author {
}
.box {
BORDER-RIGHT: #ddd 3px solid; BORDER-TOP: #ddd 3px solid; MARGIN-TOP: 20px; FONT-SIZE: 100px; BORDER-LEFT: #ddd 3px solid; COLOR: #ddd; LINE-HEIGHT: 300px; BORDER-BOTTOM: #ddd 3px solid; FONT-FAMILY: Georgia, "Times New Roman", Times, serif; HEIGHT: 300px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center; moz-border-radius: 15px
}
.top {
PADDING-RIGHT: 18px; TEXT-ALIGN: right
}
.top A {
FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #666; TEXT-DECORATION: none
}
.top A:hover {
COLOR: #aa0000
}
#footer {
MARGIN-TOP: 20px; BACKGROUND: #aa0000; OVERFLOW: hidden; HEIGHT: 5px
}
#footer {
DISPLAY: none
}
</STYLE>
<META content="MSHTML 6.00.2900.6049" name=GENERATOR></HEAD>
<BODY>
<H1>AnchorArt.js</H1>
<DIV id=nav>
<H2>Demo</H2>
<DIV><A href="http://www.planeart.cn/downs/AnchorArt/demo.html?#a">[A]
跳转</A></DIV>
<DIV><A href="http://www.planeart.cn/downs/AnchorArt/demo.html?#b">[B]
跳转</A></DIV>
<DIV><A href="http://www.planeart.cn/downs/AnchorArt/demo.html?#c">[C]
跳转</A></DIV>
<DIV><A href="http://www.planeart.cn/downs/AnchorArt/demo2.html#d"
target=_blank>[D] 新窗口</A></DIV></DIV>
<DIV id=wrap>
<DIV id=header>
<P>简介：AnchorArt.js可以让页面锚点链接产生美妙的滑动效果，并且<STRONG>新窗口</STRONG>打开仍然有效！</P>
<P>使用：简单！只需要在页面头部引入 <A href="AnchorArt_js.files/AnchorArt.js">AnchorArt.js</A>
即可。</P>
<P>AnchorArt.js By <A title=planeArt.cn href="http://www.planeart.cn/">Tang
Bin</A> 2009.08.25</P></DIV>
<DIV id=main>
<DIV class=box id=a>A </DIV>
<DIV class=top><A
href="http://www.planeart.cn/downs/AnchorArt/demo.html?#header">TOP</A></DIV>
<DIV class=box id=b>B </DIV>
<DIV class=top><A
href="http://www.planeart.cn/downs/AnchorArt/demo.html?#header">TOP</A></DIV>
<DIV class=box id=c>C </DIV>
<DIV class=top><A
href="http://www.planeart.cn/downs/AnchorArt/demo.html?#header">TOP</A></DIV>
<DIV class=box id=d>D </DIV>
<DIV class=top><A
href="http://www.planeart.cn/downs/AnchorArt/demo.html?#header">TOP</A></DIV></DIV>
<DIV id=footer>
<SCRIPT language=JavaScript src="AnchorArt_js.files/stat.htm"
charset=utf-8></SCRIPT>
</DIV></DIV></BODY></HTML>
<!-- saved from url=(0049)http://www.planeart.cn/downs/AnchorArt/demo.html? -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>AnchorArt.js</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT src="AnchorArt_js.files/AnchorArt.js" type=text/javascript></SCRIPT>
<STYLE type=text/css>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #eee
}
P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 12px 0px; PADDING-TOP: 0px
}
#wrapper {
BORDER-RIGHT: #ddd 3px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 20px; MARGIN: 0px 0px 20px 220px; BORDER-LEFT: #ddd 3px solid; WIDTH: 550px; PADDING-TOP: 20px; BORDER-BOTTOM: #ddd 3px solid; BACKGROUND-COLOR: #fff; moz-border-radius: 0px 0px 15px 15px
}
H1 {
FONT-SIZE: 20px; Z-INDEX: 2; LEFT: 10px; MARGIN: 0px 0px 0px 20px; COLOR: #aa0000; FONT-FAMILY: Georgia, "Times New Roman", Times, serif; POSITION: absolute; TOP: 20px
}
H2 {
FONT-SIZE: 16px; MARGIN: 20px 0px 10px 20px; COLOR: #aaa; FONT-FAMILY: "Arial Narrow", Arial, Helvetica, sans-serif
}
#nav {
BORDER-RIGHT: #ddd 3px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ddd 3px solid; PADDING-LEFT: 10px; FONT-SIZE: 12px; LEFT: 20px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ddd 3px solid; WIDTH: 150px; COLOR: #000; LINE-HEIGHT: 1.4em; PADDING-TOP: 10px; BORDER-BOTTOM: #ddd 3px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; POSITION: absolute; TOP: 38px; BACKGROUND-COLOR: #fff; moz-border-radius: 15px
}
#nav H2 {
MARGIN: 0px 0px 5px; BORDER-BOTTOM: #ddd 1px solid
}
#nav A {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; COLOR: #777; PADDING-TOP: 3px; TEXT-DECORATION: none
}
#nav A:hover {
COLOR: #444; BACKGROUND-COLOR: #f7f7f7
}
#wrap {
FONT-SIZE: 12px; MARGIN-LEFT: 250px; WIDTH: 350px
}
#header {
BORDER-RIGHT: #ddd 3px solid; PADDING-RIGHT: 1em; BORDER-TOP: #ddd 3px solid; PADDING-LEFT: 1em; BACKGROUND: #aa0000; PADDING-BOTTOM: 1em; BORDER-LEFT: #ddd 3px solid; COLOR: #fff; PADDING-TOP: 1em; BORDER-BOTTOM: #ddd 3px solid; moz-border-radius: 3px
}
#header A {
COLOR: #fff
}
#header STRONG {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
#header .author {
}
.box {
BORDER-RIGHT: #ddd 3px solid; BORDER-TOP: #ddd 3px solid; MARGIN-TOP: 20px; FONT-SIZE: 100px; BORDER-LEFT: #ddd 3px solid; COLOR: #ddd; LINE-HEIGHT: 300px; BORDER-BOTTOM: #ddd 3px solid; FONT-FAMILY: Georgia, "Times New Roman", Times, serif; HEIGHT: 300px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center; moz-border-radius: 15px
}
.top {
PADDING-RIGHT: 18px; TEXT-ALIGN: right
}
.top A {
FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #666; TEXT-DECORATION: none
}
.top A:hover {
COLOR: #aa0000
}
#footer {
MARGIN-TOP: 20px; BACKGROUND: #aa0000; OVERFLOW: hidden; HEIGHT: 5px
}
#footer {
DISPLAY: none
}
</STYLE>
<META content="MSHTML 6.00.2900.6049" name=GENERATOR></HEAD>
<BODY>
<H1>AnchorArt.js</H1>
<DIV id=nav>
<H2>Demo</H2>
<DIV><A href="http://www.planeart.cn/downs/AnchorArt/demo.html?#a">[A]
跳转</A></DIV>
<DIV><A href="http://www.planeart.cn/downs/AnchorArt/demo.html?#b">[B]
跳转</A></DIV>
<DIV><A href="http://www.planeart.cn/downs/AnchorArt/demo.html?#c">[C]
跳转</A></DIV>
<DIV><A href="http://www.planeart.cn/downs/AnchorArt/demo2.html#d"
target=_blank>[D] 新窗口</A></DIV></DIV>
<DIV id=wrap>
<DIV id=header>
<P>简介：AnchorArt.js可以让页面锚点链接产生美妙的滑动效果，并且<STRONG>新窗口</STRONG>打开仍然有效！</P>
<P>使用：简单！只需要在页面头部引入 <A href="AnchorArt_js.files/AnchorArt.js">AnchorArt.js</A>
即可。</P>
<P>AnchorArt.js By <A title=planeArt.cn href="http://www.planeart.cn/">Tang
Bin</A> 2009.08.25</P></DIV>
<DIV id=main>
<DIV class=box id=a>A </DIV>
<DIV class=top><A
href="http://www.planeart.cn/downs/AnchorArt/demo.html?#header">TOP</A></DIV>
<DIV class=box id=b>B </DIV>
<DIV class=top><A
href="http://www.planeart.cn/downs/AnchorArt/demo.html?#header">TOP</A></DIV>
<DIV class=box id=c>C </DIV>
<DIV class=top><A
href="http://www.planeart.cn/downs/AnchorArt/demo.html?#header">TOP</A></DIV>
<DIV class=box id=d>D </DIV>
<DIV class=top><A
href="http://www.planeart.cn/downs/AnchorArt/demo.html?#header">TOP</A></DIV></DIV>
<DIV id=footer>
<SCRIPT language=JavaScript src="AnchorArt_js.files/stat.htm"
charset=utf-8></SCRIPT>
</DIV></DIV></BODY></HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js跳转到锚点(jQuery动画滚动到锚点）
- js 定位到某个锚点
- js 锚点问题
- 原生js模拟锚点，实现点击后，内容定位到本页的对应位置
- js跳转到锚点(jQuery动画滚动到锚点）
- js 页面加载完成之后调到锚点
- js 获取url锚点内容
- js跳转到锚点
- 原声js 锚点监听
- html锚点的作用和js选项卡锚点跳转的使用
- JS跳转到页面某个锚点
- js重定向后跳转到当前页面锚点
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
- js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
- js的location.hash获取锚点
- js定位到页面某个位置（锚点）
- js 锚点平滑定位
- js 锚点联动 回调渲染改变a标签 定位 滚动 导航
- html 锚点（超链接跳转和js中跳转）
- 锚点回顶部js