作为一名前端程序媛,虽然整天和代码打交道,但是还是有一颗小清新的内心,虽然有时候加起班来不是人,但是空闲的时候还是会整理一下思绪,顺便整理一下自己,两个多月的加班,一直没有更新,今天就把自己最近做的一些h5的东西的想法整理一下,也好慰藉一下我这两个多月的不辞辛苦,好了,上面纯属作为女孩子的自我唠叨,切入正题:

首先来看一下一些h5的页面效果

二维码奉上,扫码查看,当然也有很多不足,这是我做的第一个算是长图文似的H5吧,动画不少,不过应该还有一些问题,希望能多多指教

刚开始做这种长图文的页面踩了很多坑

做法1:(不推荐)

因为是h5所以都是用的图片去实现一些动画的,所以切图还是很关键的,这里提醒各位做之前一定要根据设计图去切背景图片,看哪些需要动画就单独切出来,哪些不需要就当背景,这个项目我当时切得背景是一块一块的切得,因为很长,怕图片加载太慢所以就一个板块一个板块去切,这时候要注意每个板块背景要衔接好,不然后期动画什么的定位很麻烦的;

接下来说一下当时我的做法,贴个代码

 <div class="bg-wrap" >
<div class="pop-balck" style="display: none;"></div> <img src="data:images/zijin/page1-bg.png" class="bg-img page1">
<img src="data:images/zijin/page2.png" class="bg-img page2">
<img src="data:images/zijin/page3.png" class="bg-img page3">
<img src="data:images/zijin/page4.jpg" class="bg-img page4">
<img src="data:images/zijin/bgnew_05.jpg" class="bg-img common page5">
<img src="data:images/zijin/bgnew_06.jpg" class="bg-img common page6">
<img src="data:images/zijin/bgnew_07.jpg" class="bg-img common page7">
<img src="data:images/zijin/bgnew_08.png" class="bg-img common page8"> <div style="clear: both"></div>
</div>

  这是我的背景,我是把所有的背景放到一个容器里去加载根据背景图片的宽度确定整个长图文的宽度,下面是我用js  loading之后去动态添加整个页面的宽度,并执行第一版面的动画,动画通过添加类去执行

 $("body").css({
"width":"100%",
"height":"100%",
"overflow":"hidden"
});
$(".allPic").hide();
var bg_width=;
var w_height=$(window).height()
console.log("height:"+w_height); $(".bg-wrap img").each(function (index) {
$(this).css("height",w_height);
bg_width+=$(this).width();
$(this).css({
"width":$(this).css("width"),
"float":"left"
})
})
$('.bg-wrap,.longcontent,.allPic').css({
"width":bg_width,
"height":w_height
})
$('.allPic').width(bg_width);
$(".p103,.p102,.p101").click(function () { $("body").css({
"width":bg_width,
"height":w_height,
"overflow-y":"hidden",
"overflow-x":"auto"
});
$(".link-page").fadeOut();
$(".bg-wrap").css({
"position": "absolute",
"left": ,
"top": ,
})
$(".bg-wrap").fadeIn();
$(".allPic").show();
$(".t1,.t2,.t3,.t4,.t5,.t6,.t7").addClass("cur");
$(".logo").addClass("cur");
});

