如何在设备上修复图像

时间:2014-05-14 09:25:13

标签: jquery html css jquery-mobile

间隙应用程序获取输出图像滑动,但它像滚动一样,但我想要适合任何移动设备上的屏幕像(4,5英寸)
这里有一些代码: -

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="responsiveslides.js"></script>

<style>
.caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);
  left: 0;
  right: 0;
  bottom: 15;
  padding: 10px 20px;
  margin: -2;
  margin-top:-70px;
  max-width: none;
  }
img {
  max-width: 100%;  
  height: auto
     }
.one{ float:right}
 html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #container {
                width: inherit;
                height: inherit;
                margin: 0;
                padding: 0;
                        }

</style>
<body>
<div class="slideshow">
<div id="container">
     <img src="images/1 copy.jpg" alt=""></br>
     <div  class="caption"> <font color="white">Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd</br> asdasdasd asdadasd asdasdad</font><a href="http://www.google.com" style="text-decoration: none">&nbsp;&nbsp;<font color="white" ><span class="one">skip</span></font></a></div>

</div>

<div id="container">
    <img src="images/2 copy.jpg" alt=""></br>
    <div class="caption"><font color="white" >First Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd</br> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
    </div>
</div>

<div id="container">
    <img src="images/3 copy.jpg" alt=""></br>
    <div class="caption"><font color="white" >three Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd</br> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
    </div>
</div>

<div id="container">
    <img src="images/4 copy.jpg" alt=""></br>
    <div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd</br> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
    </div>
</div>

</div>
</body>
<script>


$(function() {
    $(".slideshow > div:gt(0)").hide();

    setInterval(function() { 
        var currentSlide = $('.slideshow > div:visible:first'),
            nextSlide = currentSlide.next();

        currentSlide.fadeOut(2000)
        nextSlide.fadeIn(2000);

        if ((currentSlide.index() + 1) == 4) {


       Redirect();

        }
    },  2000);
    function Redirect() {
    window.location="https://www.google.co.in";
}
});

</script>
</html>

此代码输出是图像自动滑动但我的问题是图像随滚动 我希望图像适合屏幕任何设备 所以请给我任何想法

1 个答案:

答案 0 :(得分:1)

我完全重新设计了您的代码,主要是因为您没有在HTML中使用正确的jQuery Mobile语法而包含jQuery Mobile。

HTML:

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://responsiveslides.com/responsiveslides.min.js"></script>

<style>
    .caption {
        display: block;
        position: fixed;
        z-index: 2000;
        font-size: 20px;
        text-shadow: none
        color: #fff;
        background: #000;
        background: rgba(0,0,0, .8);
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 20px;
        /*margin: -2;
        margin-top:-70px;*/
        max-width: none;
    }
    img {
        padding: 0;
        margin: 0;
    }
    .one{ 
        float:right
    }
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .ui-content {
        padding: 0;
        margin: 0;
    }
    #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<script>
    $(window).resize(function() {
        setHeight();
    });

    $(document).on('pageshow', '#index', function(){       
        setHeight();
    });

    function setHeight() {
        $.mobile.activePage.find('.ui-content').height(getRealContentHeight());
        $.mobile.activePage.find('img').height(getRealContentHeight()-4);   
    }

    function getRealContentHeight() {
        var header = $.mobile.activePage.find("div[data-role='header']:visible");
        var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
        var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
        var viewport_height = $(window).height();

        var content_height = viewport_height - header.outerHeight() - footer.outerHeight() -2;
        if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
        } 
        return content_height;
    }
</script>
<body>
<div data-role="page" id="index">            
    <div data-role="content" class="slideshow">
        <div id="container">
            <img src="1.jpg" alt="" height="100%" width="auto"/><br/>
            <div  class="caption"> <font color="white">Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="http://www.google.com" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a></div>

        </div>

        <div id="container">
            <img src="2.jpg" alt=""/><br/>
            <div class="caption"><font color="white" >First Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
            </div>
        </div>

        <div id="container">
            <img src="3.jpg" alt=""/><br/>
            <div class="caption"><font color="white" >three Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
            </div>
        </div>

        <div id="container">
            <img src="4.jpg" alt=""/><br/>
            <div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
            </div>
        </div>
    </div>
</div>
</body>
<script>


$(document).on('pageshow', '#index', function(){ 
    $(".slideshow > div:gt(0)").hide();

    setInterval(function() { 
        var currentSlide = $('.slideshow > div:visible:first'),
            nextSlide = currentSlide.next();

        currentSlide.fadeOut(1)
        nextSlide.fadeIn(2000);

        if ((currentSlide.index() + 1) == 4) {


       Redirect();

        }
    },  2000);
    function Redirect() {
        window.location="https://www.google.co.in";
    }
});

</script>
</html>
  • 我使用了4个虚拟1080 * 1920图像来测试这个例子
  • 因为您使用jQuery Mobile,所以您的代码现在包含在内:

    <div data-role="page" id="index"> 
    
  • 使用jQuery Mobile时,为图像设置100%的高度是不够的,这就是为什么我使用函数getRealContentHeight来获得正确的内容高度
  • 内容高度是在pageshow事件期间计算的,因为这只是jQuery Mobile可以计算正确内容高度的时间
  • fadeOut是1,因为当旧图像出现时,它仍然显示下面的下一张图片,这就是为什么第二个滑块首先显示的原因。