KM盒子APP制作软件

使用自定义代码给内页添加返回顶部功能

时间:2016-11-29 08:33 点击:

首先看下效果图:

接着我们来讲下实现步骤:

第一步,在桌面上新建一个html文件夹,然后在里新建三个文件夹css、img、js 如下图:

第二步,在css文件夹中新建my.css文件,添加如下代码:

/*mygotop*/
.cbbfixed {position: fixed;right: 10px;transition: bottom ease .3s;bottom: -85px;z-index: 3;cursor:pointer;}
.cbbfixed .cbbtn {width: 40px;height: 40px;display: block;background-color: #02a2aa;}
.cbbfixed .gotop {transition: background-color ease .3s;margin-top: 1px;}
.cbbfixed .gotop .up-icon{float:left;margin:14px 0 0 9px;width:23px;height:12px;background: url(../img/side-icon02.png);}
.cbbfixed .gotop:hover {background-color:#2c2d2e;}
.cbbfixed .cweixin {background: #666666;}
.cbbfixed .cweixin div {background: url(../img/erwei.png);width: 194px;height: 199px;position: absolute;left: -194px;top: -115px;opacity: 0;transform: scale(0);    -webkit-transform: scale(0);transform-origin: 100% 70%;-webkit-transform-origin: 100% 70%;transition: transform ease .3s,opacity ease .3s;-webkit-transition: all ease .3s;display:none\0;*display:none;}
.cbbfixed .cweixin:hover div {display: block;transform: scale(1);-webkit-transform: scale(1);opacity: 1;*display:block;}
.cbbfixed .cweixin .weixin-icon{float: left;margin:12px 0 0 11px;width:18px;height: 18px; background: url(../img/side-icon01.png);}


第三步,在js文件夹中新建my.js文件,添加如下代码:

function mygotop(){
	this.init();
}
mygotop.prototype = {
	constructor: mygotop,
	init: function(){		
		this._initBackTop();
	},	
	_initBackTop: function(){
		var $backTop = this.$backTop = $('<div class="cbbfixed">'+
						'<a class="cweixin cbbtn"">'+
							'<span class="weixin-icon"></span><div></div>'+
						'</a>'+
						'<a class="gotop cbbtn">'+
							'<span class="up-icon"></span>'+
						'</a>'+
					'</div>');
		$('body').append($backTop);
		
		$backTop.click(function(){
			$("html, body").animate({
				scrollTop: 0
			}, 120);
		});

		var timmer = null;
		$(window).bind("scroll",function() {
            var d = $(document).scrollTop(),
            e = $(window).height();
            0 < d ? $backTop.css("bottom", "10px") : $backTop.css("bottom", "-90px");
			clearTimeout(timmer);
			timmer = setTimeout(function() {
                clearTimeout(timmer)
            },100);
	   });
	}
	
}
var mygotop = new mygotop();


第四步,将css文件中用到的图片放置到img文件夹中,图片下载网址:http://www.kmbox.cn/help/gotop/img.zip

第五步,在KM盒子软件设置,自定义设置,自定义资源文件夹处设置我们刚才新建的html文件夹路径。

并在内页底部自定义html代码处,添加引用我们刚才新建的css和js文件,引用代码如下:

<link href="../css/my.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/my.js"></script>


然后保存,返回,这样生成APP时软件即自动将我们自定义的代码文件和资源文件一起打包了。

下载例子源文件http://www.kmbox.cn/help/gotop/html.zip

在线预览效果http://www.kmbox.cn/help/gotop/000/000.html


我要纠错