我正在尝试调整视频大小,以便仅当浏览器宽度降至 960 像素以下时才填充其容器的 100%。由于与内联样式相关的原因,我在 jquery 中编写了这个简单的函数。如果工作正常——但它仅在窗口加载时调用。
$(document).ready(function(){
if ($(window).width() < 950) {
$("video").width("100%");
}
});
我如何编写一个类似的 jquery 函数,它可以在调整浏览器窗口大小时动态更改视频的宽度?我已经尝试过以下方法,但没有成功。
$(window).resize(function() {
if ( $(window).width() < 950) {
$("video").width("100%");
}
});
*编辑*这是新的视频 html 代码:
<div id="sliderbg">
<div class="container">
<div id="slider" class="row">
<div class="eight columns">
<div id="text-6" class="widget widget_text"> <div class="textwidget"><br>
<video id="wp_mep_1" width="600" height="330" poster="http://www.first1444.com/wp-content/themes/lightningyellow/images/poster.png" controls="controls" preload="none" >
<source src="http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" type="video/mp4" />
<object width="600" height="330" type="application/x-shockwave-flash" data="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf">
<param name="movie" value="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" />
</object>
</video>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#wp_mep_1').mediaelementplayer({
m:1
,features: ['playpause','current','progress','volume','tracks']
});
});
</script>
<br/><h6 id="tagline">See <b><i>FIRST</i></b> Team #1444 in action building this years robot</h6>
</div>
</div><script type="text/javascript">
$(document).ready(function() {
if ( $(window).width() < 960) {
$("video").width("100%");
}
});
</script>
</div><!-- eight columns -->
顺便说一句,我正在使用基础 CSS 框架。我怀疑这会导致问题。
最佳答案
您还可以使用 CSS 媒体查询:
#my-element {
width : 950px;
}
@media all and (max-width: 950px) {
#my-element {
width : 100%;
}
}
这会将元素设置为 950px
宽度,除非视口(viewport)小于 950px
,在这种情况下,元素将设置为 100%
宽度。
这是使用媒体查询的演示:http://jsfiddle.net/G9gx6/
这里是查找浏览器支持的一个很好的来源:http://caniuse.com/#feat=css-mediaqueries
更新
当然您也可以使用 JavaScript:
//bind to the windows resize event
$(window).on('resize', function () {
//check if the viewport width is less than 950px
if ($(this).width() < 950) {
//if so then set some element's width to 100%
$('#my-element').width('100%');
} else {
//otherwise set the element's width to 950px
$('#my-element').width('950px');
}
//trigger a resize event on the window object so this code runs on page-load
}).trigger('resize');
更新
为了优化此代码,我将缓存 $('#my-element')
选择,并将 resize
事件处理程序限制为仅运行一次-一会儿:
$(function () {
var $element = $('#my-element'),
resizeOK = true,
timer = setInterval(function () {
resizeOK = true;
}, 100);
$(window).on('resize', function () {
if (resizeOK) {
resizeOK = false;
if ($(this).width() < 950) {
$element.width('100%');
} else {
$element.width('950px');
}
}
}).trigger('resize');
});
这是一个演示:http://jsfiddle.net/G9gx6/1/
关于javascript - 当浏览器宽度低于950px时如何动态调用jquery函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9319641/