JS实现京东首页之页面顶部、Logo和搜索框功能

2024-09-28 12:15:44

昨天我们主要讲了京东首页的基本布局，今天我们主要来逐步实现京东首页的页面顶部、Logo&搜索框。首先我们来看下我们今天将要实现的效果：

下面页面布局详细分析：

1、页面头部分三个部分依次实现：五角星图、收藏京东、右边文字部分（用列表实现）；

其中当鼠标停放在手机京东上，手机背景图发生变化，变成红色带jd的图案；当鼠标悬停在客服服务上，出现下拉列表。

2、Logo&搜索框分四个部分实现：左边京东Logo、中间搜索框（上部：快速搜索；下部：热门搜索）、右部我的京东&去购物车（步骤类似我的京东，省略）

分析图：

具体实现代码如下：

jd_index.html

<!doctype html>
<html>
  <head>
    <title>Insert your title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="jd_index.css">
  </head>
  <body>
    <!-- 1、网页头部 -->
    <header id="top">
      <!-- 1、五角星(左) -->
      <img class="lf" src="Images/star.jpg">
      <!-- 2、收藏京东(左) -->
      <a href="#" class="lf">收藏京东</a>
      <!-- 3、文字列表(右) -->
      <ul class="rt">
        <li>
          您好，欢迎来到京东
          <a href="#">[登录]</a>
          <a href="#">[免费注册]</a>
        </li>
        <li>
          <b></b> <!-- 边框 -->
          <a href="#">我的订单</a>
        </li>
        <li class="vip">
          <b></b> <!-- 边框 -->
          <a href="#">会员俱乐部</a>
        </li>
        <li class="dakehu">
          <b></b> <!-- 边框 -->
          <a href="#">企业频道</a>
        </li>
        <li class="app_jd">
          <b></b> <!-- 边框 -->
          <a href="#">手机京东</a>
        </li>
        <li class="service">
          <b></b> <!-- 边框 -->
          <a href="#">客户服务</a>
          <!-- 弹出菜单 -->
          <ul id="service_items">
            <li>
              <a href="#">帮助中心</a>
            </li>
            <li>
              <a href="#">帮助中心</a>
            </li>
            <li>
              <a href="#">帮助中心</a>
            </li>
            <li>
              <a href="#">帮助中心</a>
            </li>
            <li>
              <a href="#">帮助中心</a>
            </li>
          </ul>
        </li>
        <li>
          <b></b> <!-- 边框 -->
          <a href="#">网站导航</a>
        </li>
      </ul>
    </header>
    <!-- 2、LOGO 和 搜索框 -->
    <div id="top_main">
      <!-- 1、LOGO -->
      <a href="#" class="lf">
        <img src="Images/logo-201305.png">
      </a>
      <!-- 2、搜索框和搜索按钮 -->
      <div id="search_box">
        <!-- 1、搜索框和按钮 -->
        <div class="search">
          <input class="txtSearch">
          <button>搜索</button>
        </div>
        <!-- 2、热门搜索 -->
        <div class="hot_words">
          <span>热门搜索：</span>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
          <a href="#">家纺11月大促</a>
          <a href="#">彩虹电热毯</a>
          <a href="#">博洋家纺</a>
          <a href="#">霞珍</a>
        </div>
      </div>
      <!-- 3、我的京东 -->
      <div id="my_jd">
        我的京东
        <b></b><!-- 向下箭头 -->
      </div>
      <!-- 4、去购物车结算 -->
      <!-- 5、追加空子元素，撑起top_main -->
      <div class="clear"></div>
    </div>
    <!-- 3、主导航-->
    <nav id="nav">主导航</nav>
    <!-- 4、banner广告部分-->
    <div id="banner">banner广告部分</div>
    <!-- 5、页面主体-->
    <section id="main">页面主体</section>
    <!-- 6、页面底部-配送方式 -->
    <footer id="foot_box">配送方式</footer>
    <!-- 7、页面底部-备案号 -->
    <footer id="footer">备案号</footer>
  </body>
</html>

外部样式：

jd_index.css

