Question

触发onclick事件时，如何根据按钮的位置对齐图像？

示例：假设有2个ID为btnA和btnB的按钮。单击btnA时，图像应与btnA的中心对齐。如果单击btnB，图像应移动并对齐到btnB的中心。

<img id = "markerz" src="img/marker.png"/>
<a class="cBtn" id= "btnA" onclick="markerPos(btnA);">Button1</a>
<a class="cBtn" id= "btnB" onclick="markerPos(btnA);">Button2</a>

    <script>
    function markerPos(BUTTONinUSE){
       document.getElementById(markerz).style.align = (document.getElementById(BUTTONinUSE)="center");
    }
    </script>

Answer 1

一开始的图像在哪里？中心？然后你想点击它，所以转到一个按钮或另一个按钮？您可以使用该按钮来应用/删除css。

HTML：

<div id="iMove" class="center">
<img  src="http://icons.iconarchive.com/icons/zakar/shining-z/128/ballon-SZ-icon.png"        />
 </div>
<div class="ui-grid-b">
<div class="ui-block-a"><a data-role="button" id="btnA">Click</a></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"><a data-role="button" id="btnB">Click</a></div>
</div>

CSS

.center {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.right {
display: block;
text-align: right;
margin-left: auto;
margin-right: auto;
}
.left {
display: block;
text-align: left;
margin-left: auto;
margin-right: auto;
}

jquery的

$("#btnB").on("click", function(){
$("#iMove").removeClass();
$("#iMove").addClass('right');

});

$("#btnA").on("click", function(){
$("#iMove").removeClass();
$("#iMove").addClass('left');
});

请参阅jFiddle here

Answer 2

获取按钮的位置和大小，图像的位置和大小以及更改图像的位置。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Untitled</title>
    </head>
    <style>
        img {
            position:relative;
        }
        .clear {
            clear:both;
        }
        a {
            padding:20px;
        }
    </style>
    <body>
        <img id = "markerz" src="marker.png"></img>
        <a class="cBtn" id= "btnA" onclick="markerPos(this);">Button1</a>
        <a class="cBtn" id= "btnB" onclick="markerPos(this);">Button2</a>
        <script>
            'use strict';
            var marker = document.getElementById('markerz'),
                markerWidth = marker.offsetWidth,
                markerLeft  = marker.offsetLeft,
                markerPos = function (target) {
                    var left = target.offsetLeft,
                        selfWidth = target.offsetWidth,
                        centerWidth = left + selfWidth/2,
                        horDiff = markerLeft + markerWidth/2 - centerWidth;
                    marker.style.left = (markerLeft - horDiff) + 'px';
                };
        </script>
    </body>
</html>

Answer 3

愿这会帮到你

var btnWidth = $(".cBtn").outerWidth(); // Use Outer Width to get all button width include padding


$(".cBtn").click(function(){

var tid = $(this).attr('id');

var btnPos = $("#"+tid).offset().left; // Get the X pos of button

var btnCenterX = btnPos + (btnWidth / 2); // Get the X center pos of button , ( x = offsetXbtn + (btnwidth / 2 )  )

var imgXcenter = $("#markerz").width() / 2; // Get center X pos for image


$("#markerz").css({left : btnCenterX + "px"}) // Image X pos will align to the center of button


//$("#markerz").css({left : (btnCenterX - imgXcenter) + "px"}) Enable this to get image center align with button

})

对不起，如果我的英语不好：）

注意：我使用了jQuery

DEMO

根据按钮操作对齐

3 个答案: