정말 초보입니다...입사 2개월차인데, 사수가 없어.. 항상 멘붕상태입니다 ㅠㅠ 부디 자비를 베푸시어 불쌍한 중생을 살려주세요 ㅠㅠ
위사이트 보시면 롤링으로 이미지들이 슬라이드 되어 있는데요
이미지 밑에 화살표 <- -> 있자나요 이 화살표를 mousedown 하거나 hover 되면 속도가 빨리 되게(이미지가 빨리 지나가게 휙~휙~ ) 구현하고 싶습니다ㅜㅜ
마우스를 떼면 다시 이전 속도로 돌아오고요...
자바스크립트.. 체계적으로 공부할만한 사이트나 정보도 공유 부탁드려요 ㅠㅠ
#backgroundPopup{
display:none;
position:absolute;
height:1050px;
width:620px;
top:300;
left:500;
border:0px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:absolute;
height:200px;
width:300px;
border:0px solid #cecece;
z-index:2;
padding:50px,0px,0px,180px;
}
display:none;
position:absolute;
height:1050px;
width:620px;
top:300;
left:500;
border:0px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:absolute;
height:200px;
width:300px;
border:0px solid #cecece;
z-index:2;
padding:50px,0px,0px,180px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
left:470px;
top:54px;
position:absolute;
color:white;
display:block;
}
#popup1{
}
</style>
font-size:14px;
line-height:14px;
left:470px;
top:54px;
position:absolute;
color:white;
display:block;
}
#popup1{
}
</style>
<!-- 제이쿼리 화면이동 헤더 시작 -->
<script>
$(function() {
var rollingDiv = $("#rollingHead1");
rollingDiv.rolling("right", 280, 250, 4); // 이동방향 , 테이블width , 테이블 height , 보여질 이미지 갯수
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_TF3gcVNj_metro.jpg' width='233' height='214' alt='' id='popup1' border='0' /></a></td></tr></table></div>"); //열었으면 닫아야지
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_fcep15n9_ubline.jpg' width='233' height='214' alt='' id='popup2' border='0'/></a></td></tr></table></div>");
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_cP9zTOya_evernet.jpg' width='233' height='214' alt='' id='popup3' border='0'/></a></td></tr></table></div>");
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_4RiH3uDb_selah.jpg' width='233' height='214' alt='' id='popup4' border='0'/></a></td></tr></table></div>");
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_SMjIqowu_biz.jpg' width='233' height='214' alt='' id ='popup5' border='0'/></a></td></tr></table></div>");
<script>
$(function() {
var rollingDiv = $("#rollingHead1");
rollingDiv.rolling("right", 280, 250, 4); // 이동방향 , 테이블width , 테이블 height , 보여질 이미지 갯수
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_TF3gcVNj_metro.jpg' width='233' height='214' alt='' id='popup1' border='0' /></a></td></tr></table></div>"); //열었으면 닫아야지
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_fcep15n9_ubline.jpg' width='233' height='214' alt='' id='popup2' border='0'/></a></td></tr></table></div>");
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_cP9zTOya_evernet.jpg' width='233' height='214' alt='' id='popup3' border='0'/></a></td></tr></table></div>");
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_4RiH3uDb_selah.jpg' width='233' height='214' alt='' id='popup4' border='0'/></a></td></tr></table></div>");
rollingDiv.addRollingItem("<div><table width='233' height='240' cellspacing='0' cellpadding='0'><tr><td align='center' valign='top'><img src='/data/file/portpolio/3076664668_SMjIqowu_biz.jpg' width='233' height='214' alt='' id ='popup5' border='0'/></a></td></tr></table></div>");
rollingDiv.bind("mouseover", function() {
rollingDiv.stopRolling();
});
rollingDiv.bind("mouseout", function() {
rollingDiv.resumeRolling();
});
rollingDiv.stopRolling();
});
rollingDiv.bind("mouseout", function() {
rollingDiv.resumeRolling();
});
var leftArrowDiv = $("#rollingHead2");
leftArrowDiv.css("opacity", 0.5);
leftArrowDiv.hover(function() {
leftArrowDiv.animate({
opacity: 0.9
}, 10);
if (rollingDiv.getRollingDirection() == "left") {
rollingDiv.reverseRolling();
}
rollingDiv.resumeRolling();
}, function() {
leftArrowDiv.animate({
opacity: 0.5
}, 10);
});
var rightArrowDiv = $("#rollingHead3");
rightArrowDiv.css("opacity", 0.5);
rightArrowDiv.hover(function() {
rightArrowDiv.animate({
opacity: 0.9
}, 10);
leftArrowDiv.css("opacity", 0.5);
leftArrowDiv.hover(function() {
leftArrowDiv.animate({
opacity: 0.9
}, 10);
if (rollingDiv.getRollingDirection() == "left") {
rollingDiv.reverseRolling();
}
rollingDiv.resumeRolling();
}, function() {
leftArrowDiv.animate({
opacity: 0.5
}, 10);
});
var rightArrowDiv = $("#rollingHead3");
rightArrowDiv.css("opacity", 0.5);
rightArrowDiv.hover(function() {
rightArrowDiv.animate({
opacity: 0.9
}, 10);
if (rollingDiv.getRollingDirection() == "right") {
rollingDiv.reverseRolling();
}
rollingDiv.resumeRolling();
}, function() {
rightArrowDiv.animate({
opacity: 0.5
}, 10);
});
rollingDiv.reverseRolling();
}
rollingDiv.resumeRolling();
}, function() {
rightArrowDiv.animate({
opacity: 0.5
}, 10);
});
rollingDiv.startRolling(30, 0, 100);
setTimeout('normal()', 1000); });
setTimeout('normal()', 1000); });
function normal() {
var rollingDiv = $("#rollingHead1");
var rollingAnimationFrame = rollingDiv.getRollingAnimationFrame();
if (rollingAnimationFrame != 100) {
rollingAnimationFrame += 20;
if (rollingAnimationFrame > 100) {
rollingAnimationFrame = 100;
}
rollingDiv.setRollingAnimationFrame(rollingAnimationFrame);
}
setTimeout('normal()', 1000);
}
</script>
<script>
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//centering
$("#popupContact").css({
"position": "absolute",
"top":300,
"left":200
});
}
function centerPopup(){
//centering
$("#popupContact").css({
"position": "absolute",
"top":300,
"left":200
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#popup1").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 메트로
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><img src='/data/file/portpolio/3076664668_MfrZxWtV_B8B6BBEAB8DEC6AEB7CEBDC3C6BC.jpg' id='reset' width=567 height=732></td></tr></table>";
});
$("#popup2").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 유비라인
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><img src='/data/file/portpolio/3076664668_T9E8NeJR_C0AFBAF1B6F3C0CE.jpg' id='reset' width=567 height=672></td></tr></table>";
});
$("#popup3").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 에버넷
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><br /><img src='/data/file/portpolio/3076664668_NvGZUuDR_BFA1B9F6B3DD.jpg' id='reset' width=567 height=1000></td></tr></table>";
});
$("#popup4").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 세라
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><img src='/data/file/portpolio/3076664668_2NafGbPg_C2F9BEE7B3AAB6F3.jpg' id='reset' width=567 height=727></td></tr></table>";
});
$("#popup5").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 비즈앤 몰드
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><br /><img src='/data/file/portpolio/3076664668_D3kcKZxQ_BAF1C1EEBFA3B8F4B5E5BAEAB7CEB8B6C0CCB5E52.jpg' id='reset' width=567 height=871></td></tr></table>";
});
//LOADING POPUP
//Click the button event!
$("#popup1").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 메트로
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><img src='/data/file/portpolio/3076664668_MfrZxWtV_B8B6BBEAB8DEC6AEB7CEBDC3C6BC.jpg' id='reset' width=567 height=732></td></tr></table>";
});
$("#popup2").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 유비라인
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><img src='/data/file/portpolio/3076664668_T9E8NeJR_C0AFBAF1B6F3C0CE.jpg' id='reset' width=567 height=672></td></tr></table>";
});
$("#popup3").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 에버넷
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><br /><img src='/data/file/portpolio/3076664668_NvGZUuDR_BFA1B9F6B3DD.jpg' id='reset' width=567 height=1000></td></tr></table>";
});
$("#popup4").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 세라
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><img src='/data/file/portpolio/3076664668_2NafGbPg_C2F9BEE7B3AAB6F3.jpg' id='reset' width=567 height=727></td></tr></table>";
});
$("#popup5").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup(); // 비즈앤 몰드
document.getElementById("popupContact").innerHTML = "<table border=0><tr><td id='resetting'><br /><img src='/data/file/portpolio/3076664668_D3kcKZxQ_BAF1C1EEBFA3B8F4B5E5BAEAB7CEB8B6C0CCB5E52.jpg' id='reset' width=567 height=871></td></tr></table>";
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
</script>
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
</script>
<!-- 제이쿼리 화면이동 헤더 끝 -->
<div id="popupContact"></div>
<div id="backgroundPopup"><a id="popupContactClose"><b>x</b></a></div>
<div id="popupContact2"></div>
<div id="backgroundPopup2"><a id="popupContactClose2"><b>x</b></a></div>
<body>
<table width="1200" border="0">
<tr>
<td height="80"> </td>
</tr>
<tr>
<td>
<center>
<div id="rollingHead1"></div>
<p>
</center>
</td>
</tr>
<tr>
<td height="1"> </td>
</tr>
<tr>
<td>
<table border=0 align="center">
<td id="rollingHead2"><img src="/images/left.jpg"></td><td width=30> </td><td id="rollingHead3"><img src="/images/right.jpg"></td>
</table>
</td>
</tr>
</table>
<tr>
<td height="80"> </td>
</tr>
<tr>
<td>
<center>
<div id="rollingHead1"></div>
<p>
</center>
</td>
</tr>
<tr>
<td height="1"> </td>
</tr>
<tr>
<td>
<table border=0 align="center">
<td id="rollingHead2"><img src="/images/left.jpg"></td><td width=30> </td><td id="rollingHead3"><img src="/images/right.jpg"></td>
</table>
</td>
</tr>
</table>
댓글 2개
onlymilk74
13년 전
jquery rolling 쓰시나 보죠?
기존에 이동할 속도 변수를 하나 지정하시고
rollingDiv.setRollingAnimationFrame(rollingAnimationFrame);
화살표에 마우스 오버시 rollingAnimationFrame 값을 줄여주시고
아웃시 이전값을 넣으시면 됩니다
기존에 이동할 속도 변수를 하나 지정하시고
rollingDiv.setRollingAnimationFrame(rollingAnimationFrame);
화살표에 마우스 오버시 rollingAnimationFrame 값을 줄여주시고
아웃시 이전값을 넣으시면 됩니다
13년 전
아 감사합니다 ㅠㅠ 정말 감사해요~~ 감사합니다, 감사합니다, 감사합니다 ^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7830 | 10년 전 | 458 | ||
| 7829 |
 gilynh |