最后就是根据滚轮滑动到某个位置去判断该出现什么动画,这里我也是动态获取某个图片所在位置然后去判断出现什么动画,下面贴点代码

    $(window).scroll(function(){

                                var screenWidth = $(window).width()*0.8;
var fullWidth = $(window).width()
if($(window).scrollLeft() >= $(".people").position().left-screenWidth&&$(window).scrollLeft() <= $(".people").position().left+screenWidth){
$(".people").addClass("cur");
$(".t1,.t2,.t3,.t4,.t5,.t6,.t7").addClass("cur");
$(".logo").addClass("cur")
}else if($(window).scrollLeft()>=$(".w1").position().left-screenWidth&&$(window).scrollLeft() <$(".w1").position().left+screenWidth){
$(".t1,.t2,.t3,.t4,.t5,.t6,.t7,user4").addClass("hide");
$(".t1,.t2,.t3,.t4,.t5,.t6,.t7,.logo").removeClass("cur");
$(".user4").removeClass("ly");
$(".w1,.w2,.w3").addClass("cur");
$(".timeline").removeClass("lineAnmitate");
$(".timeline,.year2000,.year2003,.year2005,.year2008,.year1993,.now").addClass("none");
$(".timeline").removeClass("lineback");
$(".year2000,.year2003,.year2005,.year2008,.year1993,.now").removeClass("tool_1"); }

  大概就是根据滚轮的位置以及你要出现的图片的位置去判断动画,虽然这个方法有点笨拙不过这是当时能想到的方法,后续也做了其他的H5有了一定的改进,希望多多指教

关于H5的一些杂思细想(一)的更多相关文章

  1. [奇思异想]使用Zookeeper管理数据库连接串

    背景 有一套特定规格的应用(程序+数据库),当有业务需求时,就需要多部署应用,并且所有的应用都使用一个共同的后台来管理.应用新增后,如何通知后台更新连接串成了一个关键的问题.于是就产生了使用ZooKe ...

  2. windows下的上帝模式,很好用,细想,很恐怖啊

    原文地址:https://blog.csdn.net/qq_43371556/article/details/101210501 上帝模式,即"God Mode”,或称为“完全控制面板”.是 ...

  3. 混合开发H5的图片怎么适配自己想要的大小

    1.先上个自己没适配的图,这个图没显示全,因为用的是webview 所以 用的是webView的代理事件 解决 2.上代码 NSString *injectionJSString = @"v ...

  4. [奇思异想]使用RabbitMQ实现定时任务

    背景 工作中经常会有定时任务的需求,常见的做法可以使用Timer.Quartz.Hangfire等组件,这次想尝试下新的思路,使用RabbitMQ死信队列的机制来实现定时任务,同时帮助再次了解Rabb ...

  5. QA笑话----杂思

    QA工程师走进酒吧,要了一杯啤酒,要了0杯啤酒,要了999999999杯啤酒,要了一只蜥蜴,要了-1杯啤酒,要了一个sfdeljknesv,酒保从容应对,QA工程师 很满意.接下来,一名顾客来到了同一 ...

  6. golang 杂思

    正文 这里给大家总结一些 Go player 开发小技巧. 欢迎批评和交流, 望大家喜欢. 1. 配置管理 推荐一种简单粗暴的配置管理方式 [配置 映射 内部结构]. 例如有个配置文件 config. ...

  7. hook杂思-面向函数编程

    hook:方法拦截 以函数单元为编程对象: 在编译时或运行时进行函数单元的替代.修改.功能添加操作: 所有的操作都不是在原始编码时完成的: 函数单元作为参量.操作对象.编码对象存在于机制中: 机制: ...

  8. 智课雅思词汇---十三、前缀ab-是什么意思

    智课雅思词汇---十三.前缀ab-是什么意思 一.总结 一句话总结:分离,脱离;相反;加强意义 前缀:ab- [词根含义]:分离,脱离;相反;加强意义 [词根来源]:来源于拉丁语前缀ab-. [同源单 ...

  9. 智课雅思词汇---十一、spect是什么意思

    智课雅思词汇---十一.spect是什么意思 一.总结 一句话总结:词根:spect, speci, spec(spic, spi, spy) = to look, to see 看 1.port是什 ...

随机推荐

  1. 上传Jcenter

    将自己封装的库发布分享到Jcenter

  2. 15行python代码,帮你理解令牌桶算法

    本文转载自: http://www.tuicool.com/articles/aEBNRnU   在网络中传输数据时,为了防止网络拥塞,需限制流出网络的流量,使流量以比较均匀的速度向外发送,令牌桶算法 ...

  3. C# windows定时服务+服务邮箱发送

    protected override void OnStart(string[] args) { timer1 = new System.Timers.Timer(); // timer1 = new ...

  4. [HASH]MOD运算用户哈希函数

    一.概述 MOD(取模)运算配合质数的特性,可以实现一种简单的哈希算法. 二.基于的定理 在理解如何实现mod哈希前应当了解一些数学的定理: 1.x mod y = z ,实际上是x除以y的余数y的意 ...

  5. Python turtle模块小黄人程序

    讲解Python初级课程的turtle模块,简单粗暴的编写了小黄人的程序.程序还需要进一步优化.难点就是要搞清楚turtle在绘制图形过程中的方向变化. import turtle t = turtl ...

  6. 概率dp的边界处理 POJ 2096

    题目地址:https://vjudge.net/problem/POJ-2096 说的是有n个bug,和s个系统.现在一个人一天能发现一个bug,它可能是任何一个系统中的,也可能会发现已经发现过的bu ...

  7. js中字符串的replace方法区分单双引号

    今天遇到一问题,js文件中调用字符串的replace方法,不起作用. 后来排查可能觉得replace("<option  value='1'>admin</option&g ...

  8. 马拉车算法——求回文串起点hdu3294

    #include<bits/stdc++.h> using namespace std; #define maxn 500005 int p[maxn]; ]; int start; in ...

  9. java web项目最简单的结构

    为了解“徒手”建立一个web应用,此博客建立简单过程 1.在任意一个目录下,建立一个文件夹,取名字 webDemo .这个应用名字. 2.在 webDemo 内建立一个 WEB-INF 文件夹,此处大 ...

  10. vue交互

    1)如果vue想做交互,本身的框架是不支持的,需要引入vue-resurce库交互方式:get.post.jsonp 1.get方式methods: {    get: function () { / ...