首先看下效果图:
接着我们来讲下实现步骤:
第一步,在桌面上新建一个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时软件即自动将我们自定义的代码文件和资源文件一起打包了。