我有一个图像,并使用 jQuery 将其变成了一个按钮。
所谓的按钮有两种状态:常规状态和按下状态。
使用 jQuery 我检测到“mousedown”和“mouseup”并替换“src”属性,如下所示:
$("#btn").click(function() {
;//DO SOMETHING HERE WHEN PRESSED
});
$("#btn").mousedown(function() {
$(this).attr({ src: regular.png });
});
$("#btn").mouseup(function() {
$(this).attr({ src : pushed.png });
});
离线测试时效果非常好!但今天我注意到,当图像存储在服务器上时,它会在每次属性更改时一遍又一遍地加载图像。
如何避免这种加载问题并使所有图像仅从服务器加载一次?
另外,如果有更好的方法来完成我在这里想做的事情,请告诉我。
谢谢。
创建包含两个按钮状态的单个图像。然后,动态更改鼠标移出/鼠标悬停时背景图像的位置:
<style type="text/css">
.button_normal {
width: 50px;
height: 50px;
background-image: url(merged_button_bg.png);
background-repeat: no-repeat;
border: solid black 1px;
cursor: pointer;
}
.button_over {
background-position: -50px;
}
</style>
<div class="button_normal"></div>
<script>
$(document).ready(function() {
$('.button_normal').mouseover(function() {
$(this).addClass('button_over');
});
$('.button_normal').mouseout(function() {
$(this).removeClass('button_over');
});
});
</script>
此示例假设目标图像为 50 像素正方形,并且merged_button_bg.png
是 100 像素 x 50 像素。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)