iphone手机端图片错位修正的js代码

<script type="text/javascript">
     $(function(){
           // 获取终端的相关信息
                var Terminal = {
                // 辨别移动终端类型
                platform : function(){
                var u = navigator.userAgent, app = navigator.appVersion;

                return {
                // android终端或者uc浏览器
                android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1,
                // 是否为iPhone或者QQHD浏览器
                iPhone: u.indexOf(‘iPhone‘) > -1 ,
                // 是否iPad
                iPad: u.indexOf(‘iPad‘) > -1,
                                    // 是否是通过微信的扫一扫打开的
                weChat: u.indexOf(‘MicroMessenger‘) > -1,

                isiOS9: Boolean(u.match(/OS [9]_\d[_\d]* like Mac OS X/i))

                };
                }(),
                // 辨别移动终端的语言:zh-cn、en-us、ko-kr、ja-jp...
                // language : (navigator.browserLanguage || navigator.language).toLowerCase()
                }
            $("#showinandroidbrowser").hide();
            $("#showiniosbrowser").hide();
            $("#ss1").attr("src","images/xzai1-1.jpg");
            $("#ss2").attr("src","images/xzai2.jpg");
            $("#ss3").attr("src","images/xzai3.jpg");
            $("#showiniosbrowser").css("height",jQuery(window).height());
            $("#showinandroidbrowser").css("height",jQuery(window).height());
             $(".swiper-container").css("height",jQuery(window).height()*13/15);

        if(Terminal.platform.android){
            $("#download").attr("src","images/android.jpg");
            $("#downloadurl").attr("href","http://download.chinahrt.com/app/rx_v3_2_2_20151014092004_CHINAHRT.apk");
            if(Terminal.platform.weChat) {
                //在浏览器中打开
                $("#showinandroidbrowser").show();
                $("#showiniosbrowser").hide();
            }
        } else if(Terminal.platform.iPhone || Terminal.platform.iPad ){
            $("#downloadurl").attr("href","itms-services://action=download-manifest&url=https://m.chinahrt.com/rongxue/iphone/rxios_1.0.34.plist");
            $("#download").attr("src","images/ios.png");
            if(Terminal.platform.weChat){
                //在safari中打开
                 $("#showiniosbrowser").show();
                 $("#showinandroidbrowser").hide();
            }else{
                if(Terminal.platform.isiOS9){
                    //iOS9的使用教程
                    $("#showiniosbrowser").hide();
                    $("#showinandroidbrowser").hide();
                    $(".swiper-container").show();
                    $("#ss1").attr("src","images/02.jpg");
                    $("#ss2").attr("src","images/03.jpg");
                    $("#ss3").attr("src","images/04.jpg");
                     $(".swiper-container").css("height",jQuery(window).height());

                    $("#ss3").click(function(){
                        $("#ss1").attr("src","images/xzai1-1.jpg");
                        $("#ss2").attr("src","images/xzai2.jpg");
                        $("#ss3").attr("src","images/xzai3.jpg");
                        mySwiper.swipeTo(0,1,false);
                        $("#ss3").unbind("click");
                        $("#download").show();
                        $(".swiper-container").css("height",jQuery(window).height()*13/15);

                    });
                    $("#download").hide();

                }
            }
        }

});

    </script>
时间: 2024-10-05 01:02:19

iphone手机端图片错位修正的js代码的相关文章

手机端图片滑动切换效果

最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环切换等等,具体可以拿demo代码自己本地试试,注意只支持手机端哦 大概思路:通过touchstart.touchmove.touchend 三个事件加上css3的3d变化效果配合,实现滑动切换图片, 开发是基于Zepto框架,当然也支持其他任何一款手机端框架,只需将代码中的美元符号$换为指定框架操作

手机端图片轮播插件

官网:http://bxslider.com/ 能自动适应屏幕大小,滑动图片 引用文件:query.bxslider.css和jquery.bxslider.min.js   手机端图片轮播插件

megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用flash实现上传的): 经过研究找到了一个手机端比较相对比较好用的插件实现图片上传,那就是megapix-image插件,比uploadify还是好用多了,下面就来上实例吧: html页面: <html> <body> <input type="file" cap

js手机端图片弹出方法

1 $("img").click(function(){ //获取窗口可视大小 2 var width=$(window).width(); 3 var height=$(window).height(); 4 var img=$(this); 5 var html=''; //获取图片的真实宽高 6 $("<img/>").attr("src", $(img).attr("src")).load(function

手机端图片插件可缩放 旋转 全屏查看photoswipe

官方介绍PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品. 为谁而用让移动站点的相册体验和原生App一样的设计师和开发者. 绝佳特性PhotoSwipe提供给用户一个熟悉又直观的相册交互界面. 官方网站http://www.photoswipe.com/ 源码示例http://github.com/downloads/codecomputerlove/P

H5+jqweui实现手机端图片压缩上传

主要功能,使用H5的formData上传base64格式的图片,canvas压缩图片,前端样式使用weui,为方便起见,使用了jquery封装过的weui,jqweui. 话不多少,开始上代码. 前端代码,直接在jqweui官网下的demo里改的(是dist下的demo) <!DOCTYPE html> <html> <head> <title>jQuery WeUI</title> <meta charset="utf-8&qu

手机端 图片自适应屏幕尺寸

<script type="text/javascript"> $(function () { var imglist = document.getElementsByTagName("img"); //安卓4.0+等高版本不支持window.screen.width,安卓2.3.3系统支持 var _width; doDraw(); window.onresize = function () { //捕捉屏幕窗口变化,始终保证图片根据屏幕宽度合理显示

手机端 图片的移动缩放旋转兼容touch

//缩放var initialScale = 1;var currentScale = 1;touch.on('#target', 'pinch', function (ev) { currentScale = ev.scale - 1; currentScale = initialScale + currentScale; currentScale = currentScale > 1.5 ? 1.5 : currentScale; currentScale = currentScale <

74.手机端图片瀑布流的加载代码和效果

http://www.bin012.com/index.php?route=product/product&path=63&product_id=52 原文地址:https://www.cnblogs.com/sqyambition/p/11022935.html