htm5实现网页定位特效

最新推荐文章于 2022-05-15 00:03:23 发布
最新推荐文章于 2022-05-15 00:03:23 发布
阅读量328 收藏
点赞数
分类专栏： web 文章标签： 页面定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hejianping911/article/details/52680923
版权

htm5实现网页定位特效

实现一个非常简单的类似天猫楼层定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        body{
            font-size: 12px;
            line-height: 1.7;
        }
        li{
            list-style:none;
        }
        #content{
            width:800px;
            margin: 0 auto;
            padding: 20px;
        }
        #content h1{
            color: aqua;
        }
        #content .item{
            padding: 20px;
            margin-bottom: 20px;
            border: #0088bb dotted 1px;
        }
        #content .item h2{
            font-size: 16px;
            font-weight: bold;
            border-bottom: #0088bb solid 2px;
            margin-bottom: 10px;
        }
        #content .item li{
            display: inline;
            margin-right: 10px;
        }
        #content .item li a img{
            width: 230px;
            height: 230px;
            border: none;
        }
        #menu{
            position: fixed;
            top:100px;
            left:50%;
            margin-left: 410px;
            width: 80px;
        }
        #menu ul li a{
            display: block;
            margin: 5px 0;
            font-size:14px;
            font-weight:bold;
            color: #333333;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;

        }
        #menu ul li a:hover,
        #menu ul li a.current{
            color: #ffffff;
            background: #0088bb;

        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(window).scroll(function(){
                var top=$(document).scrollTop();
                //console.log(top);
                var menu=$("#menu");
                var items=$("#content").find(".item");
                var currentId="";
                items.each(function () {
                    var m=$(this);
                    var itemTop=m.offset().top;
                    //console.log(itemTop);
                    if(top > itemTop-200){
                        currentId="#"+m.attr("id");
                    }else{
                        return false;
                    }
                });
                //给相应楼层设置current
                var currentLink=menu.find(".current");
                if(currentId&&currentLink.attr("href")!=currentId){
                    currentLink.removeClass("current");
                    menu.find("[href="+currentId+"]").addClass("current");
                }
            });
        });
    </script>
</head>
<body>
<div id="menu">
    <ul>
        <li><a href="#item1" class="current">1F 男装</a></li>
        <li><a href="#item2">2F 女装</a></li>
        <li><a href="#item3">3F 美妆</a></li>
        <li><a href="#item4">4F 数码</a></li>
    </ul>
</div>
<div id="content">
    <h1>购物网</h1>
    <div id="item1" class="item">
        <h2>1F 男装</h2>
        <ul>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
        </ul>
    </div>
    <div id="item2" class="item">
        <h2>2F 女装</h2>
        <ul>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
        </ul>
    </div>
    <div id="item3" class="item">
        <h2>3F 美妆</h2>
        <ul>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
        </ul>
    </div>
    <div id="item4" class="item">
        <h2>4F 数码</h2>
        <ul>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
            <li><a href="#"><img src="../1.jpg"></a></li>
        </ul>
    </div>

</div>

