[英]Radio buttons for web page with fadeto function
我有這個腳本使用jQuery:
$(document).ready(function() {
$('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(1000, 1);
}, function () {
$span.stop().fadeTo(1000, 0);
});
});
});
我有這個CSS代碼:
.fotky {
clear: both;
position:relative;
display:block;
height: 56px;
width: 126px;
background:url(images/Fotky.png) no-repeat;
background-position: top;
cursor: pointer;
}
.fotky span.hover {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: bottom;
}
這是我的網站, 我的測試網站如何使按鈕像單選按鈕一樣工作,所以單擊后將顯示圖像的第三部分,單擊另一個按鈕后將其隱藏。 並且當顯示單擊的部分時,懸停功能不應在此按鈕上起作用。 有沒有辦法做到這一點?
不知道我是否正確地找到了您,但我猜想這方面的事情應該有所幫助。
CSS:
.hover{display:none;}
腳本:
$('.a, .b, .c').each(function() {
var $this = $(this);
$span = $('<span class="hover"/>');
$span.hover(function(){$(this).fadeIn()}, function(){ $(this).fadeOut()});
$this.filter('a').click(function(e) {
// do something with the click.
e.stopPropagation(); e.preventDefault();
$(this).hover = null; // you can save hover function in a var if you want to use it later.
});
$this.filter('b').click(function(e) {
// do something with the click.
e.stopPropagation(); e.preventDefault();
$(this).hover = null; // you can save hover function in a var if you want to use it later.
});
$this.filter('c').click(function(e) {
// do something with the click.
e.stopPropagation(); e.preventDefault();
$(this).hover = null; // you can save hover function in a var if you want to use it later.
});
});
所以現在我有了這個:
腳本:
$(document).ready(function() {
$(".fg-button")
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
)
.mousedown(function(){
$(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
if( $(this).is('.ui-state-active') ){ $(this).removeClass("ui-state-active"); }
else { $(this).addClass("ui-state-active"); }
})
.mouseup(function(){
if(! $(this).is('.fg-buttonset-single .fg-button') ){
$(this).removeClass("ui-state-active");
}
});
});
CSS:
.fg-button {height: 56px; width: 126px; border: 0px; outline: 0px; cursor:pointer; position: relative; display:block;}
.ui-state-default { clear: both; background: url(images/Fotky.png) no-repeat; background-position: top;}
.ui-state-hover{background: url(images/Fotky.png) no-repeat; background-position: bottom;}
.ui-state-active {background: url(images/Fotky.png) no-repeat; background-position: center;}
HTML:
<div class="fg-buttonset fg-buttonset-single">
<button class="fg-button ui-state-default"></button>
<button class="fg-button ui-state-default"></button>
<button class="fg-button ui-state-default"></button>
<button class="fg-button ui-state-default"></button>
這是我需要的,但沒有fadeTo功能。 我如何在那里實現它以使其如本頁面頂部的示例所示起作用? 我做了一些嘗試,但沒有成功。
此處測試的工作方式http://airsoftbanda.tym.sk/css/test.php
在這里,fadeTo的工作原理http://airsoftbanda.tym.sk/css/index.php
最后,這是我的最終解決方案,可以根據需要運行...
腳本:
$(document).ready(function() {
$('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(1000, 1);
}, function () {
$span.stop().fadeTo(1000, 0);
});
$(".fotky").mousedown(function(){
$(this).parents('#tlacidlo:first').find(".fotkyk,.videok,.diskusiak,.onask,.zbranek,.akciek").removeClass("fotkyk videok diskusiak onask zbranek akciek");
$(this).addClass("fotkyk");
$span.stop().fadeTo(1000, 0);
end;
});
$(".video").mousedown(function(){
$(this).parents('#tlacidlo:first').find(".fotkyk,.videok,.diskusiak,.onask,.zbranek,.akciek").removeClass("fotkyk videok diskusiak onask zbranek akciek");
$(this).addClass("videok");
$span.stop().fadeTo(1000, 0);
});
CSS:
#tlacidlo {
height: 400px;
width: 126px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.fotky {
clear: both;
position:relative;
display:block;
height: 56px;
width: 126px;
background:url(images/Fotky.png) no-repeat;
background-position: top;
cursor: pointer;
}
.fotky span.hover {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: bottom;
}
.fotkyk {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: center;
}
HTML:
<div id="tlacidlo">
<a href="#" class="fotky"></a>
<a href="#" class="video"></a>
<a href="#" class="diskusia"></a>
<a href="#" class="onas"></a>
<a href="#" class="zbrane"></a>
<a href="#" class="akcie"></a>
</div>
當然,它只是代碼的一部分,因為它在腳本和CSS上幾乎重復相同的內容。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.