H5 案例1 加载 文字阅读

最新推荐文章于 2023-10-11 14:32:03 发布
最新推荐文章于 2023-10-11 14:32:03 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27401917/article/details/99838424 

//线上地址  https://activity.50-jia.com/case/h5-1215.html



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>品质家装，天下无醛</title>
    <meta name="keywords" content="北京家装公司，北京装修,北京整体家装公司，中高端整体家装公司，全案家装年终回馈"/>
    <meta name="description" content="邀你免费领取大礼包啦！北京家装，为提供实现省时、省心、省力、省钱、有保障的愉悦装修一站式家装服务。预约0元设计，6大风格50套方案任选！"/>

    <link rel="shortcut icon" href="./../../static/favicon.ico"/>
    <!-- 统计代码 -->
    <script>
        (function (a, e, f, g, b, c, d) {
            a.ClickiTrackerName = b;
            a[b] = a[b] || function () {
                (a[b].queue = a[b].queue || []).push(arguments)
            };
            a[b].start = +new Date;
            c = e.createElement(f);
            d = e.getElementsByTagName(f)[0];
            c.async = 1;
            c.src = g;
            d.parentNode.insertBefore(c, d)
        })(window, document, 'script', ('https:' == document.location.protocol ? 'https://stm-collect' : 'http://stm-cdn') + '.cn.miaozhen.com/clicki.min.js', 'stm_clicki');
        stm_clicki('create', 'dc-XXX', 'auto');
        stm_clicki('send', 'pageview');
    </script>
    <!-- 热图 -->
    <script>
        stm_clicki('require', 'heatmap', ('https:' == document.location.protocol ? 'https://stm-collect' : 'http://stm-cdn') + '.cn.miaozhen.com/plugins/heatmap.js');
        stm_clicki('heatmap:on', 5);
    </script>
    <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e32a8472cfc31bf3df52eb99c29a1480";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>

    <link href="https://50jia-website.oss-cn-beijing.aliyuncs.com/WM/css/reset.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="https://50jia-website.oss-cn-beijing.aliyuncs.com/WM/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="https://50jia-website.oss-cn-beijing.aliyuncs.com/activity/mcss/activity.css"/>
    <!--<link rel="stylesheet" type="text/css"  href="../../static/mcss/activity.css">-->
    <link rel="stylesheet" type="text/css"  href="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/index.css">
    <!--<link rel="stylesheet" type="text/css"  href="../../static/h5-1215/index.css">-->
    <style type="text/css">
        @media screen and (min-aspect-ratio: 13/9) {
            #shuping {
                position: fixed;
                z-index: 990;
                top: 0;
                left: 0;
                color: #999;
                width: 100%;
                height: 100%;
                text-align: center;
                background: #000;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #shuping > div {
                display: inline-block;
                width: 60px;
            }

            #shuping > div p {
                line-height: 40px;
                font-size: 12px;
            }

            .shuping-imag {
                width: 60px;
            }
        }

        @media screen and (max-aspect-ratio: 13/9) {
            #shuping {
                display: none;
            }
        }
    </style>
    <link rel="stylesheet" href="https://50jia-website.oss-cn-beijing.aliyuncs.com/css/swiper.min.css">
    <link rel="stylesheet" href="https://50jia-website.oss-cn-beijing.aliyuncs.com/css/animate.min.css">
    <!--<link rel="stylesheet" href="Css/gfyh.css">-->
    <!--<link rel="stylesheet" href="Css/ani.css">-->
    <script type="text/javascript" charset="utf-8" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/js/xml2jsonjq.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/js/wxpersonal.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/js/jweixin-1.0.0.js"></script>
    <script>window._WX = new wxPersonal(); _WX.setFontSize(1080);</script>
    <!-- http://www.evener.com/bo/jsphp/wx.php?url -->

    <base href="https://m.50-jia.com" />

</head>

<body>
<div id="shuping">
    <div>
        <img class="shuping-imag" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/turn.png">
        <p>请竖屏观看</p>
    </div>