</body>
</html>
小菜一枚hjp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JavaScript做网页定位导航特效（上）
WJM_Aunt
09-16 1149
网页定位导航特效（上）一、特效分析左侧是内容，右侧是悬浮的导航菜单，左侧滚动时，右侧内容不改变位置；点击右侧链接，左侧定位到相应栏目，左侧滚动到相应栏目，右侧定位到对应链接。重难点： 左侧栏目和右侧导航菜单的显示样式实现 导航与滚动条之间的定位关联 二、特效设计技术点： 锚点（anchor）—网页制作中超链接的一种，页面内的超级链接 关于滚动条定位的事件和方法 1、onscroll：当用户滚动指定的
HTML5 定位
qq_42526440的博客
02-16 1749
什么是 Geolocation API？ HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。 Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。 使用地理定位 Geolocation API 的主要方法是 getCurrentPosition，它用来获得用户的...
网页定位导航特效制作
独孤龙少侠的博客
09-23 1000
首先按照“分析-设计-实现”的思路去实现。将本实例分成三步进行。 1.利用html+css实现基本结构 2.利用锚点知识实现点击右侧导航条左边跳转至相应内容 3.利用jquery知识实现滚动鼠标，右侧导航条自动调转至相应位置1.利用html+css实现基本结构 a.具体代码如下：**css代码：** <style> * {
网页定位导航效果---详解
weixin_30920513的博客
08-18 102
废话不多说，先上图，查看效果！ 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>网页定位导...
html 菜单 重新定位,5.通过定位实现二级菜单
weixin_39624389的博客
06-07 209
本文将要为您介绍的是5.通过定位实现二级菜单,具体完成步骤:通过定位实现二级菜单：Document.clearfix::after {content: "";display: block;clear: both;}.header {height: 40px;background-color: #e3e4e5;}.header .nav>li{float:left;margin:0 20px;...
jQuery顶部定位导航 jQuery滚动顶部定位导航网页特效.zip
11-20
"jQuery顶部定位导航 jQuery滚动顶部定位导航网页特效.zip" 文件包含了一个利用jQuery实现的智能顶部导航栏，该导航栏在用户滚动网页时能够保持在屏幕顶部，提供持续的导航功能，同时具有动态效果，提升用户体验。...
落叶特效网页源码 v1.0
10-13
3D落叶特效的实现主要通过HTML元素的创建和定位来完成。 2. **css** 文件夹：通常包含样式表文件，如`style.css`。这些文件负责定义网页的整体风格和元素的外观，包括颜色、字体、布局等。在这个案例中，CSS可能...
jQuery定位滚动tab选项卡特效.zip
11-20
在这个“jQuery定位滚动tab选项卡特效”项目中，我们将探讨如何利用jQuery和相关的HTML、CSS技术实现一个动态滚动的选项卡效果。 首先，让我们了解核心组件： 1. **HTML 结构**： - 选项卡容器：通常是一个div，...
CSS3卡通火焰网页页脚特效
04-25
在提供的【压缩包子文件的文件名称列表】中，"说明.htm"可能是介绍如何使用和实现这个特效的文档，而"jiaoben7410"可能是包含特效源码的文件，可能是一个CSS文件、一个HTML文件或者JS文件。通过分析这些文件，我们...
jQuery灯光颗粒倒计时效果 jQuery灯光颗粒倒计时网页特效.zip
11-20
"jQuery灯光颗粒倒计时效果"就是这样一种创新的网页特效，它结合了前端技术的力量，如CSS、JavaScript和jQuery，以及HTML5的新特性，为网页增添了动态与互动性。本文将详细介绍如何利用这些技术实现这种特效。 首先...
css绝对定位、相对定位和文档流的那些事
weixin_30408165的博客
07-09 229
前言 接触html、和css时间也不短了，但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决，但总不是个事，所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系。 文档流的概念 确切的说应该是文档文档流模型的机制，html的布局机制就是用文档流模型的，即块元...
jquery实现网页定位导航特效
CaseyWei
08-14 231
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;  &lt;script src="http://code.jquery.com/jquery-1.11.3.js"&gt;&lt;/script&gt;      &lt;meta charset="UTF-8"&gt;     &amp
HTML5 地理定位
m0_63327154的博客
02-16 850
一、定位基础与原理 1.IP定位（定位不准确） 通过电脑的IP地址，定位到当前的位置。但是我们平常拿到的IP地址，一般是运营商发布的公网IP，只有一些涉密机构，才能够通过与运行商协商，才能拿到具体的IP。 2.运营商基站定位 只能大致定位当前的位置，是通过运营商的基站，能够确定当前接入的位置距离基站的距离。 3.GPS卫星定位 能够精确到厘米，是通过卫星电波，确定当前所在的位置。但是前提是：当前设备必须有GPS芯片。 二、地理定位的实现 地理定位API...
使用HTML+css实现京东图片自动轮播效果(自己写的)
热门推荐
u010100704的专栏
12-13 3万+
jQuery图片轮换效果 *{ margin:0px; padding:0px; text-align:center; } #banner{ width:730px; height:454px; margin:50px auto; position:relative;/*相对定位,相对于.btn按钮*/ text-align:left; } .pic i
CSS 网页定位与布局
zhang_cherry的博客
02-19 2158
要想在网页上展示的内容合理、布局好看，那就少不了CSS定位与布局的应用。CSS网页定位分为三种：文档流定位、浮动定位和层定位，接下来分别讲一下这三种定位方式。 1 文档流定位 html中的元素按照是否独占一行可以分为：行内元素、块级元素和行内块元素。 行内元素：不能独占一行，使用width height属性无效。常见的行内元素有：span标签 a标签 块级元素：可以独占一行，通过width和height可以设置元素的宽、高。常见的块级元素：div table ul ol li p form h1 h2 …
JavaScript和jQuery实现定位导航功能
小小黑
03-02 3546
实现的效果如下： 在做这个网页中，学到的重要知识有： 1.为了实现点击定位导航的功能，可以使用锚来定位，这里指的是href的url地址可以写成某一个div的id的值，这样点击就会跳到那个div那里： 1F 男装 2.在写css样式的时候，考虑到IE6没有position:fixed固定定位，所以为了兼容IE6，我们可以使用如下方法： /*ie6 hack兼容*/
重温---HTML5高级---地理定位
qq_32054169的博客
10-11 2044
地理定位：使用JS获取浏览器当前所在的地理坐标，实现LBS（Location Based Service，基于定位的服务），具体数据包括：       经度：longitude       纬度：latitude       海拔：altitude       速度：speed  技术上如何获取浏览器所在的定位信息：  (1)手机中的浏览器        靠手机内置的GPS芯片数据，...
html5获取地理位置和定位
xiongbo_的博客
06-08 1万+
1.H5地理位置定位功能 首先判断用户浏览器是否支持该功能，目前大多数现代浏览器均支持，获取位置信息需用户授权同意 function getLocation(){    if (navigator.geolocation){      navigator.geolocation.getCurrentPosition(showPosition,showError); 
css定位详解（相对定位、绝对定位和固定定位）
qq_38473254的博客
05-15 1万+
文章目录一、什么是定位？二、各个属性值的作用1、相对定位2、绝对定位3、静态定位4、固定定位三、相对和绝对定位1、相对定位2、绝对定位3、相对定位和绝对定位（1）相对定位（2）绝对定位四、相对、绝对定位与浮动1、相对定位2、绝对定位3、浮动4、相对定位与浮动5、绝对定位和浮动五、z-index的使用六、小结 一、什么是定位？ css中的position属性，position有四个值：relative（相对定位）、absolute（绝对定位）、static（静态定位）和fixed（固定定位），通过top、le
HTM5网页设计作业成品
最新发布
04-13
3. 多媒体元素：利用HTML5的多媒体标签，如和，嵌入视频和音频文件，实现网页中的多媒体播放功能。 4. 动画效果：使用CSS3的过渡和动画属性，如transition、transform和animation，为网页添加动态效果，增强用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值