정말 초보입니다...입사 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년 전
아 감사합니다 ㅠㅠ 정말 감사해요~~ 감사합니다, 감사합니다, 감사합니다 ^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6730 |
 Terrorboy |
11년 전 | 1118 | |
| 6729 | 11년 전 | 571 | ||
| 6728 |
Terrorboy |
11년 전 | 587 | |
| 6727 | 11년 전 | 2433 | ||
| 6726 | 11년 전 | 608 | ||
| 6725 |
네모웹에이전시
|
11년 전 | 449 | |
| 6724 |
네모웹에이전시
|
11년 전 | 895 | |
| 6723 | 11년 전 | 1031 | ||
| 6722 | 11년 전 | 976 | ||
| 6721 | 11년 전 | 660 | ||
| 6720 | 11년 전 | 1982 | ||
| 6719 | 11년 전 | 2204 | ||
| 6718 | 11년 전 | 1115 | ||
| 6717 |
 홈피공장장 |
11년 전 | 668 | |
| 6716 | 11년 전 | 2314 | ||
| 6715 | 11년 전 | 7584 | ||
| 6714 | 11년 전 | 2053 | ||
| 6713 | 11년 전 | 790 | ||
| 6712 |
geektoo
|
11년 전 | 1162 | |
| 6711 | 11년 전 | 908 | ||
| 6710 |
sirzzang
|
11년 전 | 2137 | |
| 6709 |
bewitched
|
11년 전 | 1807 | |
| 6708 |
levin
|
11년 전 | 578 | |
| 6707 | 11년 전 | 772 | ||
| 6706 | 11년 전 | 1802 | ||
| 6705 | 11년 전 | 994 | ||
| 6704 |
Terrorboy |
11년 전 | 764 | |
| 6703 | 11년 전 | 423 | ||
| 6702 | 11년 전 | 1108 | ||
| 6701 | 11년 전 | 813 | ||
| 6700 | 11년 전 | 1728 | ||
| 6699 | 12년 전 | 726 | ||
| 6698 |
이박사친구
|
12년 전 | 737 | |
| 6697 | 12년 전 | 1223 | ||
| 6696 | 12년 전 | 625 | ||
| 6695 |
Header
|
12년 전 | 713 | |
| 6694 | 12년 전 | 1171 | ||
| 6693 |
Terrorboy |
12년 전 | 1121 | |
| 6692 | 12년 전 | 1155 | ||
| 6691 | 12년 전 | 1293 | ||
| 6690 |
Terrorboy |
12년 전 | 722 | |
| 6689 | 12년 전 | 904 | ||
| 6688 | 12년 전 | 943 | ||
| 6687 | 12년 전 | 543 | ||
| 6686 |
RGB255
|
12년 전 | 968 | |
| 6685 |
Terrorboy |
12년 전 | 647 | |
| 6684 | 12년 전 | 725 | ||
| 6683 | 12년 전 | 391 | ||
| 6682 | 12년 전 | 1137 | ||
| 6681 | 12년 전 | 1429 | ||
| 6680 | 12년 전 | 460 | ||
| 6679 |
RGB255
|
12년 전 | 401 | |
| 6678 | 12년 전 | 1359 | ||
| 6677 |
Terrorboy |
12년 전 | 450 | |
| 6676 | 12년 전 | 1022 | ||
| 6675 |
디자이너필이
|
12년 전 | 830 | |
| 6674 | 12년 전 | 1248 | ||
| 6673 | 12년 전 | 1318 | ||
| 6672 | 12년 전 | 6035 | ||
| 6671 | 12년 전 | 1345 | ||
| 6670 |
하프의정령
|
12년 전 | 577 | |
| 6669 | 12년 전 | 421 | ||
| 6668 |
공부하고가겠슴다
|
12년 전 | 467 | |
| 6667 |
하프의정령
|
12년 전 | 555 | |
| 6666 | 12년 전 | 794 | ||
| 6665 | 12년 전 | 1421 | ||
| 6664 | 12년 전 | 938 | ||
| 6663 | 12년 전 | 1166 | ||
| 6662 | 12년 전 | 424 | ||
| 6661 |
basketball
|
12년 전 | 519 | |
| 6660 | 12년 전 | 2522 | ||
| 6659 | 12년 전 | 1623 | ||
| 6658 |
Terrorboy |
12년 전 | 1342 | |
| 6657 |
Terrorboy |
12년 전 | 3168 | |
| 6656 | 12년 전 | 574 | ||
| 6655 |
프로프리랜서
|
12년 전 | 2341 | |
| 6654 |
프로프리랜서
|
12년 전 | 1917 | |
| 6653 |
프로프리랜서
|
12년 전 | 1752 | |
| 6652 |
프로프리랜서
|
12년 전 | 1837 | |
| 6651 |
 FM2fmedia |
12년 전 | 788 | |
| 6650 | 12년 전 | 1323 | ||
| 6649 | 12년 전 | 1325 | ||
| 6648 | 12년 전 | 823 | ||
| 6647 | 12년 전 | 3170 | ||
| 6646 | 12년 전 | 479 | ||
| 6645 | 12년 전 | 975 | ||
| 6644 |
BBAYOUNG
|
12년 전 | 1400 | |
| 6643 | 12년 전 | 1809 | ||
| 6642 | 12년 전 | 657 | ||
| 6641 | 12년 전 | 1344 | ||
| 6640 | 12년 전 | 719 | ||
| 6639 | 12년 전 | 2327 | ||
| 6638 |
jasmin2
|
12년 전 | 764 | |
| 6637 |
geektoo
|
12년 전 | 457 | |
| 6636 | 12년 전 | 676 | ||
| 6635 |
프로프리랜서
|
12년 전 | 2241 | |
| 6634 |
프로프리랜서
|
12년 전 | 1746 | |
| 6633 |
프로프리랜서
|
12년 전 | 4063 | |
| 6632 |
프로프리랜서
|
12년 전 | 1352 | |
| 6631 |
프로프리랜서
|
12년 전 | 1793 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기