怎么用CSS或者JS实现鼠标点击变换背景图片？

html-css024

怎么用CSS或者JS实现鼠标点击变换背景图片？,第1张

<img src="1.jpg" width="100" height="100" alt="" onclick="pf(this)"/>

<script type="text/javascript">

var arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]

function pf(t) {

t.src = arr[Math.floor(Math.random()*arr.length)]

}

script>

定位移动滚动条，滚轮向下滚动一格+1，向上滚动一格-1

例如5个页面，建立5个div

<div class="d3-main" style="position: relative">

    <div class="section" id="d0" style="position: absolute top: 0% left: 0px"></div>

    <div class="section" id="d1" style="position: absolute top: 100% left: 0px"></div>

    <div class="section" id="d2" style="position: absolute top: 200% left: 0px"></div>

    <div class="section" id="d3" style="position: absolute top: 300% left: 0px"></div>

    <div class="section" id="d4" style="position: absolute top: 400% left: 0px"></div>

</div>

ie浏览器中有自带的切换效果可供调用；

其它浏览器的话得自己写程序定位，如淡入淡出可以利用设置css的opacity属性实现；

百叶窗可以利用程序生成N个div，每个div的背景图为你要加载的图，然后设置好每个div的位置即可