2

divに適用できる関数を作成しようとしています。その関数を、垂直方向と水平方向の両方で、その親の中央に配置します。

センタリング機能を汎用化しようとしているので、センタリングコードを書き直し続ける必要はありません。

JQUERYを使用して、センタリングを最も簡単にするために何をしますか。

$('p').hoverIntent(function () {
    var myObject = $('#bThis')
    var Ctop = $(this).offset().top + ($(this).height() / 2) - (myObject.outerHeight() / 2)     
    var Cleft = $(this).offset().left + ($(this).width() / 2) - (myObject.outerWidth() / 2)     

    if ($('#placeB').hasClass('place')) {    
        $(this).animate({color: "#999999", backgroundColor: "#f5f5f5"}, 400)
        $('#bThis').css({'left':Cleft, 'top':Ctop}).fadeIn(200)
    }

}, function() {
        $(this).stop().animate({color: "#333", backgroundColor: "#fff"}, 200)
        $('#bThis').fadeOut(200)
});
4

1 に答える 1

2

編集：

こちらの実例をご覧ください。

<div id="container">
    <div id="element">
        &nbsp;
    </div>
</div>

 <style>
  #container{
    height:100px;
    width:100px;
    border:1px solid #000;
    background:#EEE;
    position:relative;
  }
  #element{
    height:50px;
    width:50px;
    border:1px solid #000;
    background:#333;
    position:relative;
  }
<style>

<script>
  function centerDiv(element, xPosFromCenter, yPosFromCenter){

    var xPos = parseInt(element.parent().css('width'))/2 -parseInt(element.css('width'))/2 - xPosFromCenter;

    var yPos = parseInt(element.parent().css('height'))/2 -parseInt(element.css('height'))/2 - yPosFromCenter;


    element.css({top: yPos, left:xPos});
  }

  $().ready(function(){
    centerDiv($('#element'), 0, 0);        
  });
<script>

編集の終わり

さて、「センタリング」の仕事をそれ自身の機能に委任することはトリックをしませんか？

function centerDiv(element, parent){
  var Ctop = $(element).offset().top + ($(element).height() / 2) - (parent.outerHeight() / 2)
  var Cleft = $(element).offset().left + ($(element).width() / 2) - (parent.outerWidth() / 2) 

return {ctop: Ctop, cleft:Cleft};
}

呼び出し元の関数で。

.
.
.
var obj = centerDiv($(this), $('#bThis'));
$('#bThis').css({'left':obj.cleft, 'top':obj.ctop}).fadeIn(200);
.
.
.
于 2011-01-25T06:13:07.567 に答える