js编写城市选项切换效果

JavaScript017

js编写城市选项切换效果,第1张

好。

1、效果方面：js编写城市选项切换效果一款JS版网页顶部向下滑出的城市切换导航，仿sohu团购网页顶部的城市导航切换，从顶部向下滑出，效果非常好。

2、范围方面：js编写可以随时查看，应用范围广，方便在其他城市之间切换。

1、使用js动态操作元素样式

//定义onClick方法

function click(){

    document.getElementById("p1").style.display="block"

    document.getElementById("p2").style.display="none"

}

2、先写好css在onClick事件中改变元素class

.show{display:block}

.hidden{display:none} /定义onClick方法

function click(){

    document.getElementById("p1").className="show"

    document.getElementById("p2").className="hidden"

}

<style>

#bg img{margin:0 5pxborder:1px solid #dddwidth:80pxheight:80px}

#bg img.on{border-color:#f00}

</style>

<div id="bg">

<img src="缩略图地址" rel="大图地址">

<img src="缩略图地址" rel="大图地址">

<img src="缩略图地址" rel="大图地址">

</div>

//引入jQuery.js

<script>

var $mg=$("#bg").find("img")

$mg.click(function(){

var big=$(this).attr("rel")

$("body").css("background","url("+big+") 50% 50% no-repeat")

$(this).addClass("on").siblings("img").removeClass("on")

})

</script>

上面就是最简单的背景切换加缩略图，需要引入jQuery哈