使用形象與點擊效果

jQuery的按鈕，我知道按鈕使用形象與點擊效果

$("#divId").button();

語法，但我想用圖像。我已經申請

$("img").click(function(){......});

它工作得很好，但點擊圖片不給點擊效果。如何在圖像上添加點擊效果。

來源

2011-06-13 Narendra Sisodiya

什麼是'點擊效果'？ – 2011-06-13 08:21:30

什麼是點擊效果？另外，你使用jQuery UI嗎？如果是這樣，請正確標記。 – alex 2011-06-13 08:21:51

點擊效果=按下效果。當我點擊圖片時，圖片應該放下來然後回來。 – 2011-06-13 10:10:48

這裏是你想要獲得圖像或文本的按鈕效果。請從下面的鏈接下載圖片或創建您自己的圖片。

HTML：

<a class="button" href="#"><span>Bring world peace</span></a>

CSS：

.clear { /* generic container (i.e. div) for floating buttons */ 
    overflow: hidden; 
    width: 100%; 
} 

a.button { 
    background: transparent url('bg_button_a.gif') no-repeat scroll top right; 
    color: #444; 
    display: block; 
    float: left; 
    font: normal 12px arial, sans-serif; 
    height: 24px; 
    margin-right: 6px; 
    padding-right: 18px; /* sliding doors padding */ 
    text-decoration: none; 
} 

a.button span { 
    background: transparent url('bg_button_span.gif') no-repeat; 
    display: block; 
    line-height: 14px; 
    padding: 5px 0 5px 18px; 
} 

a.button:active { 
    background-position: bottom right; 
    color: #000; 
    outline: none; /* hide dotted outline in Firefox */ 
} 

a.button:active span { 
    background-position: bottom left; 
    padding: 6px 0 4px 18px; /* push text down 1px */ 
}

來源

2011-06-13 08:21:39

在圖像的div和地方形象標籤的div 內部腳本標籤寫入打擊代碼

像它在這裏完成

的$（document ）.ready（function（）{

$("#clickimage").click(function(){ 
    alert("image is clicked"); 

});

}）;

<!--<div id="clickimage"><img src="wc.png" width="100" height="100"></div>-->

來源

2011-06-13 08:28:24 jalil

。點擊不添加點擊效果 – 2011-06-13 10:28:12

點擊效果....你真的意味着什麼？上面的代碼工作正常，當你點擊它觸發警報的圖像。讓我清楚你的問題。 – jalil 2011-06-13 11:28:06

點擊圖片應該下來，然後上來......你知道按鈕按下效果 – 2011-06-13 16:11:00

<html> 

<head> 

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 


$(document).ready(function(){ 


    $(".imgclick").mousedown(function(){ 


     var mrgtb = parseInt($(this).css("margin-top")); 

     var mrglf = parseInt($(this).css("margin-left")); 

     mrgtb=mrgtb+3; 

     mrglf=mrglf+3; 

      $(this).css("margin-top",mrgtb+"px").css("margin-left",mrglf+"px"); 


    }).mouseup(function(){ 

     var mrgtb = parseInt($(this).css("margin-top")); 

     var mrglf = parseInt($(this).css("margin-left")); 

     mrgtb=mrgtb-3; 

     mrglf=mrglf-3; 

      $(this).css("margin-top",mrgtb+"px").css("margin-left",mrglf+"px"); 

    }); 

}); 

</script> 

</head> 

<body> 
<p>Hello</p> 

<span>World</span><input id="a" class="imgclick" style="outline: none;" type="image" src="a.jpg" width="30px" height="30px" border="0" > 



</body> 

</html>

來源

2011-06-14 01:32:52

這是我想要的。 – 2011-06-14 01:33:28

下面是另一種簡單的方式來增加使用鼠標按下點擊效果和MouseUp事件。當保證金被修改時，我觀察到窗口中的其他控件取代。我已經給出了一個簡單的解決方案來獲得使用邊框的點擊效果。

$(".imgclick").mousedown(function() { 

    $(this).css("border", "1px solid #ECECEC"); 

}).mouseup(function() { 

    $(this).css("border", "none"); 
});

來源

2017-05-15 23:37:07

使用形象與點擊效果

回答

相關問題