10년 전 | 641 | |
| 7828 | 10년 전 | 568 | ||
| 7827 | 10년 전 | 468 | ||
| 7826 | 10년 전 | 494 | ||
| 7825 | 10년 전 | 519 | ||
| 7824 | 10년 전 | 484 | ||
| 7823 | 10년 전 | 426 | ||
| 7822 | 10년 전 | 400 | ||
| 7821 | 10년 전 | 346 | ||
| 7820 | 10년 전 | 368 | ||
| 7819 |
 ABC디자인 |
10년 전 | 766 | |
| 7818 | 10년 전 | 423 | ||
| 7817 | 10년 전 | 603 | ||
| 7816 | 10년 전 | 439 | ||
| 7815 | 10년 전 | 636 | ||
| 7814 | 10년 전 | 476 | ||
| 7813 | 10년 전 | 433 | ||
| 7812 | 10년 전 | 440 | ||
| 7811 | 10년 전 | 418 | ||
| 7810 | 10년 전 | 615 | ||
| 7809 | 10년 전 | 550 | ||
| 7808 | 10년 전 | 429 | ||
| 7807 | 10년 전 | 441 | ||
| 7806 |
프로그래머7
|
10년 전 | 1363 | |
| 7805 | 10년 전 | 1304 | ||
| 7804 |
zahir1312
|
10년 전 | 802 | |
| 7803 |
ABC디자인 |
10년 전 | 1403 | |
| 7802 | 10년 전 | 505 | ||
| 7801 | 10년 전 | 883 | ||
| 7800 | 10년 전 | 1109 | ||
| 7799 | 10년 전 | 591 | ||
| 7798 | 10년 전 | 540 | ||
| 7797 | 10년 전 | 560 | ||
| 7796 | 10년 전 | 395 | ||
| 7795 | 10년 전 | 547 | ||
| 7794 | 10년 전 | 587 | ||
| 7793 | 10년 전 | 1088 | ||
| 7792 | 10년 전 | 510 | ||
| 7791 | 10년 전 | 603 | ||
| 7790 | 10년 전 | 530 | ||
| 7789 |
fbastore
|
10년 전 | 1481 | |
| 7788 | 10년 전 | 585 | ||
| 7787 | 10년 전 | 444 | ||
| 7786 | 10년 전 | 653 | ||
| 7785 | 10년 전 | 624 | ||
| 7784 | 10년 전 | 685 | ||
| 7783 | 10년 전 | 506 | ||
| 7782 | 10년 전 | 530 | ||
| 7781 | 10년 전 | 936 | ||
| 7780 | 10년 전 | 846 | ||
| 7779 | 10년 전 | 799 | ||
| 7778 | 10년 전 | 390 | ||
| 7777 | 10년 전 | 501 | ||
| 7776 | 10년 전 | 496 | ||
| 7775 | 10년 전 | 435 | ||
| 7774 | 10년 전 | 647 | ||
| 7773 | 10년 전 | 401 | ||
| 7772 | 10년 전 | 773 | ||
| 7771 | 10년 전 | 430 | ||
| 7770 | 10년 전 | 672 | ||
| 7769 | 10년 전 | 434 | ||
| 7768 | 10년 전 | 652 | ||
| 7767 | 10년 전 | 1206 | ||
| 7766 | 10년 전 | 534 | ||
| 7765 | 10년 전 | 591 | ||
| 7764 |
잘살아보자
|
10년 전 | 450 | |
| 7763 |
 foxrain |
