使用媒体查询禁用jQuery？

时间：2014-05-30 18:00:15

标签： jquery html css media-queries

我是否可以将代码应用于媒体查询，以禁用具有jQuery的图像滑块？

我想禁用移动设备的滑块，因为滑块显示在屏幕外的某个位置，因此它不可见，所以ID就像禁用它一样。

下面是代码:(它草率，对不起）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
$('#slider').cycle({ 
    fx:     'scrollHorz', 
    prev:   '#prev', 
    next:   '#next', 
    timeout: 0, 
    rev: false 
});
</script>


<style type="text/css">

#wrapper {
    display: block;
    max-width: 660px;
    max-height: 500px;
    margin: auto;
    position: fixed;
    top: 0%; 
    bottom: 0%; 
    right: 10%;



}
#container {
    display: block;
    float: left;
    height: auto;
    width: 660px;
    overflow: auto;  

}
#prev {
    background-image: url(left%20button.png);

    background-position: center center;
    display: block;
    float: left;
    height: 500px;
    width: 80px;
    position: relative;
    z-index: 99;
    cursor: pointer;

}

#prev:hover {
    background-image: url(left%20button%20grey.png);
}


#next {
    background-image: url(right%20button.png);
    background-position: center center;
    display: block;
    float: right;
    height: 500px;
    width: 80px;
    position: relative;
    z-index: 99;
    cursor: pointer;
}

#next:hover {
    background-image: url(right%20button%20grey.png);
}
#slider {
    display: block;
    height: 500px;
    width: 500px;
    overflow: hidden;
    float: left;
    position: relative;

}
body {
    background-color: #000;
}

/*background image*/
#fsbg  {   

    width: 100%;
    height: auto;
    position: fixed;
    z-index: -100;
    left: 0px;
    top: 0px;
    min-height: 100%;
    min-width: 1040px;
}
#shadow {
    display: block;
    height: 550px;
    width: 550px;
    margin: auto;
    top: 0%;
    bottom: 0%;
    right: 15%;
    position: fixed;
}

/*header nav bar*/
#table {
    background-color: #000;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 7%;
    z-index: ;
}

/*footer nav bar*/
#table2 {
    background-color: #000;
    margin: 0;
    padding: 10;
    left: 0px;
    bottom: 0px;
    position: absolute ;
    width: 100%;
    height: 5%;
    z-index: 0;
}
textem {
    color: #FFF;
}
.textem2 {
    color: #666;
    text-align: right;
    font-family: "Bebas Neue";
    font-size: 16px;
}


@media screen and (max-width: 500px) {
  #wrapper, #container, #slider {
    width: 100%;
    left: 0px;
    bottom: 0px;
    position: fixed;
  }



  #prev {
      width: 80px;
      height: 200px;
      position: fixed;
      left: 20%;

      top: 65%;
  }

  #next {
      width: 80px;
      height: 200px;
      position: fixed;
      right: 20%;

      top: 65%;

  }

  img {
      width: 100%;
      height: auto;
      margin: auto;


  }
  #shadow {
      opacity: 0;
  }
}

</style>
</head>

<body>
/*header nav bar*/
<table width="100%" border="0" id="table">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

/*footer nav bar*/
<table width="100%" border="0" id="table2">
  <tr>
    <td class="textem2">Contact</td>
  </tr>
</table>

/*background image*/ 
<img src="eminem.jpg" name="fsbg" width="1409" height="1059" id="fsbg">
<div id="wrapper">
  <div id="container">>
    <div class="controller" id="prev"></div>
    <div id="slider">
    <img src="500x500/Eminem - Marshall Mathers LP 2 HQ 500x500.png" width="500" height="500" alt="MMLP2"> 
    <img src="500x500/Eminem - Bad Guy 2 500x500.png" width="500" height="500" alt="bad guy">
    <img src="500x500/Eminem - Parking Lot 500x500.png" width="500" height="500" alt="parking lot">
    <img src="500x500/Eminem - Rhyme Or Reason 500x500.png" width="500" height="500" alt="rhyme or reason">
    <img src="500x500/Eminem - So Much Better 500x500.png" width="500" height="500" alt="so much better">
    <img src="500x500/Eminem - Survival 500x500.png" width="500" height="500" alt="survival">
    <img src="500x500/Eminem - Legacy 500x500.png" width="500" height="500" alt="legacy">
    <img src="500x500/Eminem - Asshole.png" width="500" height="500" alt="asshole">
    <img src="500x500/Eminem - Berzerk 500x500.png" width="500" height="500" alt="berserk">
    <img src="500x500/Eminem - Rap God 500x500.png" width="500" height="500" alt="rap god">
    <img src="500x500/Eminem - Brainless 2 500x500.png" width="500" height="500" alt="brainless">
    <img src="500x500/Eminem - Stronger Than I Was 500x500.png" width="500" height="500" alt="stronger than i was">
    <img src="500x500/Eminem - The Monster 500x500.png" width="500" height="500" alt="the monster">
    <img src="500x500/Eminem - So Far 500x500.png" width="500" height="500" alt="so far">
    <img src="500x500/Eminem - Love Game 500x500.png" width="500" height="500" alt="so far">
    <img src="500x500/Eminem - Headlights 2 500x500.png" width="500" height="500" alt="headlights">
    <img src="500x500/Eminem - Evil Twin 500x500.png" width="500" height="500" alt="evil twin">
    </div>
    <div class="controller" id="next"></div>
    <div id="shadow">
    <img src=shadow.png" width="550" height="550" alt="">
    </div>
  </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

