$(function(){
$("#a").click(function(){
$(this).prev().attr({"src":"a.gif"})
})
})
这样子就好了
代码的意思是 当点击a标签时 寻找与他同级的 并且在他之前的那一个元素 也就是img标签
并且改变 img标签中的 src属性 为 a.gif
希望能帮到你 谢谢
html5中设置整页背景图片的方法是利用css3样式:
写法如下:
img.bg {
/* Set rules to fill background */
min-height: 100%
min-width: 1024px
/* Set up proportionate scaling */
width: 100%
height: auto
/* Set up positioning */
position: fixed
top: 0
left: 0
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%
margin-left: -512px /* 50% */
}
}
效果如:
这个原理其实很简单的。你知道html5只是html+css3+js的全程,所以控制图片的定位都是有css的一个position属性来做的,图片无非就是去改变定位中的left值。知道这个之后我就可以接下来的实现步骤:
当然,这些只是实现逻辑。具体细化功能这个你自己去调整。原理知道其他的都简单的很。
第一步:将N张图片去排版定位。
如
#pic1{position:absolute
width:50px
height:50px
top:10px
left:0px
}
#pic2{
position:absolute
width:50px
height:50px
top:10px
left:60px
}
#pic3{
position:absolute
width:50px
height:50px
top:10px
left:120px
}
第二步:我们现在已经知道了这3张图片的位置,接下来就是去点击它,改变他的位置,这个点击其实用js就很容易实现。onclick点击事件,你可以搜下;
例如:
//监听点击事件
document.addEventListener("click",function(){
for(var i=1i<4i++){
$("#pic"+i).css("left", parseInt($("#pic"+i).css("left")) - 60 + "px")
}
})
现在我们在去看css属性的left值,依次类推:-60px,0px,60px,
第三步:图片就这样切换了。我这假设我们的手机屏幕宽是50像素的,但现实不是这样,所以需要加个遮照。就是在这个滚动的图片上再加一层div去遮住不去显示的图片(当然这是一种蔗照方法),方法很多不一一列举。关键属性overflow:hidden;
朋友只能指点这么多,老婆让洗碗,所以接下来的如有疑问,继续追问,以后回答
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)