10년 전 | 1500 | |
| 7762 |
Tosea
|
10년 전 | 1087 | |
| 7761 | 10년 전 | 689 | ||
| 7760 |
잘살아보자
|
10년 전 | 759 | |
| 7759 |
잘살아보자
|
10년 전 | 598 | |
| 7758 |
잘살아보자
|
10년 전 | 656 | |
| 7757 | 10년 전 | 1279 | ||
| 7756 |
ITBANK
|
10년 전 | 1289 | |
| 7755 | 10년 전 | 1944 | ||
| 7754 | 10년 전 | 1102 | ||
| 7753 | 10년 전 | 921 | ||
| 7752 | 10년 전 | 1421 | ||
| 7751 |
잘살아보자
|
10년 전 | 579 | |
| 7750 |
잘살아보자
|
10년 전 | 506 | |
| 7749 |
잘살아보자
|
10년 전 | 529 | |
| 7748 |
잘살아보자
|
10년 전 | 558 | |
| 7747 |
잘살아보자
|
10년 전 | 635 | |
| 7746 |
잘살아보자
|
10년 전 | 697 | |
| 7745 |
잘살아보자
|
10년 전 | 946 | |
| 7744 |
잘살아보자
|
10년 전 | 440 | |
| 7743 | 10년 전 | 967 | ||
| 7742 |
starbros
|
10년 전 | 864 | |
| 7741 |
잘살아보자
|
10년 전 | 705 | |
| 7740 |
잘살아보자
|
10년 전 | 592 | |
| 7739 |
잘살아보자
|
10년 전 | 487 | |
| 7738 |
잘살아보자
|
10년 전 | 561 | |
| 7737 |
잘살아보자
|
10년 전 | 541 | |
| 7736 |
잘살아보자
|
10년 전 | 561 | |
| 7735 |
잘살아보자
|
10년 전 | 895 | |
| 7734 |
잘살아보자
|
10년 전 | 454 | |
| 7733 |
잘살아보자
|
10년 전 | 564 | |
| 7732 |
잘살아보자
|
10년 전 | 730 | |
| 7731 |
잘살아보자
|
10년 전 | 653 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기