移动端H5+js

最新推荐文章于 2024-03-13 14:49:40 发布
最新推荐文章于 2024-03-13 14:49:40 发布
阅读量395 收藏 1
点赞数
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WH20000410/article/details/127992915
版权 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 移动端 -->
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">  
  <title>首页</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
  <!-- 引入这个js -->
  <script src="./js/rem.js"></script>
</head>
<body>
  <!-- 头部 -->
  <div class="header">
    <div class="header_searchBox">
      <img src="./img/index_search.png" alt="搜索">
      <input type="text" placeholder="输入关键字，搜索您想要的">
    </div>
  </div>
  <!-- banner图 -->
  <div class="banner">
    <img src="./img/index_banner.png" alt="banner图">
  </div>
  <!-- 分类 -->
  <div class="category">
    <!-- 第一页 -->
    <div class="categoryList">
      <!-- 商品 -->
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
    </div>
    <!-- 第二页 -->
    <div class="categoryList">
      <!-- 商品 -->
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
    </div>
    <!-- 第三页 -->
    <div class="categoryList">
      <!-- 商品 -->
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
      <div class="category_box" style="margin-right: 0;">
        <img src="./img/index_category_img.png" alt="">
        <div class="category_box_tit">电子数码</div>
      </div>
    </div>
  </div>
  <!-- 
      1. 点击个人中心
      2. 出现一个蒙层:   蒙层要固定定位   不能滑动
      3. 3个按钮, 并且三个按钮是平移出现的  
          (显示和隐藏的一个关系)
        过渡是不能用来实现 display: none;
    蒙层的实现方式:   z-index;
    客服和订单的实现:   透明度 + 平移
  -->
<div class="person">
  <img class="modelView_box" src="./img/index-center.png" alt="图片" />
  <div class="model">
    <img class="modelBack" src="./img/index-back.png" alt="返回">
    <img class="modelOrder" src="./img/index-info.png" alt="订单">
    <img class="modelCus" src="./img/index-info.png" alt="客服">
    <img class="modelInfo" src="./img/index-info.png" alt="信息">
  </div>
  <div class="i">
  <img src="./img/皇冠.png" alt="皇冠">
  <span class="txt">推件商品</span>
</div>
  <div>
    <!-- 第四部分吗 -->
    <div class="fiex" >
       <img src="./img/index_category_img.png" alt="">
       <img src="./img/电子数码5.png" alt="">
       <img src="./img/index_category_img.png" alt="">
    </div>
    <div style="background: #fff;">
      <img src="./img/index_category_img.png" alt="">
      <img src="./img/电子数码5.png" alt="">
      <img src="./img/index_category_img.png" alt="">
   </div>
</div>
</body>
</html>

Js index.css

html, body{
  width: 100%;
  height: 100%;
  background: #fff;
}

