정말 초보입니다...입사 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년 전
아 감사합니다 ㅠㅠ 정말 감사해요~~ 감사합니다, 감사합니다, 감사합니다 ^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 8030 | 9년 전 | 336 | ||
| 8029 | 9년 전 | 278 | ||
| 8028 | 9년 전 | 246 | ||
| 8027 | 9년 전 | 260 | ||
| 8026 | 9년 전 | 299 | ||
| 8025 | 9년 전 | 359 | ||
| 8024 | 9년 전 | 323 | ||
| 8023 | 9년 전 | 377 | ||
| 8022 | 9년 전 | 303 | ||
| 8021 | 9년 전 | 301 | ||
| 8020 | 9년 전 | 297 | ||
| 8019 | 9년 전 | 326 | ||
| 8018 | 9년 전 | 422 | ||
| 8017 | 9년 전 | 522 | ||
| 8016 | 9년 전 | 311 | ||
| 8015 | 9년 전 | 374 | ||
| 8014 | 9년 전 | 310 | ||
| 8013 | 9년 전 | 218 | ||
| 8012 | 9년 전 | 235 | ||
| 8011 | 9년 전 | 433 | ||
| 8010 | 9년 전 | 286 | ||
| 8009 | 9년 전 | 272 | ||
| 8008 | 9년 전 | 274 | ||
| 8007 | 9년 전 | 413 | ||
| 8006 | 9년 전 | 448 | ||
| 8005 |
 카카오툴즈 |
9년 전 | 950 | |
| 8004 | 9년 전 | 331 | ||
| 8003 | 9년 전 | 397 | ||
| 8002 | 9년 전 | 307 | ||
| 8001 |
 Terrorboy |
9년 전 | 650 | |
| 8000 | 9년 전 | 397 | ||
| 7999 | 9년 전 | 359 | ||
| 7998 | 9년 전 | 410 | ||
| 7997 | 9년 전 | 295 | ||
| 7996 | 9년 전 | 526 | ||
| 7995 | 9년 전 | 427 | ||
| 7994 | 9년 전 | 268 | ||
| 7993 | 9년 전 | 352 | ||
| 7992 | 9년 전 | 491 | ||
| 7991 | 9년 전 | 229 | ||
| 7990 | 9년 전 | 253 | ||
| 7989 | 9년 전 | 285 | ||
| 7988 | 9년 전 | 709 | ||
| 7987 | 9년 전 | 400 | ||
| 7986 | 9년 전 | 397 | ||
| 7985 | 9년 전 | 483 | ||
| 7984 | 9년 전 | 416 | ||
| 7983 | 9년 전 | 636 | ||
| 7982 | 9년 전 | 498 | ||
| 7981 | 9년 전 | 445 | ||
| 7980 | 9년 전 | 470 | ||
| 7979 | 9년 전 | 442 | ||
| 7978 | 9년 전 | 422 | ||
| 7977 | 9년 전 | 355 | ||
| 7976 | 9년 전 | 826 | ||
| 7975 | 9년 전 | 348 | ||
| 7974 | 9년 전 | 375 | ||
| 7973 | 9년 전 | 579 | ||
| 7972 | 9년 전 | 367 | ||
| 7971 | 9년 전 | 432 | ||
| 7970 | 9년 전 | 281 | ||
| 7969 | 9년 전 | 527 | ||
| 7968 | 9년 전 | 366 | ||
| 7967 | 9년 전 | 347 | ||
| 7966 | 9년 전 | 344 | ||
| 7965 |
 나는웹디다 |
9년 전 | 999 | |
| 7964 | 9년 전 | 386 | ||
| 7963 | 9년 전 | 372 | ||
| 7962 | 9년 전 | 352 | ||
| 7961 |
전갈자리남자
|
9년 전 | 494 | |
| 7960 | 9년 전 | 944 | ||
| 7959 | 9년 전 | 536 | ||
| 7958 | 9년 전 | 391 | ||
| 7957 | 9년 전 | 350 | ||
| 7956 | 9년 전 | 361 | ||
| 7955 | 9년 전 | 420 | ||
| 7954 | 9년 전 | 347 | ||
| 7953 | 9년 전 | 407 | ||
| 7952 | 9년 전 | 328 | ||
| 7951 | 9년 전 | 471 | ||
| 7950 | 9년 전 | 366 | ||
| 7949 | 9년 전 | 372 | ||
| 7948 | 9년 전 | 312 | ||
| 7947 | 9년 전 | 913 | ||
| 7946 | 9년 전 | 402 | ||
| 7945 | 9년 전 | 367 | ||
| 7944 | 9년 전 | 377 | ||
| 7943 | 9년 전 | 353 | ||
| 7942 | 9년 전 | 387 | ||
| 7941 | 9년 전 | 369 | ||
| 7940 | 9년 전 | 857 | ||
| 7939 | 9년 전 | 309 | ||
| 7938 | 9년 전 | 356 | ||
| 7937 | 9년 전 | 259 | ||
| 7936 | 9년 전 | 862 | ||
| 7935 | 9년 전 | 404 | ||
| 7934 | 9년 전 | 379 | ||
| 7933 | 9년 전 | 456 | ||
| 7932 | 9년 전 | 429 | ||
| 7931 | 9년 전 | 489 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기