当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How do I alter my Jquery slideshow to change size in different screen resolutions

问题描述:

Im currently using 2 CSS style sheets with media queries attached for my website so that it will resize for different browser sizes. My problem is that I have a Jquery powered slideshow and I need the images to change to a smaller size when the website is being viewed at the smaller resolution. I have the slideshow contained in a div that has a jquery animation that expands the set width of the box giving the illusion of revealing the slideshow inside which needs to alter as well to compensate.

Here is my default Jquery that has the animation for the div to expand

$(document).ready(function() {

$("#slideshow_box")

.animate({"height": "600px"}, 500)

.animate({"width": "488px"}, 500);

});

How would I change that so that the smaller viewing version would be this but would only trigger off when the site is being viewed in the smaller resolution?

$(document).ready(function() {

$("#slideshow_box")

.animate({"height": "400px"}, 500)

.animate({"width": "288px"}, 500);

});

CSS

#slideshow_box{

position:relative;

float:left;

height: 0px;

width: 0px;

margin-right: 60px;

overflow:hidden;

}

网友答案:

Use screen width and height. based on these write your code

 $(document).ready(function(){
   if ((screen.width>=1024) && (screen.height>=768)) {

        alert('Screen size: 1024x768 or larger');

  }
  else  {
        alert('Screen size: less than 1024x768, 800x600 maybe?');

    }
});

Thanks..

网友答案:

The simplest method is probably to duplicate the media selection logic by accessing the current screen resolution from Javascript using the variables:

screen.width
screen.height
分享给朋友:
您可能感兴趣的文章:
随机阅读: