[英]How do I adjust width and height in iframe via css or javascript?
[英]how do i adjust this javascript to work and be responsive?
我希望图像的宽度为100%
,而不是特定的px数字,但是如果没有特定的尺寸,它就会破裂。
这是一种调整JavaScript的方法,以便我可以使此工作迅速做出响应吗?
使用Javascript
$(document).ready(function(){
var $after = $('.after'),
img_width = $('.after img').width(),
init_split = Math.round(img_width/2);
$after.width(init_split);
$('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $after.offset().left);
$after.width(offX);
});
$('.before_after_slider').mouseleave(function(e){
$after.stop().animate({
width: init_split
},1000)
});
});
HTML
<div class="before_after_slider">
<div class="before">
<img src="center_before.jpg" width="auto" height="600px" alt="before" />
</div>
<div class="after">
<img src="center_after.jpg" width="100%" height="600px" alt="after" />
</div>
</div>
您是否考虑过使用CSS执行此操作?
.before {
background: url(center_before.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
我能够使该脚本响应如下:
$(document).ready(function() {
var $parent = $('.before_after_slider');
var $after = $('.before_after_slider .after');
var $image = $('.before_after_slider .after img');
var img_width = $('.before_after_slider .after img').width();
var img_height = $('.before_after_slider .after img').height();
var init_split = Math.round(img_width/2);
// Calculate responsive width correctly (after image is loaded).
$('.before_after_slider .after img').load(function(){
var img_height = $(this).height();
img_width = $(this).width();
img_height = $(this).height();
init_split = Math.round(img_width/2);
});
// Set the height of the parent to prevent collapse.
$parent.height(img_height);
// Set the image height and width to 100% (now fixed).
$image.height(img_height);
$image.width(img_width);
// Set the container height to 100% but the width to 50%.
$after.height(img_height);
$after.width(init_split);
// Adjust container width based on mouse movement.
$('.before_after_slider').mousemove(function(e) {
var offX = (e.offsetX || e.clientX - $after.offset().left);
$after.width(offX);
});
// Reset container to 50% when mouse leaves area.
$('.before_after_slider').mouseleave(function(e) {
$after.stop().animate({
width: init_split
},1000)
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.