jQuery를 사용하여 DIV 배경 영상
저는 제가 근무하는 회사의 확장/축소 콜금리표를 만들고 있습니다.현재 테이블 아래에 확장 버튼이 있는 테이블이 있는데, 확장 버튼에 "확장"이라고 적혀있습니다.버튼을 클릭하면 "축소"로 변경하고, 다시 클릭하면 당연히 "확장"으로 되돌리는 버튼이 필요하다는 점을 제외하고는 작동합니다.버튼에 적힌 글은 배경 이미지입니다.
그래서 기본적으로 내가 필요한 것은 디브의 배경 이미지를 클릭할 때 변경하는 것입니다. 토글과 같은 것을 제외하고 말이죠.
$('#divID').css("background-image", "url(/myimage.jpg)");
트릭을 수행해야 합니다. 요소의 클릭 이벤트에 연결하면 됩니다.
$('#divID').click(function()
{
// do my image switching logic here.
});
저는 개인적으로 자바스크립트 코드를 사용하여 두 클래스 간에 전환하고자 합니다.
CSS에서 div에서 배경 규칙을 제외하고 필요한 모든 것을 개략적으로 설명하도록 한 다음, 각각 정확한 배경 이미지(또는 스프라이트를 사용하는 경우 배경 위치)를 가진 두 개의 클래스(예: 확장 및 붕괴)를 규칙으로 추가합니다.
이미지가 다른 CSS
.div {
/* button size etc properties */
}
.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}
또는 이미지 스프라이트가 있는 CSS
.div {
background: url(img/sprite.gif) no-repeat left top;
/* Other styles */
}
.expanded {background-position: left bottom;}
그럼...
이미지가 있는 자바스크립트 코드
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).addClass('collapsed').removeClass('expanded');
}
else
{
$(this).addClass('expanded').removeClass('collapsed');
}
});
}
스프라이트가 있는 자바스크립트
참고: 우아한 toggleClass는 Internet Explorer 6에서는 작동하지 않지만 아래와 같습니다.addClass/removeClass이 상황에서도 방법은 잘 될 것입니다.
가장 우아한 솔루션(불행하게도 Internet Explorer 6에 우호적이지 않음)
$(function){
$('#button').click(function(){
$(this).toggleClass('expanded');
});
}
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).removeClass('expanded');
}
else
{
$(this).addClass('expanded');
}
});
}
제가 알기로는 이 방법은 브라우저에서 작동할 것이고, 스크립트의 URL 변경보다는 CSS와 클래스를 가지고 노는 것이 훨씬 더 편할 것 같습니다.
jQuery로 배경 이미지 CSS를 변경하는 방법은 두 가지가 있습니다.
$('selector').css('backgroundImage','url(images/example.jpg)');$('selector').css({'background-image':'url(images/example.jpg)'});
주의 깊게 살펴서 차이점을 기록하세요.두 번째는 기존 CSS를 사용하고 여러 CSS 속성을 함께 문자열화할 수 있습니다.
배경 이미지에 CSS 스프라이트를 사용하는 경우 확장 또는 축소 여부에 따라 배경 오프셋 +/- n 픽셀을 범프할 수 있습니다.토글이 아니라 배경 이미지 URL을 전환해야 하는 것보다 더 가깝습니다.
다음은 제가 하는 방법입니다.
CSS
#button{
background-image: url("initial_image.png");
}
#button.toggled{
background-image:url("toggled_image.png");
}
JS
$('#button').click(function(){
$('#my_content').toggle();
$(this).toggleClass('toggled');
});
이를 위한 한 가지 방법은 두 이미지를 모두 HTML에 넣는 것입니다. SPAN 또는 DIV 안에 CSS를 사용하거나 페이지 로드 시 JS를 사용하여 기본값을 숨길 수 있습니다.그런 다음 클릭하면 전환할 수 있습니다.왼쪽/아래 아이콘을 목록에 넣을 때 사용하는 유사한 예는 다음과 같습니다.
$(document).ready(function(){
$(".button").click(function () {
$(this).children(".arrow").toggle();
return false;
});
});
<a href="#" class="button">
<span class="arrow">
<img src="/images/icons/left.png" alt="+" />
</span>
<span class="arrow" style="display: none;">
<img src="/images/down.png" alt="-" />
</span>
</a>
내 것은 애니메이션입니다.
$(this).animate({
opacity: 0
}, 100, function() {
// Callback
$(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
// Callback of the callback :)
$(this).animate({
opacity: 1
}, 600)
});
});
이것은 현재 WinXP의 모든 브라우저에서 작동합니다.기본적으로 현재 배경 이미지가 무엇인지 확인하는 것입니다.이미지1이면 이미지2를 보여주고, 그렇지 않으면 이미지1을 보여줍니다.
jsapi 항목은 Google CDN에서 jQuery를 로드합니다(데스크톱에서 misc 파일을 테스트하기에 더 쉽습니다).
대체는 크로스 브라우저 호환성을 위한 것입니다(오페라 및 URL에 인용문을 추가하고 firefox, chrome 및 safari에서 인용문을 제거함).
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';
$('.mydiv').click(function() {
if ($(this).css('background-image').replace(/"/g, '') == original_image) {
$(this).css('background-image', second_image);
} else {
$(this).css('background-image', original_image);
}
return false;
});
});
</script>
<style>
.mydiv {
background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="mydiv"> </div>
</body>
</html>
상대 경로를 보존하고 addClass 함수를 사용하지 않기 위해 정규 표현식을 사용했습니다.난 그냥 복잡하게 만들고 싶었을 뿐이야 ㅋㅋㅋ
$(".travelinfo-btn").click(
function() {
$("html, body").animate({scrollTop: $(this).offset().top}, 200);
var bgImg = $(this).css('background-image')
var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
if(bgImg.match(/collapse/)) {
$(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
} else {
$(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
}
}
);
오래된 게시물이지만 이미지 스프라이트를 사용하고 CSS 속성(배경, 반복, 왼쪽 상단)에 대한 축약을 사용하여 반복 및 위치 지정을 조정할 수 있습니다.
$.each($('.smallPreview'), function(i){
var $this = $(this);
$this.mouseenter(function(){
$this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0');
});
$this.mouseleave(function(){
$this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0');
});
});
저는 항상 타임스탬프를 사용하여 브라우저가 이미지를 캐싱하는 것을 방지합니다.예를 들어, 사용자가 아바타를 회전하는 경우, 아바타는 종종 캐시에 저장되고 변경되지 않는 것처럼 보입니다.
var d = new Date();
var t = d.getTime();
$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");
나는 한 포럼에서 해결책을 찾았습니다, Togg Background Img.
CSS 스프라이트가 가장 잘 작동합니다.jQuery로 클래스를 전환하고 'background-image' 속성을 조작해 보았지만 아무 것도 작동하지 않았습니다.브라우저(최신 안정적인 크롬)가 이미 로드된 이미지를 "재로드"할 수 없기 때문이라고 생각합니다.
보너스 : CSS 스프라이트는 다운로드 및 표시 속도가 더 빠릅니다.HTTP 요청이 적을수록 페이지 로드가 빨라집니다.HTTP의 수를 줄이는 것이 프론트엔드 성능을 향상시키는 가장 좋은 방법이기 때문에 항상 이 경로를 가는 것을 추천합니다.
이것은 꽤 간단한 응답으로 사이트의 배경을 항목 목록으로 바꿉니다.
function randomToN(maxVal) {
var randVal = Math.random() * maxVal;
return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0);
};
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images
ram = list[parseFloat(randomToN(list.length))], // Random 1 to n
img = ram == undefined || ram == null ? list[0] : ram; // Detect null
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background
언급URL : https://stackoverflow.com/questions/253689/switching-a-div-background-image-with-jquery
'programing' 카테고리의 다른 글
| WooCommerce 이메일 알림의 상품 카테고리에 따라 받는 사람이 다름 (0) | 2023.09.19 |
|---|---|
| 페이지를 기록에서 제거하면 "뒤로"가 제대로 작동합니다. (0) | 2023.09.19 |
| JQuery vs ExtJS (0) | 2023.09.19 |
| 단순 jQuery 선택기는 Chrome에서 첫번째 요소만 선택합니다..? (0) | 2023.09.19 |
| load_plugin_text 도메인이 작동하지 않습니다. (0) | 2023.09.19 |