APP 半自适应 WEB页面
特别赶，响应式纯自适应的，有空写了新的发。 （在手机上看，页面上看一定乱）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta http-equiv="Cache-Control" content="no-transform ">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="jquery-1.9.1.js"></script>
<title>无缝连接滚动</title>
<style>
html,body,ul,li{
margin:0; padding:0;
}
a{
text-decoration:none;
}
#s_height ul li{
z-index:9;
list-style-type:none;
float:left;
overflow:hidden;
display:black;
}
#d_Layout ul li{
list-style-type:none;
float:left;
text-align:center;
}
#d_cilck{
width:100%;
}
#s_us{
right:20px; position:absolute; margin-top:-25px; z-index:999;
}
#s_us ul li{
list-style-type:none;
float:left;
padding-left:15px;
}
#s_us ul li{
margin-left:15px;
border-radius:25px; border:2px solid #ffffff;padding:5px;
}
</style>
</head>
<script>
$(function(){
var t_name={
t_lb:$("#s_Shell ul li"),
s_h:$("#s_height"),
Carousel_img:$("#s_heights ul li"),
Carousel_imgs:$("#s_heights ul li img"),
s_Sc:$("#Seamless_carousel"),
s_ul:$("#s_us ul li"),
s_slM:$(".slider-mains")
};
//全局变量，触摸开始位置
var startX=0,startY=0,x=0,i=2,c=3,sWidths= t_name.s_h.width();
//touchstart事件 在触摸开始时触发事件
function touchSatrtFunc(evt){
try
{
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
x = Number(touch.pageX); //页面触点X坐标
//记录触点初始位置
startX = x;
}
catch (e) {
console.log('touchSatrtFunc：' + e.message);
}
}
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
try
{
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
}
catch (e) {
console.log('touchSatrtFunc：' + e.message);
}
}
//touchend事件 在触摸结束时触发事件
function touchEndFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
t_Carousel.z_lb(t_name.t_lb,x<startX);
t_Carousel.z_lz(t_name.t_lb,x>startX);
window.clearInterval(timeID);
timeID=setInterval(function(){t_Carousel.z_lb(t_name.t_lb,true)},4000);
}
catch (e) {
console.log('touchEndFunc：' + e.message);
}
}
//绑定事件
function bindEvent() {
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
//判断是否支持触摸事件
function isTouchDevice(){
console.log(navigator.appVersion);
try {
document.createEvent("TouchEvent");
bindEvent(); //绑定事件
}
catch (e) {
console.log("不支持TouchEvent事件！" + e.message);
}
}
window.onload = isTouchDevice;
var t_Carousel={
z_lb:function(t,z){
if(z){
if(i>=4){
t_name.s_slM.stop(true).animate({"margin-left":"-"+(i*sWidths)+"px"},1000);
i=1;
t_name.s_slM.animate({"margin-left":"-"+(i*sWidths)+"px"},0);
t_name.s_ul.eq(i-1).css({"transform":"scale(1.1)","background-color":"#ffffff"}).siblings().css({"transform":"scale(1)","background-color":"transparent"});
}else{
t_name.s_slM.animate({"margin-left":"-"+(i*sWidths)+"px"},1000);
t_name.s_ul.eq(i-1).css({"transform":"scale(1.1)","background-color":"#ffffff"}).siblings().css({"transform":"scale(1)","background-color":"transparent"});
}
if(true){
i==1?c=0:i==2?c=1:c=2;
}
if(i<=4){
i++
}else{
i=5;
}
}
},
z_lz:function(t,z){
if(z){
$("#sts").css("display","block");
t_name.s_ul.eq(c-1).css({"transform":"scale(1.1)","background-color":"#ffffff"}).siblings().css({"transform":"scale(1)","background-color":"transparent"});
if(c>=3){
var t=c-3;
t_name.s_slM.stop(true).animate({"margin-left":"-"+(t*sWidths)+"px"},1000);
t_name.s_slM.animate({"margin-left":"-"+(c*sWidths)+"px"},0);
}else{
t_name.s_slM.animate({"margin-left":"-"+(c*sWidths)+"px"},1000);
}
c--;
if(true){
if(c<=-1){
i=1;
}else{
c==2?i=4:c==1?i=3:i=2;}
}
if(c>1){
c=2;
}
if(c<0)
{
c=3;
}
}
}
}
function Automatic_at(){
var sWidth= t_name.s_h.width();
var sWidthTo=Number(sWidth*(5/8));
t_name.s_Sc.attr("style","width:"+sWidth+"px;overflow:hidden;");
t_name.Carousel_img.attr("style","height:"+sWidthTo+"px;width:"+sWidth+"px;min-height: 80px;");
t_name.Carousel_imgs.attr("style","height:"+sWidthTo+"px;width:"+sWidth+"px;min-height: 80px;");
t_name.s_h.attr("style","height:"+sWidthTo+"px;width:100%;min-height: 80px;");
$("#sts").attr("style","width:"+sWidth+"px;overflow:hidden; display:none;");
$(".slider-mains").attr("style","margin-left:-500px;");
}
$(window).resize(function(){
Automatic_at();
});
Automatic_at();
timeID=setInterval(function(){t_Carousel.z_lb(t_name.t_lb,true)},4000);
});
</script>
<body>
<div id="s_Shell" >
<div id="s_height" class="s_width">
<div id="Seamless_carousel" >
<div id="s_heights" style="width:4000px; overflow:hidden;" >
<ul class="slider-mains" >
<li ><img id="sts" class="s_width" src=" img/item2.jpg"/></li>
<li ><img class="s_width" src=" img/ss.png"/></li>
<li ><img class="s_width" src=" img/item1.jpg"/></li>
<li ><img class="s_width" src=" img/item2.jpg"/></li>
<li ><img class="s_width" src=" img/ss.png"/></li>
</ul>
</div>
</div>
</div>
<div id="s_us" >
<ul>
<li style="background-color:#ffffff; transform:scale(1.1);"><div ></div> </li>
<li><div ></div> </li>
<li><div ></div> </li>
</ul>
</div>
</body>
</html>
APP 半自适应 WEB页面的更多相关文章
- 用Chrome devTools 调试Android手机app中的web页面。
(1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手 ...
- iOS之safari调试iOS app web页面
Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报 ...
- PhoneGap 白名单安全机制 navigator.app 加载外部页面返回以及退出介绍
一. Phonegap 白名单安全机制 Phonegap应用的页面大多存在于本地,但有时需要加载外部的Web页面到应用内置的浏览器 视图中已完成特定的应用功能,出于安全性考虑,PhoneGap 设立了 ...
- 客户端相关知识学习（一）之混合开发，为什么要在App中使用H5页面以及应用场景、注意事项
混合开发 随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
- safari 调试iPhone web页面
safari设置-打开Safari偏好者设置,选中“高级菜单”,在页面最下方看到“在菜单中显示开发菜单”的复选框,在复选框内打钩,这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置 ...
- appium处理app与web页面的转换
测微信页面的时候使用谷歌app,进入微信页面的链接 def setUp(self): print("set up env for android testing...") se ...
- phonegap(cordova)从手机app跳转到web页面在跳转回APP本地页面思路
项目中需要用到 WAP支付宝支付. 但是 使用PHONEGAP开发 跳转到支付宝支付,然后跳转回来 就回不到APP的本地页面, 就是使用WAP的第三方登录也是一样的.很难从WAP页面在跳转到 app本 ...
- 【web开发 | 移动APP开发】 Web 移动开发指南（2017.01.05更新）
版本记录 - 版本1.0 创建文章(2016.12.30) - 版本1.1 更正了hybird相关知识:增加了参考文章(2017.01.05): + Web APP更正为响应式移动站点与页面,简称响应 ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
随机推荐
- Android开发之Handler的用法（源码分享）
Handler主要接受子线程发送的数据, 并用此数据配合主线程更新UI.. 当应用程序启动时.Android首先会开启一个主线程 (也就是UI线程) , 主线程为管理界面中的UI控件,进行事件分发. ...
- 12本最优秀的Android开发电子书强力推荐
如今已经是手机互联网时代,手机应用越来越普及.Android作为基本的手机操作系统.吸引了众多开发人员開始为Android系统开发应用. 假设你正在开发或者准备进行Android的开发,我们今天推荐的 ...
- n每个计数的概率和发生骰子--动态规划
称号:该n骰子在地板上.所有点骰子的向上一面和一个S.进入n,打印S所有可能的值的概率. 声明思想非原创!仅仅因动态规划思想的使用非常好,记下. 分析:动态规划就是分阶段考虑问题.给出变量.找出相邻阶 ...
- android从中国天气网获取天气
http://download.csdn.net/detail/sun6223508/8011669 里面的一切..可完全移植 版权声明:本文博主原创文章.博客,未经同意不得转载.
- 分布式数据库中间件–(2) Cobar与client握手身份验证
Cobar启动完毕,监听特定端口.整个认证的流程图: NIOAcceptor类继承自Thread类,该类的对象会以线程的方式执行,进行连接的监听. NIOAcceptor启动的初始化步骤例如以下: 1 ...
- Java-如何去掉JFrame上的最大化最小化和关闭按钮（转）
在JDK1.4以前,我们只有一种方式来去掉窗口的标题栏,那就是直接使用JWindow,用JWindow来代替JFrame使用.但用过JWindow的人一定知道,JWindow在操作系统的任务栏是不可见 ...
- Cookie和Session (转)
Session和Cookie在网站开发中是用来保存用户与后端服务器的交互状态.它们有各自的缺点和优点.而且,他们的优点和应用场景是对立的. Cookie 完整地描述:当一个用户通过HTTP访问一个 ...
- cocos2dx tolua传递参数分析
cocos2dx tolua传递参数分析: tolua_Cocos2d_CCNode_addChild00 == void CCNode::addChild(CCNode *child) tolua_ ...
- Redis集群方案及实现
在作出Redis群集解决方案,他跑了小半个.行表现得非常稳定在几乎相同的经历与大家分享,我写在前面的文章数据在线服务的一些探索经验,能够做为背景阅读 应用 我们的Redis集群主要承担了下面服务:1. ...
- Android高级编程笔记（四）深入探讨Activity（转）
在应用程序中至少包含一个用来处理应用程序的主UI功能的主界面屏幕.这个主界面一般由多个Fragment组成,并由一组次要Activity支持.要在屏幕之间切换,就必须要启动一个新的Activity.一 ...