扩展杰伊所说的，如果你不想运行脚本，我建议使用Modernizr之类的Modernizr.touch测试（在Extras中），然后使用{{3 （可以包含在modernizr中）用于条件加载。

转到YepNope.js，点击“在杂项中触摸事件”，单击“生成”，将其保存为modernizr.js，在加载任何其他脚本之前放入

modernizr.com/download将css移到外部以便于阅读。

<强> HTML： 

<!-- loading modernizr script first in HEAD tags -->
<script src="modernizer.js"></script>

<!-- All your HTML Content Here -->

<!-- put scripts before closing body tag -->
<script>
   yepnope({
      test : Modernizr.touch, // Returns true if supports touch events
    yep  : [ // These scripts will run on mobile
        'jquery-1.11.1.min.js', 
        'SpryAssets/SpryMenuBar.js'
      ],
    nope : [ // These scripts will run on desktop
        'jquery-1.11.1.min.js', 
        'SpryAssets/SpryMenuBar.js',
        'jquery.cycle.all.js',
        'domReady.js'
        ]
    });
</script>

创建domReady.js文件并将插件调用移入其中。 

// This is your external domReady.js file.
$(document).ready(function() {
    $('#slider').cycle({ 
        fx:     'scrollHorz', 
        prev:   '#prev', 
        next:   '#next', 
        timeout: 0, 
        rev: false 
    });
});

如果这些都没有意义，请告诉我。

现在这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="slider.css" rel="stylesheet" type="text/css" />
<script src="modernizer.js"></script>

</head>

<body>
<body>
<table width="100%" border="0" id="table">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<table width="100%" border="0" id="table2">
  <tr>
    <td class="textem2">Contact</td>
  </tr>
</table>


<img src="eminem.jpg" name="fsbg" width="1409" height="1059" id="fsbg">

<div id="wrapper">
  <div id="container">>
    <div class="controller" id="prev"></div>
    <div id="slider">
    <img src="500x500/Eminem - Marshall Mathers LP 2 HQ 500x500.png" width="500" height="500" alt="MMLP2"> 
    <img src="500x500/Eminem - Bad Guy 2 500x500.png" width="500" height="500" alt="bad guy">
    <img src="500x500/Eminem - Parking Lot 500x500.png" width="500" height="500" alt="parking lot">
    <img src="500x500/Eminem - Rhyme Or Reason 500x500.png" width="500" height="500" alt="rhyme or reason">
    <img src="500x500/Eminem - So Much Better 500x500.png" width="500" height="500" alt="so much better">
    <img src="500x500/Eminem - Survival 500x500.png" width="500" height="500" alt="survival">
    <img src="500x500/Eminem - Legacy 500x500.png" width="500" height="500" alt="legacy">
    <img src="500x500/Eminem - Asshole.png" width="500" height="500" alt="asshole">
    <img src="500x500/Eminem - Berzerk 500x500.png" width="500" height="500" alt="berserk">
    <img src="500x500/Eminem - Rap God 500x500.png" width="500" height="500" alt="rap god">
    <img src="500x500/Eminem - Brainless 2 500x500.png" width="500" height="500" alt="brainless">
    <img src="500x500/Eminem - Stronger Than I Was 500x500.png" width="500" height="500" alt="stronger than i was">
    <img src="500x500/Eminem - The Monster 500x500.png" width="500" height="500" alt="the monster">
    <img src="500x500/Eminem - So Far 500x500.png" width="500" height="500" alt="so far">
    <img src="500x500/Eminem - Love Game 500x500.png" width="500" height="500" alt="so far">
    <img src="500x500/Eminem - Headlights 2 500x500.png" width="500" height="500" alt="headlights">
    <img src="500x500/Eminem - Evil Twin 500x500.png" width="500" height="500" alt="evil twin">
    </div>
    <div class="controller" id="next"></div>
    <div id="shadow">
    <img src=shadow.png" width="550" height="550" alt="">
    </div>
  </div>
</div>

<script>
   yepnope({
      test : Modernizr.touch, // Returns true if supports touch events
    yep  : [ // These scripts will run on mobile
        'jquery-1.11.1.min.js', 
        'SpryAssets/SpryMenuBar.js'
      ],
    nope : [ // These scripts will run on desktop
        'jquery-1.11.1.min.js', 
        'SpryAssets/SpryMenuBar.js',
        jquery.cycle.all.js',
        'domready.js'
        ]
    });
</script>

</body>
</html>
相关问题
最新问题