在html中如何让图片跟着滚动条而动_IT百科

1、新建一个文件夹，用来存放网页文件和图片，快捷键ctrl+shift+n。

2、进入新建文件夹里面，右键新建文本文档。

3、进入新建的文本文档，复制下方代码，点击快捷键ctrl+s保存后退出。

<!doctype html>

<html>

<head>

</head>

<body>

<!--

position:fixed是设置为固定在页面的某个位置，不会随滚动条滚动而移动。

top: 50px图片距离页面顶部50像素。

right:10px图片距离页面右边10像素。

display:block设置图片为块状元素，这样图片不会单独占据行-->

</body>

</html>

4、重命名新建文本文档为index.html，原先的.txt的后缀同时去掉后保存，提示确实要更改后按“是”即可。

5、添加背景图片源文件，并命名为1.png，这些图片为你需要放置的图片。

6、点击index.html，右键浏览器打开预览效果。

7、浏览器打开后即可得到如下效果

<html>

<head>

<style>

#div1 {position:relativewidth:650pxheight:210pxoverflow:hidden}

#div2{position:absolute}

li{float:leftlist-style-type:nonepadding:5px}

img{border:none}

a{position:relative}

</style>

window.onload=function()

{

var odiv2=document.getElementById('div2')

var ali=odiv2.getElementsByTagName('li')

var aspeed=-5

odiv2.innerHTML+=odiv2.innerHTML

odiv2.style.width=ali[0].offsetWidth*ali.length+'px'

setInterval(function()

{

odiv2.style.left=odiv2.offsetLeft+aspeed+'px'

if (odiv2.offsetLeft<-odiv2.offsetWidth/2)

{

odiv2.style.left='0px'

}

},30)}

}

</script>

</head>

<body>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/7955595.html

在html中如何让图片跟着滚动条而动

发表评论

评论列表（0条）