</div>
<div class="container">
    <div class="header">
        <a class="back" onClick="javascript:window.history.back();return false;"></a>
        <h1>品质家装 天下无醛</h1>
        <span class="menu"></span>
    </div>
    <div class="maskMenu" style="display: none;">
        <ul class="menuUl">
            <li>
                <a class="sy" href="/index.html"><h4>首页</h4></a>
            </li>
            <li>
                <a class="qajz" href="/zhengzhuang.html"><h4>全案家装</h4></a>
            </li>
            <li>
                <a class="jbzx" href="/juzhuang.html"><h4>局部装修</h4></a>
            </li>
            <li>
                <a class="zxbj" href="/yyonline.html"><h4>装修报价</h4></a>
            </li>
            <li>
                <a class="sjal" href="/caseul.html"><h4>设计案例</h4></a>
            </li>
            <li>
                <a class="grzx" href="/prodManuals/"><h4>产品手册</h4></a>
            </li>
            <li>
                <a class="gywm" href="/aboutUs.html"><h4>关于我们</h4></a>
            </li>
            <li>
                <a class="shareinner" href="javascript:void(0);"><h4>内部分享</h4></a>
            </li>
        </ul>
    </div>
    <div class="sharebox"  style="display: none;">
        <span class="x">X</span>
        <form class="shareform">
            <input class="yuangong" name="yuangong" type="text" placeholder="业务系统登录账号ID（拼音）" />
            <select class="laiyuan">
                <option default>- 请选择来源 -</option>
                <option value="11">11 销售设计部</option>
                <option value="07">07 论坛（线下）</option>
                <option value="09">09 电话营销（线下）</option>
                <option value="12">12 小区地推（单位房）</option>
                <option value="17">17 线上推广（营销部）</option>
                <option value="18">18 社区地推（局装地推）</option>
                <option value="19">19 商超拦截（线下）</option>
                <option value="20">20 小区地推（商品房）</option>
                <option value="21">21 小区地推（自主开发）</option>
            </select>
            <input type="submit" value="确定"  />
        </form>
    </div>

    <div class="kv_container">
        <div class="swiper-container swiper01">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide2 swiper-no-swiping">
                    <div class="centerY1">
                        <div class="video_box">
                            <div class="toucharea">
                                <img src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/poster.png" class="poster" alt="">
                                <img src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/play_icon.png" class="play_icon" alt="">
                            </div>

                            <video controls="autoplay" class="myVideo" id="myVideo" poster="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/poster.png" data-index="1" x5-video-player-type="h5" x5-video-player-fullscreen="false"
                                   x5-video-orientation="portrait" webkit-playsinline="true" playsinline="true"
                                   src="https://50jia-website.oss-cn-beijing.aliyuncs.com/videos/%E4%B8%87%E5%8D%8E%E7%AD%BE%E7%BA%A6%E8%A7%86%E9%A2%91.mp4"></video>
                        </div>
                        <p class="title ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0s"></p>
                        <p class="desc p3 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0s">房子+人=家。</p>
                        <p class="desc p2 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0s">住在里面的人，</p>
                        <p class="desc p2 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0s">用好的生活态度，让家有了幸福感。</p>
                        <p class="desc p2 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0s">冰冷的房子，</p>
                        <p class="desc p1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0s">也要用好的装修，让家拥有安全性。</p>
                        <p class="desc p3 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"  swiper-animate-delay="0s">当五十家遇上万华，</p>
                        <p class="desc p1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"  swiper-animate-delay="0s">无醛基材，全系升级，</p>
                        <p class="desc p1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"  swiper-animate-delay="0s">让家更懂得护你周全。</p>

                    </div>

                    <div class="touch_div">
                        <img class="imagb1" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/b1.png" alt="">
                        <img class="imagb2" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/b2.png" alt="">
                        <img class="imagb3" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/b3.png" alt="">
                        <img class="imagb6" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/b6.png" alt="">

                        <div class="touch_circle"></div>
                        <div class="finger_div"></div>
                    </div>
                    <div class="startvod2"></div>
                </div>
            </div>
        </div>
    </div>

    <!--第二屏-->
    <div id="endPage" class="div_end-page">
        <div id="dingban">
            <img class="logo" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/2_03.png">
            <img class="btn1" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/2_18.png">
            <img class="imag01" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/2_07.png" alt="">
            <img class="imag02" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/2_14.png" alt="">
            <img class="imag03" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/2_11.png" alt="">

            <div class="backvod">
                <img src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/v1.png" alt="">
                <img class="backvod-im01" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/v4.png" alt="">
                <img class="backvod-im02" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/v2.png" alt="">
                <img class="backvod-im03" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/v3.png" alt="">

            </div>
        </div>

        <!--第三屏-->
        <div class="div-form">
            <!-- <img class="imag04" src="Picture/im4.png" alt=""> -->
            <!-- <img class="close" src="Picture/im5.png" alt=""> -->
            <div class="item01 on">
                <h2>您的资料</h2>
                <div class="box">
                    <div class="form areaform">
                        <div class="left">
                            姓名*
                            <input type="text" placeholder="">
                            电话*
                            <input type="tel" placeholder="">
                            房屋面积*
                            <input type="number" placeholder="">
                        </div>
                        <div class="submit btn_jump">提交信息</div>
                    </div>
                </div>
            </div>
            <div class="item02">
                <div class="suc-txt1">您的信息已提交成功</div>
                <div class="suc-txt2">后续将有相关工作人员与您联系</div>
                <img class="btn3" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/btn3.png" alt="">
                <img class="btn4" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/btn4.png" alt="">
            </div>
        </div>
    </div>
    <div class="div-video">
        <div id="btnbox">
            <img class="btnbox-im1 on" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/im7.png" alt="">
        </div>
        <!--<video class="myVideo2" id="myVideo2" poster="" data-index="1" x5-video-player-type="h5" x5-video-player-fullscreen="false" x5-video-orientation="portrait" webkit-playsinline="true"  playsinline="true"-->
               <!--src="https://50jia-website.oss-cn-beijing.aliyuncs.com/videos/%E4%B8%87%E5%8D%8E%E7%AD%BE%E7%BA%A6%E8%A7%86%E9%A2%91.mp4"></video>-->
        <!--<canvas style="width: 100%; height: 100%;"></canvas>-->

    </div>
    <div class="loading">
        <p>
            <span class="txt1">0</span>
            <span class="txt2">%</span>
        </p>
    </div>
    <!-- object-fit: cover; -->
    <div class="mzsm">
        <img class="close" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/im5.png" alt="">
        <h3>免责说明</h3>
        <div class="swiper-container main-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="disclaimer_content">
                        <p>请您在使用本网站之前仔细阅读本声明的所有条款。</p>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" charset="utf-8"  src="https://50jia-website.oss-cn-beijing.aliyuncs.com/microWebsite/js/swiper-4.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/js/swiper.animate.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/H5/1215/index.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="../../static/h5-1215/index.js"></script>-->
