英雄介绍开发实例,jQuery视差滚动效果网页实现方法经验总结

一、背景

最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此.

本文总结分析了jQuery视差滚动效果网页实现方法。分享给大家供大家参考,具体如下:

json是一种轻量级数据交换格式,非常利于Java服务与js的交互,本文将介绍json的简单定义和js如何解析json。

  1.下载微信开发者工具

首先说两个核心函数,当然是基于jQuery的:

二、内容

官网链接:

1、$(document).scrollTop() ;

1、json定义:

  2.新建项目

该函数主要是返回页面当前顶部距离页面顶部的像素值,是一个非负整数。

简单的json格式为[{“key1″:”value1”},{“key2″:”value2”}],

打开微信开发者工具,(首次需要微信扫码登录),如下图所示,点击添加项目,然后依次输入APPID,项目名称,并选择你的项目所在的目录(本地目录),如果没有AppID,选择无APPID即可(部分功能受限)

2、$(window).scroll();

[]代表数组,{}代表数组中的数据对象,key1,key2是一个json对象中的key,一个json中key值唯一,value1,value2,是key键对应的值。

                         图片 1 

该事件是监控页面是否滚动,一旦滚动则触发其回调函数。

定义方式:

图片 2

由此两个函数,我们得到下面的代码:

1)直接拼写json串,例:String变量,内容为[{“attchName”:”附件0″,”attchId”:0},{“attchName”:”附件1″,”attchId”:1},{“attchName”:”附件2″,”attchId”:2}]。

  3.编写代码

$(window).scroll(function() {
var top = $(document).scrollTop();
if (top == 100) alert(top);
});

2)引入json-lib.jar开源jar包,定义JSONObject对象,例:

我的项目结构如下:

以上代码的意思是:当页面滚动时,检查当前顶部距离页面起始之间的像素是否为100,是则弹出消息框。

JSONArray jsonArray = newJSONArray();JSONObject attchJson = newJSONObject();attchJson.put("attchId","0");

attchJson.put("attchName", "附件0");jsonArray.put(attchJson);jsonArray即为一个json数据,等价于用[]的定义一个json.

图片 3

当能判断滚动的距离后,就可以进行其他的操作了。剩下的就是各种css的定位了。

复杂json定义,json中key对应的值也可以是一个json数组,如,json中封装一个任务信息,这个任务中有若干附件定义方法如下:

 目录解释:pages这个文件夹放的是你的这个小程序所涉及到所有页面.image文件夹放图片.app.json是一个小程序的入口配置文件,一些全局设置都在这个文件里面.

在制作页面的时候,我们要确定那些图片是需要进行视差滚动的。对于每个图片,我们都需要将CSS属性定义为

JSONArray taskJsonArray = newJSONArray();JSONObject taskJsonObj = newJSONObject();taskJsonObj.put("taskId",100);

taskJsonObj.put("taskName", "myTask");taskJsonObj.put("attchs",jsonArray);taskJsonArray.put(jsonObj);

我们可以看到detail这个目录下有四个文件:

position: absolute;

taskJsonArray为最后想要得到的json内容,

(1)  detail.js是detail.wxml这个页面涉及到的js处理的文件

此刻该div会漂移到页面的左上角,当然最好写上 left: 0px; top:
0px;还有该div的宽度和高度,有必要的话,需要写上overflow和background,所有的图片都应该是png格式的,这个大家懂的。

简单拼串后的形式如下:

(2) detail.json是detail.wxml的配置文件,比如我们可以设置导航条的标题

设置好属性后,就进行定位div的起始位置。也就是修改left和top,有必要的话可以修改right和bottom。

[{"attchs":[{"attchName":"附件0","attchId":0},{"attchName":"附件1","attchId":1},{"attchName":"附件2","attchId":2}],"taskId":100,"taskName":"myTask"}]

(3) detail.wxml是小程序索要展示的页面,UI的架子.

等以上工作完成后,就可以进行动画设置了。

2、js解析json

(4) detail.wxss是detail.wxml的样式文件,类似于css文件

用到的函数就是css了,我是这样设置的:

json的一般解析方式:

  3.1 接下来我们看一看app.json文件:

$('#text1').css('top', text1_top-parseInt(s_top)*0.15+'px');

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图