文档章节

html5中的锚点特效

sunshinewyf
 sunshinewyf
发布于 2015/08/03 22:55
字数 896
阅读 3820
收藏 3

html5的强大让我感觉越发兴奋,今天在写一个js demo---网页定位导航特效的时候,在涉及到页面的快速定位的时候,我还以为要用很复杂的js实现,结果之后才发现,html5有一个很酷的效果,虽然这个锚点特效只能支持Chrome,火狐,IE8以上等浏览器。但是在不考虑一些旧的浏览器的兼容情况的时候,可以使用,而且效果是杠杠的

在html5中,锚点使用id名称而不再是name属性了

demo 例子:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>山寨版购物网--实现网页定位导航系统</title>
            <style>
               body{margin: 0;padding: 0;}
               h1{margin-left: 20px;}
               .content{ width:1063px;margin: 0 auto;height: 5000px;}
               ul{list-style: none;}
               .item{width:826px;margin: 0 auto;height: 1000px;margin-bottom: 30px;border:1px dotted #0088bb;}
               .item li{width:250px;height: 300px;float: left;display: inline;margin-right: 10px;border:1px solid #0088bb;}
               .item h2{font-size: 16px;margin-bottom: 10px;clear: both;}
               img{width:250px;height: 300px;}
               #menu{ position: fixed;top:100px;left: 50%;margin-left: 380px;width: 80px;}
               #menu li a{ display: block;margin: 5px 0;font-size: 14px;font-weight: bold;color: #333;width: 80px;height: 50px;line-height: 50px;text-decoration: none;text-align: center;}
               #menu ul li a:hover,
               #menu ul li a .current{
                  color: #fff; background: #0088bb;
               }
            </style>
        </head>
        <body>
            <div id="menu">
                <ul>
                    <li><a href="#item1">1F 洗浴</a></li>
                    <li><a href="#item2">2F 美妆</a></li>
                    <li><a href="#item3">3F 童装</a></li>
                    <li><a href="#item4">4F 书籍</a></li>
                    <li><a href="#item5">5F 数码</a></li>

                </ul>
            </div>
            <div class="content">
                <h1>购物网</h1>
                <div id="item1" class="item">
                    <h2>1F 洗浴</h2>
                    <ul>
                        <li><a href=""><img src="1.jpg" alt=""/></a></li>
                        <li><a href=""><img src="1.jpg" alt=""/></a></li>
                        <li><a href=""><img src="1.jpg" alt=""/></a></li>
                        <li><a href=""><img src="1.jpg" alt=""/></a></li>
                        <li><a href=""><img src="1.jpg" alt=""/></a></li>
                        <li><a href=""><img src="1.jpg" alt=""/></a></li>
                        <li><a href=""><img src="1.jpg" alt=""/></a></li>
                        <li><a href=""><img src="1.jpg" alt=""/></a></li>
                        <li><a href=""><img src="1.jpg" alt=""/></a></li>
                    </ul>
                </div>
                
                <div id="item2" class="item">
                    <h2>2F 美妆</h2>
                    <ul>
                        <li><a href=""><img src="2.jpg" alt=""/></a></li>
                        <li><a href=""><img src="2.jpg" alt=""/></a></li>
                        <li><a href=""><img src="2.jpg" alt=""/></a></li>
                        <li><a href=""><img src="2.jpg" alt=""/></a></li>
                        <li><a href=""><img src="2.jpg" alt=""/></a></li>
                        <li><a href=""><img src="2.jpg" alt=""/></a></li>
                        <li><a href=""><img src="2.jpg" alt=""/></a></li>
                        <li><a href=""><img src="2.jpg" alt=""/></a></li>
                        <li><a href=""><img src="2.jpg" alt=""/></a></li>
                    </ul>
                </div>
                
                <div id="item3" class="item">
                    <h2>3F 童装</h2>
                    <ul>
                        <li><a href=""><img src="3.jpg" alt=""/></a></li>
                        <li><a href=""><img src="3.jpg" alt=""/></a></li>
                        <li><a href=""><img src="3.jpg" alt=""/></a></li>
                        <li><a href=""><img src="3.jpg" alt=""/></a></li>
                        <li><a href=""><img src="3.jpg" alt=""/></a></li>
                        <li><a href=""><img src="3.jpg" alt=""/></a></li>
                        <li><a href=""><img src="3.jpg" alt=""/></a></li>
                        <li><a href=""><img src="3.jpg" alt=""/></a></li>
                        <li><a href=""><img src="3.jpg" alt=""/></a></li>
                    </ul>
                </div>
                
                <div id="item4" class="item">
                    <h2>4F 书籍</h2>
                    <ul>
                        <li><a href=""><img src="4.jpg" alt=""/></a></li>
                        <li><a href=""><img src="4.jpg" alt=""/></a></li>
                        <li><a href=""><img src="4.jpg" alt=""/></a></li>
                        <li><a href=""><img src="4.jpg" alt=""/></a></li>
                        <li><a href=""><img src="4.jpg" alt=""/></a></li>
                        <li><a href=""><img src="4.jpg" alt=""/></a></li>
                        <li><a href=""><img src="4.jpg" alt=""/></a></li>
                        <li><a href=""><img src="4.jpg" alt=""/></a></li>
                        <li><a href=""><img src="4.jpg" alt=""/></a></li>
                    </ul>
                </div>
                
                <div id="item5" class="item">
                    <h2>5F 数码</h2>
                    <ul>
                        <li><a href=""><img src="5.jpg" alt=""/></a></li>
                        <li><a href=""><img src="5.jpg" alt=""/></a></li>
                        <li><a href=""><img src="5.jpg" alt=""/></a></li>
                        <li><a href=""><img src="5.jpg" alt=""/></a></li>
                        <li><a href=""><img src="5.jpg" alt=""/></a></li>
                        <li><a href=""><img src="5.jpg" alt=""/></a></li>
                        <li><a href=""><img src="5.jpg" alt=""/></a></li>
                        <li><a href=""><img src="5.jpg" alt=""/></a></li>
                        <li><a href=""><img src="5.jpg" alt=""/></a></li>
                    </ul>
                </div>
                
            </div>
        </body>
    </html>

  html5的功能还是很强大的,希望各浏览器能早日统一


© 著作权归作者所有

sunshinewyf
粉丝 17
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
加载中

评论(2)

sunshinewyf
sunshinewyf 博主
没有,我找了一下资料,html4用的还是name,而且html中的name只对a标签有效,对div等其他元素无效,在html5中完全统一了
南漂一卒
南漂一卒
不一直都是 ID 吗?HTML 4 就有 锚点切换了……
html5新效果,请各位同事本周学习一下

Twitter“点赞”红心按钮CSS3动画特效 http://www.htmleaf.com/Demo/201508302494.html HTML5 SVG制作滚动变形的半圆形页面头部特效 http://www.htmleaf.com/html5/SVG/201508302493.html H......

hi30059478
2016/02/21
17
0
分享10款效果惊艳的HTML5图片特效

在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家。 1、HTML5 3D正方体旋转动画 很酷的3D特效 之前...

ruby_chen
2014/03/26
4.4K
1
精挑细选 8款HTML5/jQuery应用助网站走向高上大

在WEB3.0的时代,我们的网站不仅要实现实用价值,更要为用户设计优秀的用户体验。jQuery是一个不错的JS框架,结合目前最新的HTML5技术,我们可以将自己的网站脱胎换骨,立马走向高上大,至少...

yykj
2014/04/03
1K
1
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
2018/04/25
0
0
前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内附有时钟效果代码 ...

我的卡
2018/12/24
216
0

没有更多内容

加载失败,请刷新页面

加载更多

arduino项目-1. 模拟楼道灯

@toc 1.1 情景说明 说明 漆黑的夜晚,当有人非法进入一所房屋,房屋内的灯在恰当的时间亮起,也许会有效阻止非法活动的继续。 效果展示 1.2 实验器材 器材名称 数量 继电器 1 人体红外感应器...

acktomas
24分钟前
4
0
Nacos 常见问题及解决方法

Nacos 开源至今已有一年,在这一年里,得到了很多用户的支持和反馈。在与社区的交流中,我们发现有一些问题出现的频率比较高,为了能够让用户更快的解决问题,我们总结了这篇常见问题及解决方...

阿里云官方博客
30分钟前
6
0
pinyin4j 满足中文转拼音的需求

引入依赖 // https://mvnrepository.com/artifact/com.belerweb/pinyin4j //汉字转拼音compile group: 'com.belerweb', name: 'pinyin4j', version: '2.5.1' 写入中文转拼英的工具......

edison_kwok
35分钟前
5
0
IPSE接入Substrate/Polkadot插槽实现互操作性的运行原理

Substrate框架将区块链的众多功能都模块化,对于开发者来说,只是一个选择的问题,同时还保持了众多的可以定制的功能和模块,比如底层通信模块,比如账户体系,比如共识机制等都是可以自己定...

IPSE
41分钟前
156
0
linux配置安装phpMyAdmin的步骤记录

1、首先在phpMyAdmin官方网站 http://www.phpmyadmin.net/downloads下载源码包,或者通过脚本之家进行下载://www.jb51.net/codes/405261.html ,下载后上传到服务器解压即可,或者通过Linux...

蜗牛女孩
43分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部