.header{
  width: 7.5rem;
  height: 3.48rem;
  background: url(../img/index_bg.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.header_searchBox{
  width: 6.98rem;
  height: 0.8rem;
  background: #FFFFFF;
  border-radius: 0.4rem;
  margin: 0.38rem auto 0;
  display: flex;
}
.header_searchBox>img{
  width: 0.24rem;
  height: 0.24rem;
  display: block;
  margin: 0.28rem 0.1rem 0.28rem 0.52rem;
}
.header_searchBox>input{
  width: 4rem;
  height: 0.34rem;
  line-height: 0.34rem;
  border: none;
  margin-top: 0.24rem;
}
/* banner 图 */
.banner{
  width: 6.92rem;
  height: 2.4rem;
  margin: -1.72rem auto 0;
  overflow: hidden;
  border-radius: 4px;
}
.banner>img{
  display: block;
  width: 100%;
  height: 100%;
}
/* 分类 */
.category{
  margin: 0.4rem 0.6rem 0.52rem;
  /* padding: 0.4rem 0.6rem 0.52rem; */
  overflow: auto;
  white-space: nowrap;
}

.categoryList{
  width: 6.2rem;
  height: 3.08rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.category_box{
  margin-right: 0.72rem;
}
.category_box>img{
  width: 1rem;
  height: 1rem;
  display: block;
}
.category_box_tit{
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 0.34rem;
}
/*第四部分*/
.person{
  width: 6.9rem;
  height: 1.02rem;
  background: url(../img/矩形.png) no-repeat;
}
.i{
  font-size: 0.3rem;
}
.center{
  width: 6.5rem;
  height: 4.14rem;
  background: url(../img/矩形.png) no-repeat; 
}
span{
  font-size: 0.32rem;
}
.di{
 flex-direction: row;
}
.div1{
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.06rem;
  text-align: center;
}
.img{
  width: 1rem;
  height: 1rem;
}


/* 悬浮 */
.modelView_box{
  width: 1.32rem;
  height: 1.32rem;
  display: block;/* 转换行内块*/
  position: fixed;
  top: 8.12rem;
  right: 0.12rem;
}
.model{
  width: 100%;
  height: 100%;
 
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .3s;/*过渡*/   
}
.modelBack{
  width: 1.32rem;
  height: 1.32rem;
  display: block;
  position: absolute;
  top: 8.12rem;
  right: 0.12rem;
  background: #FFFFFF;
  border-radius: 50%;
}
.modelOrder{
  width: 1.32rem;
  height: 1.32rem;
  display: block;
  position: absolute;
  top: 6.86rem;
  /* right: 0.26rem; */
  right: -2rem;
  opacity: 0;
  transition: all .3s;
}
.modelCus{
  width: 1.32rem;
  height: 1.32rem;
  display: block;
  position: absolute;
  top: 7.2rem;
  /* right: 1.72rem; */
  right: -1.72rem;
  opacity: 0;
  transition: all .3s;
}
.modelInfo{
  width: 1.32rem;
  height: 1.32rem;
  display: block;
  position: absolute;
  top: 8.5rem;
  /* right: 1.44rem; */
  right: -2rem;
  opacity: 0;
  transition: all .3s;
}

.modelView_box:hover + .model{
  z-index: 99;
}

/* 1. 平移  +  透明度 */
.modelView_box:hover + .model .modelOrder{
  right: 0.26rem;
  opacity: 1;
}
.modelView_box:hover + .model .modelCus{
  right: 1.72rem;
  opacity: 1;
}
.modelView_box:hover + .model .modelInfo{
  right: 1.44rem;
  opacity: 1;
}

 

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
  margin: 0;
  padding: 0
}
fieldset,img {
   border: 0
}
img {
 
}
address,caption,cite,code,dfn,th,var {
    font-style: normal;
    font-weight: normal
}
ul,ol {
    list-style: none
}
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun","宋体"
}
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
select,input {
    vertical-align: middle
}
select,input,textarea {
    font-size: 12px;
    margin: 0
}
 input[type="text"],input[type="password"],textarea {
    outline-style: none;
    -webkit-appearance: none
}
textarea {
    resize: none
}
table {
    border-collapse: collapse
}

觅花彩蝶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端 jquery+html5 手写签名（横屏）
12-27
用jquery+html5+css3实现移动端的手动签名，横屏签名，完美回显，可直接复用
1.如何在HTML5中引入js文件
越努力越幸运的博客
01-02 6293
在HTML5中引入js文件有两种方式如下： 新建一个html5文件，输入以下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部js--> <script type="text/javascript"> //编写js代码
H5页面可以引用的一些JS常用小方法
我的米饭
06-07 734
写了一些单个的小页面可以引入的常用js方法，省了自己手写的时间，需要时可以保存为js文件然后直接引用。
❗HTML引入JavaScript的三种常用方式汇总❗
热门推荐
YXXXYX的博客
10-13 5万+
引言 JavaScript是一门脚本语言，虽然名字里有Java，但是和Java没有一点关系，它原名是LiveScript；现在的前端JavaScript可以说是异常火爆，但是博主本人并不准备向前端发展，但是对前端的一些基础知识还是必须有所了解的； 上一篇博客：❗HTML引入CSS的三种常用方式汇总❗ 已经介绍了HTML嵌入CSS的三种方式，这里就来介绍HTML如何嵌入JavaScript； ps：由于作者规划以后往java后端发展，所以对于前端的知识只是了解了部分主要内容，以应用为主，所以如果有错误请各位及
uniapp开发h5引入第三方js（sdk）
柑橘乌云_
10-20 3022
起初以为是在原有的index.html基础上再新建一个html文件，最后发现不是，而是赋值文档里面的hmlt模板基础代码覆盖之前的index.html中的所有代码。在manifest.json里配置"template": "index.html" 就好啦。使用文档里的html代码覆盖，并通过script标签引入第三方js。
H5 PC 移动端 Qrcode.js实现扫一扫
07-07
"H5 PC 移动端 Qrcode.js 实现扫一扫"这一主题，主要涉及的是如何在网页中实现二维码的扫描和识别功能，使得用户无需离开网页就能通过手机摄像头读取二维码信息。Qrcode.js 是一个轻量级的JavaScript库，专门用于...
移动端H5前端设计项目源码
04-08
移动端H5前端设计项目源码是开发者们常用的一种资源，用于构建适应移动设备的Web应用程序。这个项目包含了一系列文件和目录，每个都有其特定的作用，是实现交互式、响应式的网页设计的关键组成部分。 首先，我们来...
移动端H5商城模板源码-34个页面
09-07
本资源"移动端H5商城模板源码-34个页面"是一个基于原生HTML和JavaScript技术开发的商城类H5应用模板，专为移动端设计，适用于快速搭建手机网页版的电商系统。 首先，我们来详细了解一下这个模板的特点和组成部分： ...
taotao:移动端电商+后台管理系统(毕设内容)
05-09
MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K 原生UI 鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标 MUI以iOS...
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
10-19
在JS移动端和H5开发中，常常需要处理用户选择的图片上传，特别是在移动设备上，这一需求更加普遍。本文将详细介绍如何实现同时选择多张图片并利用canvas进行压缩上传的流程。 首先，HTML5提供了`...
h5.js插件，前端必备
11-01
h5.js插件，工具类插件，直接下载使用，非常方便，前端必备。
h5页面动态引入js/css文件
风如白话的博客
05-15 2328
h5页面动态引入js/css文件 /***引入 js / css 文件 @example: aui.import('js/aui.picker.js') @example: aui.import(['js/aui.picker.js', 'css/aui.picker.css']) */ function import(url){ switch (url.constructor){ case Array: for(const [index, item] of url.entries
h5引入不同的js文件怎样让第二个js使用第一个js文件中的函数_H5必知必会之快速搭建开发环境...
weixin_31715171的博客
12-27 411
今天我们这一篇的主题就是 “快速搭建开发环境”。快速，有多快？答案：取决于你的网速。因为我们真的有这么一个脚手架：qvk。什么是 qvkqvk 是一个集成现代前端工程化最佳实践的通用 Web 开发环境，可用于开发传统 C/S 架构的 Web 应用、SPA（单页应用）、H5（App 内嵌页）等。qvk 脱胎于多个 360 前端项目，集成了开源社区中涌现的优秀框架、工具和最佳实践。qvk 初始版集成以...
Web前端 | HTML嵌入JS代码的三种方式
m0_61933976的博客
10-10 1万+
HTML嵌入JS代码的三种方式
HTML引入Javascript代码的三种方法
Sun_Yangguang的博客
10-21 6331
自学所遇问题记录
uniapp h5、app引用外部在线js
weixin_44575130的博客
07-25 2598
uniapp app h5引用外部js
强大的H5 js
weixin_42313829的博客
11-23 1471
Video.js 基于MSE架构的H5视频播放器 Three.js 基于webGL的网页三位效果 OpenCV.js 视觉 TensorFlow.js 深度学习 ass.js 字幕格式 待补充
H5页面在移动端页面进行调试时引用js
qq_38644384的博客
03-13 844
链接：https://pan.baidu.com/s/1LDVDeSBfYKE18meEoQRjFg。
JavaScript基础教程——入门必看篇
poptxz的博客
11-06 2064
JavaScript他是一种描述性语言，其实他并不难学，只要用心学，一定会学好，我相信大家在看这篇文章的时候，一定也学过HTML吧，使用JavaScript就是为了能和网页有更好的交互，下面切入主题。 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言，也是一种基于对象（Object）和事件驱动（Event Driven）的，并具有安
vue2 移动端h5
最新发布
03-16
Vue.js的移动端H5开发主要依赖于Vue的核心库和Vue Router路由库。以下是Vue.js移动端H5开发的一般步骤： 1. 安装Vue.js：使用npm或者CDN方式安装Vue.js，可以通过命令行或者在HTML文件中引入Vue.js。 2. 创建Vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值