画像の拡大鏡の機能を提供する画像要素にセレクターが接続されています。セレクターを削除する必要があるため、拡大鏡が開始されなくなり、画面サイズに応じて再度追加されます。たとえば、モバイル画面でアクセスした場合、クラスを削除したいと思います。画面サイズが 480px 以上に調整される場合は、クラスを再度追加してください。これにアプローチするための最良かつ最も効率的な方法は何ですか? どんな助けでも大歓迎です。
13614 次
4 に答える
7
jQuery を気にしない場合は、単純な例でうまくいくかもしれません。
CSS:
.red{
background:red;
}
.yellow{
background:yellow;
}
HTML:
<div style="width:300px; height:100px;" class="yellow"></div>
jQuery:
$(function(){
$(window).bind("resize",function(){
console.log($(this).width())
if($(this).width() <500){
$('div').removeClass('yellow').addClass('red')
}
else{
$('div').removeClass('red').addClass('yellow')
}
})
})
これにより、含まれているウィンドウのサイズを変更するたびに、div 要素の色が変更されます。
フィドルを参照してください: http://jsfiddle.net/6v7GE/
注: フィドルでのサイズ変更は、含まれているウィンドウのホルダーをスライドさせます。
于 2013-09-01T20:22:23.753 に答える
1
複数のスタイル シートを使用する @media クエリ (画面サイズに基づいて異なる css を適用する)、または java-script または java-script ライブラリのいずれかを適用することをお勧めします。
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
于 2013-09-01T19:54:51.160 に答える
0
次のコードを試してください。
$(window).resize(function() {
if ($(this).width() < 1024) {
$('.div').hide();
} else {
$('.divNew').show();
}
});
このコードを使用すると、幅に応じて div を非表示にできます。
于 2016-04-25T13:31:54.857 に答える
-1
于 2013-09-01T19:54:25.950 に答える