在jQuery中调整大小
[英]Resizing in jQuery
问题描述
我在jQuery（一个向左和向右移动的红色框）中执行任务，并且遇到一个问题，即调整框大小时应继续使用旧宽度。
这是我的代码：
var stp = 100; $(document).ready(function() { move(); }); function move() { $("div").animate({ left: "+=" + stp + "px" }, { step: function() { var windowSize = window.innerWidth; if ($("div").offset().left >= windowSize - 160) { stp = -100; $("div").parent().css({ position: 'relative' }); $("div").css({ position: 'absolute', left: windowSize - 100 }); } if ($("div").offset().left <= 40) stp = 100; }, easing: 'linear', duration: 1000, complete: move }); }
div { width: 100px; height: 100px; position: absolute; background-color: red; }
<!Doctype html> <html> <head> <link rel="stylesheet" href="rectStyle.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="motionJQuery.js"> </script> </head> <body> <div id="rect"> </div> </body> </html>
如何在调整大小时使框从左到右显示？
2 个解决方案
解决方案1
0 2018-07-07 10:56:05
您可以使用.width()获取红色框的宽度。
例如，如果条件来自：
if ($("div").offset().left >= windowSize - 160)
至：
if ($("div").offset().left >= windowSize - ($("div").width() + 60))
解决方案2
0 2018-07-07 11:48:52
您是要交互式地使用调整后的容器来适应当前运动？
$(document).ready(function() { move(1); }); function move( direction ) { var own_width = $('#rect').width(); $({x:0}).animate({x:1}, { step: function(percent) { let parent_width = $('#rect').parent().width(); let progress_in_px; if( direction == 1 ) { progress_in_px = (parent_width -own_width) *percent; } else { progress_in_px = (parent_width -own_width) *(1-percent); } $('#rect').css('left', progress_in_px); }, easing: 'linear', duration: 1000, complete: function() { move(direction*(-1)) } }); }
div#rect { width: 100px; height: 100px; position: absolute; background-color: red; } div.container { overflow: hidden; resize: both; border: 1px dashed black; padding: 0px; height: 150px; position: relative; }
<!Doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="container"> <div id="rect"></div> </div> <div style="text-align: right;"> <b>Resize me</b> </div> </body> </html>
jQuery对话框大小调整问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.