/*测试属性*/
#nav,#banner,#main,#foot_box,#footer{
  border:1px solid black;
}
/*通用*/
body{
  font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
  color:#666;
  margin:0;
}
ul,p,h1,h2,h3,h4,h5,h6,ol,dl,dd{
  margin:0;
  padding:0;
  list-style:none;
}
img{vertical-align:bottom;}
a{
  color:#666;
  text-decoration:none;
}
a:hover{
  color:#FF0700;
  text-decoration:underline;
}
.lf{float:left;}
.rt{float:right;}
.clear{clear:both;}
/**布局元素样式**/
#top,#top_main,#nav,#banner,#main,#foot_box,#footer{
  width:1211px;
  margin:0 auto;
}
/*******1、页面顶部**********/
#top{
  /*高度，行高，背景颜色，下边框*/
  height:30px;
  line-height:30px;
  background-color:#f7f7f7;
  border-bottom:1px solid #eee;
}
#top>img{
  margin-top:10px;
  margin-right:5px;
}
/*文字列表*/
#top>ul>li{
  float:left;
  margin-right:10px;
}
#top>ul b{
  border-left:1px solid #ddd;
  margin-right:10px;
}
/*会员俱乐部*/
li.vip a{
  padding-left:34px;
  background:url(Images/vip.jpg) no-repeat left center;
}
/*大客户*/
li.dakehu a{
  padding-left:31px;
  background:url(Images/dakehu.jpg) no-repeat left center;
}
/*手机京东*/
li.app_jd a{
  /*左内边距，行内块，高度，行高，背景*/
  padding-left:23px;
  display:inline-block;
  height:22px;
  line-height:22px;
  background:url(Images/iconlist_2.png) no-repeat -128px -360px;
}
li.app_jd a:hover{
  background-position:-128px -399px;
}
/*客户服务*/
li.service>a{
  /*左右内边距模拟宽度*/
  padding:0 15px;
  /*高度，行高*/
  display:inline-block;
  height:26px;
  line-height:26px;
  /*背景图像：水平偏右，垂直居中*/
  background:url(Images/jt_down.jpg) no-repeat 95% center;
  /*左右上边框：透明*/
  border:1px solid transparent;
  border-bottom:none;
}
/*客户服务-弹出菜单*/
li.service{
  /*相对定位：配合#service_items 做绝对定位*/
  position:relative;
}
#service_items{
  /*宽度，边框，背景颜色，文本水平居中，定位*/
  box-sizing:border-box;
  width:80px;
  border:1px solid #ddd;
  border-top:none;
  background-color:#fff;
  text-align:center;
  /*绝对定位*/
  position:absolute;
  top:28px;
  left:11px;
  /*默认隐藏*/
  display:none;
}
/*当鼠标移入到li.service上时，找到其子级#service_items ,并且显示*/
li.service:hover #service_items{
  display:block;
}
/*当鼠标移入到li.service上时，找到其直接子级a标记，设置样式*/
li.service:hover>a{
  border-color:#ddd;
  background-color:#fff;
  background-image:url(Images/jt_up.jpg);
}
/**********2、LOGO 和 搜索框************/
#top_main{
  padding:10px 0;
}
/*搜索框和搜索按钮和热门搜索*/
#search_box{
  /*左浮动，宽度，左右外边距，min-height*/
  float:left;
  width:500px;
  margin:0 80px 0 40px;
  min-height:30px;
}
#search_box div.search{
  /*高度，背景颜色*/
  height:30px;
  background-color:#e4393c;
  /*边框*/
  padding:3px;
}
#search_box input{
  /*宽度，高度，取消边框*/
  width:410px;
  height:30px;
  border:none;
  box-sizing:border-box;
  padding-left:10px;
}
#search_box button{
  /*宽度，高度，取消边框，背景颜色*/
  width:80px;
  height:28px;
  border:none;
  background-color:#E4393C;
  /*文字：大小，颜色，加粗*/
  font-size:14px;
  color:#fff;
  font-weight:bold;
}
/*热门搜索*/
#search_box div.hot_words{
  /*上外边距*/
  margin-top:5px;
  /*宽度，高度，溢出隐藏*/
  width:500px;
  height:16px;
  overflow:hidden;
}
#search_box div.hot_words span{
  color:#999;
}
#search_box div.hot_words a{
  color:#999;
}
/*我的京东*/
#my_jd{
  /*左浮动，边框，背景*/
  float:left;
  border:1px solid #EFEFEF;
  background-color:#f7f7f7;
  /*高度，左内边距，背景图像*/ /*20*17*/
  padding-left:30px;
  height:27px;
  line-height:27px;
  background-image:url(Images/iconlist_2.png);
  background-repeat:no-repeat;
  background-position:-116px -25px;
  padding-right:5px;
}
#my_jd:hover{
  background-color:#fff;
  background-position:-116px -55px;
}
#my_jd b{
  /*行内块，宽度，高度，边框 */
  display:inline-block;
  width:0px;
  height:0px;
  border:5px solid transparent;
  border-top-color:#ccc;
  /*相对定位：实现该元素的位置微调*/
  position:relative;
  top:3px;
}

以上所述是小编给大家介绍的JS实现京东首页之页面顶部、Logo和搜索框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

利用AngularJs实现京东首页轮播图效果

先来看看效果图其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好. 那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换.在这里面就是在指令里操作dom元素,超级easy. 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo&quo
Android仿京东首页轮播文字效果

