초보입니다... 도와주세요 ㅠㅠ
정말 초보입니다...입사 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>
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 2개
기존에 이동할 속도 변수를 하나 지정하시고
rollingDiv.setRollingAnimationFrame(rollingAnimationFrame);
화살표에 마우스 오버시 rollingAnimationFrame 값을 줄여주시고
아웃시 이전값을 넣으시면 됩니다