使用js动态的改变背景图片:
示例:一个隐藏和显示的点击按钮的背景图片,默认箭头指示向上,点击隐藏,箭头向上,再点击向下
<script type="text/javascript">
var count = 0;
//设置默认箭头的方向
var arrow = document.getElementById("arrow");
arrow.style.backgroundImage = "url('<%=projectPath%>/admin/home/images/icon-btnMore-up.png')";
arrow.style.backgroundRepeat = "no-repeat";
arrow.style.backgroundPosition = "center";
//点击之后的方向
$("#arrow").click(function() {
if (count == 0) {//点击向下
arrow.style.backgroundImage = "url('<%=projectPath%>/admin/home/images/icon-btnMore-down.png')";
arrow.style.backgroundRepeat = "no-repeat";
arrow.style.backgroundPosition = "center";
count = 1;
} else {//点击向上
arrow.style.backgroundImage = "url('<%=projectPath%>/admin/home/images/icon-btnMore-up.png')";
arrow.style.backgroundRepeat = "no-repeat";
arrow.style.backgroundPosition = "center";
count = 0;
}
});
</script>
<%=projectPath%>:项目路径
arrow:需要改变背景图片的模块ID
实现原理:使用js动态的改变点击模块的背景图片来实现隐藏和显示时的箭头朝向