京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果实现思路上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个链接,那么数据源的结构就很明了了创建ADEnity
Android仿京东首页画轴效果

记得之前京东首页有一个效果,有一个画轴,然后可以滚动画轴,去打开画(不知道怎么去形容这个效果,就叫做画轴效果吧- -!),然后去做相关操作,刚开始看到这个效果,想法是动态的去改变一个ImageView的高度,基本效果也就出来了,不过滚动部分的内容,当时接触的也不是很多,只是看过一些大牛的博客,略微了解了一点,当时也忙着写项目,也就没去多想,前些天忽然想到这个效果,就想着实现一下,不过京东新版本好像去掉这个东西了,只能凭着自己的记忆来大概搞一下,也是对滑动这部分内容的一个小练习吧. 先看一下效果图
JS实现京东首页之页面顶部、Logo和搜索框功能

昨天我们主要讲了京东首页的基本布局,今天我们主要来逐步实现京东首页的页面顶部.Logo&搜索框.首先我们来看下我们今天将要实现的效果: 下面页面布局详细分析: 1.页面头部分三个部分依次实现:五角星图.收藏京东.右边文字部分(用列表实现): 其中当鼠标停放在手机京东上,手机背景图发生变化,变成红色带jd的图案:当鼠标悬停在客服服务上,出现下拉列表. 2.Logo&搜索框分四个部分实现:左边京东Logo.中间搜索框(上部:快速搜索:下部:热门搜索).右部我的京东&去购物车(步骤类似我
JS实现部分HTML固定页面顶部随屏滚动效果

本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果.分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 使用这个特效代码需要注意,如
原生JS实现顶部导航栏显示按钮+搜索框功能

根据点击导航栏,搜索框的内容会随之变动话不多说,先上图 HTML代码段 <div class="bar"> <ul id="menu" class="menu"> <li class="active">搜店</li> <li class="gradient">地址</li> <li class="gradient&qu
使用JavaScrip模拟实现仿京东搜索框功能

使用js模拟实现京东的搜索框,主要用了js中的onfocus(注册焦点事件),onblur(失去焦点的事件): 主要实现了: 在鼠标点进去的时候,里面的默认内容消失: 在输入之后,再点击搜索框外,输入的内容还在搜索框中: 如果输入为空,点击搜索框外,里面自动显示默认内容: 内容颜色的改变效果图代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>京东搜
uniapp小程序之配置首页搜索框功能的实现

目录正文 1.查阅官网配置搜索框pages配置项 1.1 首先进入官网后找到如下内容 1.2 如官网所示 style的说明如下,看图操作 1.3 跳转指定的app-plus配置项 1.4 导航栏配置属性如下,选择我们需要的即可 2.配置APP端与H5端搜索框(小程序端不兼容) 2.1 找到pages.json文件,配置搜索框 2.2 监听搜索框与按钮的点击事件 2.3 拓展知识:监听多个按钮的点击事件
微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

先看一下效果图: index.wxml <view class='{{tabIsTop ? "fixedTop" : ""}}'> <i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange"> <i-tab key="tab1" title="车主圈"
Vue.js页面中有多个input搜索框如何实现防抖操作

debounce简介 debounce是lodash工具库中的一个非常好用的函数.在实现搜索框对输入进行动态查询的时候,我们需要防止前端频繁的发送查询请求给后端,这个时候就需要用到debounce,它可以设置一个时间间隔,比如300ms,忽略300毫秒内的输入变化.debounce的详细介绍可以参考这篇文章. debounce的高级用法博主的页面中有3个搜索框,每个搜索框都需要动态响应用户的输入到后台去查询匹配的文章,如下图: 在Vue.js中如何实现多搜索框的debounce绑定,下面博
JS仿淘宝搜索框用户输入事件的实现

淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋",还有闪烁的光标.当用户点击输入的时候,灰色字消失.当用户清空文本框的所有内容的时候,灰色字自动恢复. 接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件. 判断用户输入的事件有 oninput 和onpropertychange .当然,想必你能想到,由于浏览器兼容的问题,他们出现的场合有所不同. 正常浏览器支持onin
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view class="df search_arr"> <icon class="searchcion" size='20' type='search'></icon>
输入自动提示搜索提示功能的javascript:sugggestion.js

复制代码代码如下: /** * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度.google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验 * 使用说明:参见suggestions.txt文件 * Author:sunfei(孙飞) Date:2013.08.21 */ var SugObj = new Object(); $(document).ready(function(){ //文件加载完成后获取输入框属性信息,确保搜索提示数据和文本输入框中数据的显示

JS实现京东首页之页面顶部、Logo和搜索框功能

相关推荐

随机推荐