그림을 클릭하여 이전 또는 다음으로 이동하는 기능을 구현하는 jQuery 코드 picture_jquery
- WBOY원래의
- 2016-05-16 18:32:351755검색
코드 복사 코드는 다음과 같습니다.
;
<스타일>
글꼴 크기:180%
글꼴 무게:일반
색상:#555; 🎜>텍스트 -장식:없음
색상:#f30;
p{
clear:both
padding:.5em 0; >}
pre{
display:block;
font:100% "Courier New", Courier, monospace
padding:10px
border:1px solid #bae2f0; background:# e3f4f9;
margin:.5em 0;
width:800px
}
/* 툴팁 스타일*/
#tooltip{
위치:절대;
테두리:1px 솔리드 #333; 배경:#f7f5d1
색상:#333; 표시: 없음
}
코드 복사
코드는 다음과 같습니다.
/*
* 툴팁 script
* powered by 淅淅码雨
*
*
*
*/ this.tooltip = function(){ var xOffset = 10;// x의 오프셋 정의var yOffset = 20; //y의 오프셋 정의$("img").mousemove(function(e){ var positionX=e. originalEvent.x -$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//img를 기준으로 현재 마우스의 x 좌표를 가져옵니다var positionY=e .originalEvent.y-$(this).offset().top||e.originalEvent.layerY-$(this).offset().top||0;//y 좌표 가져오기 img에 상대적인 현재 마우스(아래에서 필요하지 않은 경우 삭제할 수 있음)
vartipTitle;//팁 제목 정의if(positionX<=$(this).width()/2)/ /마우스의 현재 상대 x 좌표가 그림 너비의 절반보다 작을 때 실행
{
$('p').remove();//p 태그 제거
$(' a').attr('href','http
//www.google.cn');//링크를 변경하려면 a 태그의 href 속성을 수정하세요.
tipTitle='Google'
}
else
{
$('p').remove( )
$('a').attr('href','http
//www.baidu .com');
tipTitle='Baidu';
}
$ ("body").append("
$(" #tooltip").css("top",(e.pageY - xOffset) "px")//CSS 스타일 설정 ID가 tooltip
인 요소의 경우.css("left",(e.pageX yOffset) " px")
.fadeIn("fast");//애니메이션 효과 추가
},
function(){
$("#tooltip").remove();//마우스 이동 툴팁이 제거되면 툴팁을 제거하여 팁과 마우스의 상대적 위치가 변경되지 않도록 합니다
}) ;
$("img").mouseout(function(e){
$("#tooltip").remove( );//마우스가 img 밖으로 이동할 때 툴팁이 더 이상 표시되지 않습니다. 태그를 제거하려면 제거 기능을 사용하세요
})
$(document).ready(function(){
$ ('img').css('border', '없음');
tooltip()
});
{
$('p').remove();//p 태그 제거
$(' a').attr('href','http
//www.google.cn');//링크를 변경하려면 a 태그의 href 속성을 수정하세요.
tipTitle='Google'
}
else
{
$('p').remove( )
$('a').attr('href','http
//www.baidu .com');
tipTitle='Baidu';
}
$ ("body").append("
"tipTitle "
" );//프롬프트 기능을 구현하려면 body 태그에 이 p 태그를 추가하세요$(" #tooltip").css("top",(e.pageY - xOffset) "px")//CSS 스타일 설정 ID가 tooltip
인 요소의 경우.css("left",(e.pageX yOffset) " px")
.fadeIn("fast");//애니메이션 효과 추가
},
function(){
$("#tooltip").remove();//마우스 이동 툴팁이 제거되면 툴팁을 제거하여 팁과 마우스의 상대적 위치가 변경되지 않도록 합니다
}) ;
$("img").mouseout(function(e){
$("#tooltip").remove( );//마우스가 img 밖으로 이동할 때 툴팁이 더 이상 표시되지 않습니다. 태그를 제거하려면 제거 기능을 사용하세요
})
$(document).ready(function(){
$ ('img').css('border', '없음');
tooltip()
});
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.