여기에 4 개의 상자와 원 (일부 샘플 요소)이 있습니다. 원은 절대 위치이며 트리거로 던지기 상자를 자유롭게 이동할 수 있습니다.
이제 상자에 원을 입력 할 때 뭔가를해야합니다. "mouseenter"대신 "circleenter"와 같은 사용자 지정 이벤트 처리기를 정의 할 수있는 방법이 있는지 궁금합니다.
다음은 JSFiddle입니다.
각 상자를 마우스로 가리키면 원이 해당 상자로 이동하고 색상이 변경됩니다. 전달 된 모든 사각형의 색상도 변경하거나 경로의 사각형에서 다른 작업을 수행한다고 가정합니다.
스크립트:
$(document).ready(function(){
var circle=$(".circle");
$(".box").mouseenter(function(){
var $this=$(this),
idx=$this.index();
width=$this.width();
var animate={left:width*idx+18};
circle.animate(animate,200,function(){
$this.css("background","#888");
});
});
});
CSS :
#box-wrapper{
position:relative;
width:400px;
height:100px;
}
.box{
width:75px;
height:75px;
border:1px solid #000;
background:#ccc;
float:left;
cursor:pointer;
}
.circle{
position:absolute;
width:36px;
height:36px;
border-radius:50%;
background:#fff800;
left:18px;
top:18px;
}
이것은 단지 예일 뿐이므로 질문은 그러한 상황에서 우리는 다음과 같은 것을 가질 수 $(".box").on("circleenter")있습니까?
미리 감사드립니다.
이벤트를 자동으로 실행할 수는 없지만 여기에 설명 된 jQuery 트리거 메서드를 사용하여 사용자 지정 이벤트를 트리거 할 수 있습니다 . 문서의 예 :
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
댓글에서 마우스가 원에 들어 갔는지 여부에 관계없이 원이 사각형을 통과 할 때 이벤트가 발생하기를 원하는 것으로 보입니다. 그렇기 때문에 애니메이션에서 '진행'옵션을 사용하는 것 외에 다른 해결책을 볼 수 없으며 각 단계에서 사각형을 입력했는지 확인합니다. 하지만 성능 문제에주의해야합니다 ...
$(document).ready(function(){
var circle=$(".circle");
$('.box').on('circleenter', function(){
$this.css("background","#888");
});
$(".box").mouseenter(function(){
var $this=$(this),
idx=$this.index();
width=$this.width();
var animate={left:width*idx+18};
var lastBoxId = null;
circle.animate(animate,
{duration: 200,
progress: function(){
//Check whether the circle has entered a box
var currentBox = //Get the current box;
if(currentBox && currentBox.id != lastBoxId){
$(currentBox).trigger('circleenter');
lastBoxId = currentBox.id;
}
}});
});
});
다음은 요소 간의 겹침을 찾는 데 도움이 될 수있는 몇 가지 SO 답변입니다.
그러나 Google 검색은 도움이되지 않는 경우 훨씬 더 많이 나타납니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다