|
<!DOCTYPE html>
<html class="html-index">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=”renderer” content=”webkit” >
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>亚信艾扑-首页</title>
<link href="css/base.css" rel="stylesheet">
</head>
<body class="page-index">
<header class="p-header">
<nav class="nav"> <span class="logo"></span>
<ul class="menu">
<li><a href="javascript:;" class="active">首页</a></li>
<li><a href="prod.html">产品服务</a></li>
<li>
<div class="toggle-menu">
<a href="javascript:;" class="menu-item">
在线文档
</a>
<a href="javascript:;" class="menu-item">
App Store
</a>
<a href="javascript:;" class="menu-item">
功能众包
</a>
</div>
<a href="javascript:;">产品支持</a>
</li>
<li><a href="case.html">产品案例</a></li>
<li><a href="touch-us.html">联系我们</a></li>
</ul>
</nav>
</header>
<section class="index-content">
<div class="slider-status slider-status-base">
<ul>
<li><a class="base-active" href="javascript:;"></a></li>
<li><a class="desc-active" href="javascript:;"></a></li>
</ul>
</div>
<ul class="index-slider">
<li class="li-base">
<div class="slider-baseInfo">
<div class="slider-content">
<img class="img" src="img/index.png" alt="" >
<div class="ipuInfo">
<p class="ipuInfo-title">亚信艾扑</p>
<p class="ipuInfo-desc"> 基于Hybrid开发模式的移动应用开发框架，<br>
集Native App良好用户交互体验优势和Web App底成本、<br>
跨平台的优势于一身的开发模式。 <a href="#" target="_blank" class="link-ppt">详细介绍></a></p>
<a href="#" class="index-down">点击下载</a> </div>
<div class="scroll-flag"></div>
</div>
</div>
</li>
<li class="slider-desc">
<div class="slider-desc-head clean">
<p class="desc-advat">艾扑优势</p>
<p class="desc-advat-en">The Advantage Of IPU</p>
<p class="desc-advat-bottom"></p>
</div>
<div class="slider-content">
<div class="desc-left">
<div class="describe describe-low">
<div class="title"><span class="icon"></span>低门槛</div>
<div class="text">
<p>浏览器下的开发模式、简洁的API设计、丰富的在线文档，简洁易用，开发者准入门槛极低。</p>
</div>
</div>
<div class="describe describe-resp">
<div class="title"><span class="icon"></span>界面响应式</div>
<div class="text">
<p>同一套HTML页面在不同分辨率的屏幕下自适应完美展现。</p>
</div>
</div>
<div class="describe describe-safe">
<div class="title"><span class="icon"></span>全面的移动安全保障</div>
<div class="text">
<p> 1）传输安全：RSA+DES算法加密、可配置、降低CPU使用率。<br>
2）本地模板安全：客户端上存储DES算法原生加密，兼容Android和IOS平台。<br>
3）接口有效性验证:自主研发加密算法，请求来源检查，客户端来源真实性保障，请求防串改。<br>
4）客户端代码混淆：Android平台客户端代码混淆，增强安全性。<br>
</p>
</div>
</div>
</div>
<div class="desc-right">
<div class="describe describe-cross">
<div class="title"><span class="icon"></span>跨平台</div>
<div class="text">
<p>广泛使用跨平台技术，屏蔽操作系统差异，降低移动端APP的开发成本，UI使用Web技术（HTML5、CSS3和、其它跨平台技术。</p>
</div>
</div>
<div class="describe describe-native">
<div class="title"><span class="icon"></span>UI本地化</div>
<div class="text">
<p>Web资源和脚本分离;原生功能分离；远程服务端发布动态页面和静态资源，客户端增量同步到本地，大大减少流量开销。</p>
</div>
</div>
<div class="describe describe-expe">
<div class="title"><span class="icon"></span>良好体验</div>
<div class="text">
<p> 公共功能和UI尽量使用Native技术、<br>
React Native技术，浏览器开发，客户端<br>
运行，接近原生的体验效果。<br>
一切变化不大的东西尽力追求极致体验。<br>
</p>
</div>
</div>
</div>
<img src="img/index-ar.png" alt="" class="desc-img">
</div>
</li>
</ul>
</section>
<script src="lib/jquery/jquery.min.js"></script>
<script src="js/public.js"></script>
<script>
$(function(){
// 随窗口调整，slider
var topHeadHeight = $('.p-header').height();
var sliderHeight
function resetSliderHeight(){
var winHeight = $(window).height();
$(".index-slider li").height(winHeight-topHeadHeight);
}
$(window).resize(resetSliderHeight);
resetSliderHeight();
// 绑定鼠标滚动事件
function sliderDown(){
$('.index-slider').css('transform', 'translatey(-50%)');
$('.slider-status').removeClass('slider-status-base').addClass('slider-status-desc');
}
function sliderUp(){
$('.index-slider').css('transform', 'translatey(0)');
$('.slider-status').removeClass('slider-status-desc').addClass('slider-status-base');
}
// 鼠标滚动
$(window).on('mousewheel DOMMouseScroll', function(e){
var event = e.originalEvent;
var delta = event.detail ? -event.detail : event.wheelDelta;
if (delta < 0) { // 鼠标下滚动
sliderDown();
} else { // 鼠标上滚动
sliderUp();
}
});
$('.base-active').click(sliderUp);
$('.desc-active').click(sliderDown);
});
</script>
</body>
</html>
|
