Javascript 单击链接时,图像的右边框消失-CSS,jQuery
实现可以是 当您单击“3个正方形”按钮时,请查看最右侧图像的最右侧边框-它将消失。单击“4个正方形”时也会发生同样的情况 但是,当您返回默认视图(即2个正方形)时,边框将返回。是什么原因造成的?我该如何修复 以下是相关的HTML:Javascript 单击链接时,图像的右边框消失-CSS,jQuery,javascript,jquery,html,css,Javascript,Jquery,Html,Css,实现可以是 当您单击“3个正方形”按钮时,请查看最右侧图像的最右侧边框-它将消失。单击“4个正方形”时也会发生同样的情况 但是,当您返回默认视图(即2个正方形)时,边框将返回。是什么原因造成的?我该如何修复 以下是相关的HTML: <div id="compare_view"> <div id="viewbar" class="compv-navbar"> <a href=""><img src="images/2-up-ico
<div id="compare_view">
<div id="viewbar" class="compv-navbar">
<a href=""><img src="images/2-up-icon-grey.png" alt="2-up-view" data-id="2"></a> |
<a href=""><img src="images/3-up-icon-grey.png" alt="3-up-view" data-id="3"></a> |
<a href=""><img src="images/4-up-icon-grey.png" alt="4-up-view" data-id="4"></a> |
<span id="viewname" class="view_name">2-up</span>
</div>
<div id="slider-code">
<a class="buttons prev" href="#"></a>
<div class="viewport">
<ul class="overview">
<li><img src="images/red-stripe.jpg" /></li>
<li><img src="images/red-stripe-bw.jpg" /></li>
<li><img src="images/red-stripe-red.jpg" /></li>
<li><img src="images/red-stripe-dark.jpg" /></li>
<li><img src="images/red-stripe.jpg" /></li>
<li><img src="images/red-stripe-red.jpg" /></li>
<li><img src="images/red-stripe-dark.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#"></a>
</div>
以下是JS:
//Go Global with our varibles
var oImg, sliderCode, sliderViewPort, win_width;
var oImg_height, oImg_width, oImg_ratio, tImg_width, tImg_height, sliderCode_w, sliderCode_h, ul_width;
var rImg_width, rImg_height, view_new_w, view_new_h, li_w, rUl_width;
function setUp(numImages) {
oImg_height = oImg.height(); //size of original image height
oImg_width = oImg.width(); //size of original image width
oImg_ratio = oImg_height / oImg_width; //aspect ratio of original image
tImg_width = (win_width * 0.915) / num_of_images; // Target image width = (90% of the window) / 2
tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio.
sliderCode_w = $('#slider-code').width();
sliderCode_h = $('#slider-code').height();
var ul_width = $('#slider-code .viewport ul').width();
// console.log("Original Image Height: ", oImg_height, " Original Image Width: ", oImg_width, " Original Image Aspect Ratio: ", oImg_ratio, " Slider Code Width: ", sliderCode_w, " Slider Code Height: ", sliderCode_h, " Window Width: ", win_width, " UL Width: ", ul_width, " Target Image Width: ", tImg_width, " Target Image Height: ", tImg_height);
sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height }); //resizes the images
rImg_width = sliderCode.width(); // size of resized image width
rImg_height = sliderCode.height(); // size of resized image width
$('#slider-code .next').css({ 'top': rImg_height / 2 }); //This needs to be resolved for various size windows
$('#slider-code .prev').css({ 'top': rImg_height / 2 });
$('#slider-code').css({ 'width': '100%', 'height': rImg_height + 10 }); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height
$('#slider-code .viewport').css({ 'width': win_width * 0.94, 'height': rImg_height + 10 });
$('#slider-code .overview li').css({ 'width': rImg_width + 5 });
view_new_w = sliderViewPort.width();
view_new_h = sliderViewPort.height();
li_w = $('#slider-code .overview li').width();
rUl_width = $('#slider-code .viewport ul').width();
// console.log("Viewport New Width: ", view_new_w, view_new_h, " List Item Width: ", li_w, " Resized Image Width: ", rImg_width, " Resized Image Height: ", rImg_height, " Resized UL Width: ", rUl_width);
$('#slider-code').tinycarousel({ controls: true, animation: true, display: 1 });
}
$(window).load(function() {
//Cache Some Common Elements
oImg = $('#slider-code .viewport .overview img:eq(1)');
sliderViewPort = $('#slider-code .viewport');
// --------------------------- Begin Comparison Code --------------------------------------------------------
win_width = $(window).width();
num_of_images = 2; //The number of images expected in view (2 for 2-up, 3 for 3-up, etc.) The default value is 2.
$("#viewbar img").click(function(e) {
num_of_images = parseInt($(this).attr("data-id"), 10); // This accepts the integer associated with the navbar.
$('#viewname').text(num_of_images + '-up');
setUp(num_of_images);
e.preventDefault();
});
//Default set up
setUp(num_of_images);
// --------------- End Comparison Code --------------------------------------------------------------------------
})
您的
宽664px
,图像宽约659px
。图像周围有一个4px
边框,因此实际需要的总宽度为659+4+4=667
,这使得的3px
变窄,这就是边框右侧被截断的原因。乍看起来,视口div的宽度似乎不足以显示边框
作为一个丑陋的黑客,在javascript中更改以下行:
sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height }); //resizes the images
到
我希望这会有帮助。这不太合适。当我这样做时,它会破坏2版本视图上的边框。还有其他的想法吗?我正在调整它,看看我是否能找到你想做什么,但如果你有一个建议,它将不胜感激。
sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height }); //resizes the images
sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width + 6, 'height': tImg_height }); //resizes the images