Tag: resize

如果大于x像素（jQuery），则使用resize to getScript: 所以这个脚本有问题。它基本上是在任何resize事件上加载脚本。 I have it working if lets say… – User has window size above 768 (getScipt() and content by .load() in that script) – Script will load (and content) – User for some reason window size goes below 768 (css hides #div) – User re-sizes again above 768, And does not load the script […]

仅在某个窗口宽度之上切换动画: 我想使用Toggle-Event，但仅当窗口宽度超过一定大小时。 DIV应该始终可见。我的解决方案有点工作，但是一旦我调整窗口大小，if语句就不再触发了。任何提示？这是链接： http ： //jsfiddle.net/mihaene/wMrjc/

在bxslider中resize时更新内容滑块的大小: 我正在制作一个全屏内容的bx滑块，它是幻灯片内部文本和图像的混合，高度为100％但不知怎的，我不知道它在resize时面临的问题是什么。我正在使用此代码： – $(function() { var eleSlider = $(‘.main-slider’); var callSlider = eleSlider.bxSlider({ //pagerCustom: ‘.bx-pager’, adaptiveHeight: true, adaptiveHeightSpeed: 1000, //mode: ‘slide’, //useCSS: false, infiniteLoop: false, hideControlOnEnd:true, easing: ‘easeInOutExpo’, //video: true, speed: 1000, autoHover:true, responsive:true, //preloadImages:all, pager:false, //controls:false, //auto:true, pause:3000, }); $(window).resize(function(){ callSlider.reloadSlider(); }).resize(); }); 当我在没有reloadSlider()情况下调整屏幕大小时，它的宽度和高度采用了奇怪的形状，在应用reloadSlider() ，它会转到第一张幻灯片。我希望宽度，高度和所有有用的组件在resize时更新，但保持当前幻灯片。我设计了一个小提琴，但由于iframe没有显示问题，而在纯HTML中，它显示了高度不适应屏幕的问题。 http://jsfiddle.net/n0669x28/1/show/ Bx-slider有像adaptiveHeight: true, responsive:true参数adaptiveHeight: true, responsive:true ，在这种情况下有帮助吗？ […]

jQuery在hover时调整div框: 我有两部分代码，做3件事：仅调整6个.boxes div中的一个（使用它的文本内容）制作未选中的透明.box div 显示隐藏。更多跨度码： $(‘.content_area div’).hide(); $(function(){ $(‘.box’).bind(‘mouseover’,function() { $(this).addClass(‘up’); $(‘.box’).not(‘.up’).fadeTo(‘normal’,0.2); }); $(‘.box’).bind(‘mouseout’,function() { $(‘.box’).removeClass(‘up’).fadeTo(‘normal’,1); }); }); initwidth = $(‘.box’).width(); initHeight = $(‘.box’).height(); $(‘.box’).hover(function(){ $(this).children(‘.more’).show(); $(this).stop().animate({width: ‘220’, height: ‘140’},{queue:false, duration:’fast’}).css(‘font-size’, ‘1.2em’); }, function(){ $(this).children(‘.more’).hide(); $(this).stop().animate({width: initwidth, height: initHeight},{queue:false, duration:’fast’}).css(‘font-size’, ‘1em’); }); 但有些事情是错误的。只有第一个盒子工作得很好，但是在resize时它不会掩盖其他盒子。它的影响你可以在这里看到： jsFiddle 我的问题是：是否有可能统一这些代码并使其有效？： – [

用浏览器resize的三个部分: 编辑：我想在阅读下面我最初写的内容之前更清楚……我正在创建一个网站，使用三个相互浮动的部分。我使用链接从一个部分滚动到另一个部分。滚动到该部分时，我希望该部分的背景适合浏览器屏幕大小。如果浏览器在仍然查看页面的该部分时已经resize，我希望背景“捕捉”到窗口并继续填充屏幕。目前，这只发生在左侧的部分。我不确定这是否可行，但我想我会看到。我一直在使用本网站上的单页策略教程： http ： //jqueryheaven.com/2012/08/building-a-one-page-portfolio-with-jquery-slide/ 虽然本教程使用了许多不同的部分，但我只是让我的网站使用3或4.无论哪种方式，我都想弄清楚如何让每个部分适合浏览器窗口，无论你调整窗口大小有多大。到目前为止，在教程和我制作的网站上，只有左边最左边的部分适合窗口。其余部分不会resize以适应。这是我到目前为止的代码： HTML（我省略了容器内的内容： CSS（尝试使用100％宽度和高度的部分，以及背景大小：封面，但没有任何工作）： .box { float:left; } #artwork { background: #b4c620; width:100%; height:100%; background-size:cover; } #home { background: #58267a; with:100%; height:100%; background-size:cover; } #contact{ background: #b4c620; width:100%; height:100%; background-size:cover; } 脚本（也是从教程中获取的，正如我所提到的，它只调整第一个部分框的大小，（＃artwork），而不是其余部分。虽然，如果你在调整浏览器大小后链接到该部分，该部分会合适。）： function resizeBoxes() { var browserWidth = $(window).width(); var browserHeight = $(window).height(); […]

窗口。 disptacheventresize问题？: 在窗口resize()触发时，它必须采用“ #snapContainer ” div （我的意思是background-css属性）我的jquery代码是， $(‘#snapContainer’).css({“background-size”: “95%”, “min-height”: “100%”, “position”: “relative”, “left”: “2%”, “margin-bottom”: “15%”, “display”: “inline-block”}); $(‘.’+snapCloseClass).show(); //window.dispatchEvent(new Event(‘resize’)); $(window).resize(function() { $(‘#snapContainer’).css({“background-size”: “95%”, “min-height”: “100%”, “position”: “relative”, “left”: “2%”, “margin-bottom”: “15%”, “display”: “inline-block”}); });

根据窗口宽度动态更改jQuery滑块选项: 我想根据窗口宽度（加载和resize）更改jQuery选项。我找到了接近我需要的解决方案，但我不了解jQuery或javascript足以根据我的需要定制它们。这是我的jQuery代码： var tpj = jQuery; tpj.noConflict(); tpj(document).ready(function () { if (tpj.fn.cssOriginal != undefined) tpj.fn.css = tpj.fn.cssOriginal; tpj(‘#rev_slider_1_1’).show().revolution({ delay: 5000, startwidth: 1920, startheight: 515, hideThumbs: 200, thumbWidth: 100, thumbHeight: 50, thumbAmount: 4, navigationType: “bullet”, navigationArrows: “verticalcentered”, navigationStyle: “navbar”, touchenabled: “on”, onHoverStop: “off”, navOffsetHorizontal: 0, navOffsetVertical: 20, shadow: 0, fullWidth: “on” }); }); //ready 我想根据窗口宽度更改startheight […]

Javascript（浏览器窗口超过436px时resize）: 我将尝试详细解释我想要的内容，因为很难解释我的想法。我创建了一个响应式网站，我想在其中显示3个框：（第1天 – 第2天 – 第3天）看图像我希望它看起来如何问题（试试这个和U会看到我的问题：将屏幕窗口调整为小于436px（所以你得到红色框）然后单击第2天，然后打开第2天的内容开始调整浏览器的大小（这将自动关闭“第2天”框。我不希望它在我resize时关闭。我创建resize的原因是桌面，所以当在桌面上看到它时，它正在扩展所有框。我的代码： $(document).ready(function() { if($(window).width()436) $(‘.bbottom, .bbottom2’).show(); else $(‘.bbottom2’).hide(); }); .ticket{ margin:0; padding:0; float:left; } .btop2, .btop{ background-color:grey; color:white; padding:5px 10px; display:block; width:100px; border-bottom:1px solid; pointer-events:none; } .btop:hover{ background-color:darkgrey; } /*Responsive*/ @media screen and (max-width: 436px) { .ticket{ margin:0; padding:0; float:none; } .btop{ […]

jQuery Resize Plugin适用于: 我在这里使用 jQuery resize插件插件，它在图像上应该工作。但我正试图将它应用到画廊Galleriffic 问题是主图像被包装在，当我向标签添加一个类时，resize不起作用。有什么建议？这是我的标记： Any html can be placed here … 这是脚本： $(function() { $( “.resize1” ).aeImageResize({ height: 70, width: 70 }); $( “.resize2” ).aeImageResize({ height: 10, width: 10 }); }); resize脚本是完美的，但我需要它来实现 PD我一般都是jQuery和脚本编写者。更新：这是截图如何在浏览器中显示：这是来自galleriffic.js文件的一小部分 var newSlide = this.$imageContainer .append(‘ ‘) .find(‘span.current’).css(‘opacity’, ‘0’); newSlide.find(‘a’) .append(imageData.image) .click(function(e) { gallery.clickHandler(e, this); }); 它广告推进链接类。 […]

使用jQuery调整图像大小: 场景：我正在建立一个网站，它不会在自己的服务器中托管图像。相反，它将引用其他服务器的图像。示例：该网站位于www.mywebsite.com，图像的html类似于。来自其他服务器的图像将已经被压缩，因此它们不会很重……尽管它们每个都有大约25KB，500×375像素。目标：我希望在jQuery的帮助下在客户端调整它们的大小。所以他们变成了缩略图。缩略图有两种尺寸：310×140和80×80像素。但是，不仅我想调整它们的大小，我可能希望它们被缩放。因为如果原始图像只有260像素宽，这意味着图像需要缩放然后“裁剪”，因此它将填满整个310像素而不是在两侧留下空白空间。我知道我的要求太高了。但我认为这是一个“常见”的情况，你们许多人可能已经处理过……所以也许有某种插件可以做到这一点。我也知道这意味着用户正在加载比他们需要的“更重”的图像，因为如果他们在加载之前已经有310×140（这是缩略图大小），它们会更轻……但是嘿！项目是以这种方式建造的，这不是我的错。这个调查：除了“缩放”之外，我确实找到了几乎可以达到我想要的东西。您可以点击此处查看： http ： //joanpiedra.com/jquery/thumbs/ 。