<!--<script type="text/javascript" src="https://50jia-website.oss-cn-beijing.aliyuncs.com/activity/mjs/activity.js"></script>-->

<!--乐语m站代码-->
<script type="text/javascript" charset="utf-8" src="https://gate.soperson.com/20004047/10107157.js"></script>
</html>
H5端实现电子书阅读嵌入小程序，及小程序听书功能
墨水直达的博客
12-17 1256
h5电子书阅读，嵌入微信小程序，以及微信小程序听书
移动端h5打开pdf项目源码，可手势捏合缩放，分段加载（增强版）
07-29
总的来说，这个项目提供了一个优化的移动端H5 PDF阅读器解决方案，结合了现代Web技术，实现了高效、互动的PDF查看体验。对于希望在移动设备上展示PDF的开发者来说，这是一个值得学习和借鉴的案例。
html5文本阅读,HTML5 FileReader
weixin_39681724的博客
05-31 283
前面本博介绍了File API，这里将继续介绍一下FileReader，用FileReader具体地读取文件内容。NOTE: 在chrome浏览器上本地测试的时候，即以file://xxx这种形式测试本文中的demo，会出现FileReader读取不到内容的情况，表现为FileReader的result为空或者FileReader根本就没有去读取文件内容，FileReader各个事件没有触发；这种...
html5实现文档阅读器,HTML 5文件阅读器读取javaScript文件
weixin_26833139的博客
05-30 325
我试图允许用户将包含javascript文件的文件夹拖放到html 5页面.这就是我目前拥有的：$scope.files = [];//Establish dropzonevar dropbox;dropbox = document.getElementById("fileDragAndDrop");dropbox.addEventListener("dragenter", dragenter, ...
基于ThinkPhp5实现的小说在线阅读小程序h5网站(带后端源码+mysql)
weixin_41308436的博客
04-20 3096
概括 后端接口使用thinkPhp5.0写的，管理后台使用layui，微信小程序端使用微信小程序原生写的，客户端可以分章节阅读、点评、搜索、留言、图书收藏等功能，后台包括图书的上传，管理，轮播图管理，留言管理等功能模块 1.可以连载小说，分章节上传，自动切割章节（需要特定章节格式），所有的小说内容均以txt文本存储，上传小说是通过txt文本上传 2.在线阅读，评论小说，点赞和收藏，评分，统计平均分排行，分类等 3.动态添加分类 微信小程序效果图，原生小程序编写 管理后台 基于layui的 需要源码
H5文章内容跟读效果
可爱的小牛牛的博客
12-16 845
最近根据产品需求，需要实现文章跟读，刚开始从网上找了一些实例，希望可以实现快速开发，但是大多数实例都是针对于歌词的，不能满足需求，最后参照了网上关于歌词文件时间抽取的例子，进行改进，其实遇到的主要问题就是文章内容跟歌词的结构不一样，文章有段落之分。 最后采取的方案是调整录音文本文件结构，朗读的每一句话都要进行段落标记，并且把时间戳转换为对应的ElementID，通过段落标记进行排版，根据Eleme
H5炫酷加载动画效果展示
### 知识点六：H5加载动画的最佳实践案例 - **Gmail的加载动画**：Gmail的加载动画采用了简洁的文字提示和进度条结合的设计，通过不同颜色的圆环展现加载状态。 - **Facebook的加载动画**：Facebook使用了其标志性...
h5实现的小程序案例
07-23
4. **文字折纸效果**：这个案例可能利用CSS3的转换（`transform`）和过渡（`transition`）属性，以及伪元素（`:before`和`:after`）来创建文字仿佛被折纸的效果，为网页增加视觉吸引力。 5. **相册**：HTML5的`...
tensorflow框架手写文字识别python源码案例.zip
07-09
在本项目中，我们主要探讨的是使用TensorFlow框架进行手写文字识别的Python源码案例。这个案例非常适合那些想要入门深度学习，特别是对图像识别感兴趣的初学者。TensorFlow是谷歌开发的一个强大的开源库，用于数值...
uni-app h5引入Anime.js 创建页面加载动画，多一些案例
最新发布
06-27
下面分别给出三个示例的代码：示例1：淡入动画在模板中，我们放置一个全屏的遮罩层，中间有一个加载文字（或图标）用于淡入动画。示例2：缩放动画类似，但是动画效果是缩放。示例3：路径动画使用SVG绘制一个圆形路径...
移动端H5的一些基本知识点总结
FungLeo's Blog
03-06 9955
移动端H5的一些基本知识点总结来到这家公司之后,和以前的工作发生了很大的转变.以前我一直是做PC端页面的.来到现在这家公司之后,主要是做手机移动端的页面.移动端的页面在我这个做习惯了PC端页面的人看来,应该是很简单的一些事情.但是在上手的过程当中,还是发现,原来移动端虽然DOM结构要简单得多,但是需要注意的细节,还是非常多的.原因非常简单,那就是,你必须考虑所有的手机上不同分辨率的展示效果.移动端的
H5标签
qq_42408149的博客
09-04 1577
标签 常用的单标签 &amp;lt; !— xx –&amp;gt;：注释标签 快捷键：ALT+/ &amp;lt; br/&amp;gt;：换行标签 注释：自动生成空白行 &amp;lt; hr/&amp;gt; ：水平线标签 常用的双标签 段落 &amp;lt; p&amp;gt;&amp;lt; /p&amp;gt; –段落标签 标题 h1-h6 –标题标签 文本格式化标签 strong , b
H5学习笔记 —— 一、响应式 和html5+css3初体验
乐乐呀的博客
03-25 6504
1.浏览器私有前缀 2.html5语义化标签 3.常用的css选择器 4.盒子模型 5.css定位
h5静态页面的写法
qq_41973526的博客
12-21 1643
1，一些常用标签： section:定义块区域 header:文档头部 footer:文档底部 aside:侧边拦内容 artical:定义页面独立的内容区域 diglog:对话框 nav:导航链接的部分 2.横屏与竖屏下的样式 //竖屏 @media screen and (orientation: portrait){ body{ background-color:red; } } //横屏 @media screen and (orientation: landscape){
html5静态定位,CSS Static 静态定位示例
weixin_39849054的博客
06-10 3027
CSS Static 静态定位示例.box{color: #fff;background: #7dc765;padding: 20px;}.container{padding: 50px;margin: 50px;position: relative;border: 5px solid black;font-family: Arial, sans-serif;}.container p{line-...
vue集成海康威视H5视频播放器（H5player）开发包 V2.1.2
qq_38958822的博客
05-15 5874
2.将开发包bin目录下的文件放入public目录下（我这里是放入了public/static目录下）5.在src/utils下也放入一个h5player.min.js，方便后面引用。3.在public/index.html文件下引入。6.在data声明初始变量player。7.初始化播放器，事件初始化，实现播放。4.html标签给一个id。
H5静态页面开发环境跳转小程序（微信浏览器，外部浏览器）
ren980316的博客
10-11 3835
网上有很多教程，但是具体的坑避不开，这里就以图文形式全流程介绍如何实现微信外环境静态h5跳转小程序。
静态H5开发环境发布流程
chuchui6019的博客
04-17 268
静态H5开发部署流程 静态包准备 Nginx路由配置 Nginx重启 静态包解压及相关配置文件修改 内部访问或者外部访问测试 准备好待压缩的包 目录结构如下： [root@iZ232s3nr6zZ h5-fans-tjxy]# tree -a . ├── ...
undefineduni_modules/qiun-data-charts/static/h5/echarts.min.js net::ERR_NAME_NOT_RESOLVED
LlanyW的专栏
09-19 563
未h5运行基础路径时，运行是正常，那就是uniapp项目h5配置之后，导致路径不对。找到qiun-charts框引用echarts.min.js的地方，查看拼接如下。发布到nginx之后，报错 ，使用qiun-data-charts的柱图，使用的是echarts的配置，然后：echarts.min.js文件找不的报错。如上图：在qiun-data-charts.vue文件时，配置的运行路径字段是：window.location.pathname，uni-app项目vue发布h5网页配置了运行路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值