$(".test_img").css("background-image","url(../img/testimg/text_"+xstart+".png)")
你第二行的变量如果我没猜错的话,你是用了PHP的模版语言,所以肯定是错的
直接在页面顶部定义css body背景图片就可以了,或者在你自己的css里添加背景,注意的是你的css必须在jqumobile css之后才行。设置背景其实跟jquermobile无关。另外你想单个页面设置背景图片那就跟jquerymobile有关了
<div data-role="page" style="background:url(xxx.jpg) 50% 0 no-repeatbackground-size:cover">这表示jqm的一个单页标签</div>所有页面都一个背景那就
<style>
body{background:url(xxx.jpg) 50% 0 no-repeatbackground-size:cover}
</style>
需要了解下面2个属性 关于背景的问题:
background-size:cover背景铺满元素,调整背景图片的宽度或高度(较小者),以铺满整个元素
保持背景图片的宽高比
background-size:contain
元素包含整个背景图片,调整背景图片的宽度或高度(较大者),使背景图片完全包含在元素中
保持背景图片的宽高比,背景铺满元素
添加 li 的背景图可用如下css样式
li{background:url('bg.png')} // 设置li元素的背景图为当前目录下的bg.pngli{background:nome} // 取消背景图
所以实现上述要求可以采用如下思路:为取消背景图样式设定一个class,点击li元素时为其应用此样式。
实例演示如下:
创建Html元素
<div class="box"><span>演示点击li去除背景样式:</span><br>
<div class="content">
<li>list-item-1</li>
<li>list-item-2</li>
<li>list-item-3</li>
<li>list-item-4</li>
</div>
</div>
设置css样式
div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}div.box span{color:#999font-style:italic}
div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}
li{margin:10px 0padding:10px 0background:url('bg1.png')}
.selected{background:none}
编写jquery代码
$(function(){$("li").click(function() {
$(this).addClass('selected').siblings('li').removeClass('selected')
})
})
观察效果
初始样式
点击第二个li的效果
接着点击第四个li的效果
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)