1、新建一个文件夹,用来存放网页文件和图片,快捷键ctrl+shift+n。
3、进入新建的文本文档,复制下方代码,点击快捷键ctrl+s保存后退出。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度知道</title>
</head>
<body>
<!--
position:fixed是设置为固定在页面的某个位置,不会随滚动条滚动而移动。
top: 50px图片距离页面顶部50像素。
right:10px图片距离页面右边10像素。
display:block设置图片为块状元素,这样图片不会单独占据行-->
<img style="position:fixedtop: 50pxright:10pxdisplay:block" src="1.png" alt="">
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
</body>
</html>
4、重命名新建文本文档为index.html,原先的.txt的后缀同时去掉后保存,提示确实要更改后按“是”即可。
5、添加背景图片源文件,并命名为1.png,这些图片为你需要放置的图片。
6、点击index.html,右键浏览器打开预览效果。
7、浏览器打开后即可得到如下效果
<DIV id=demo style="OVERFLOW: hidden WIDTH: 600px HEIGHT: 190px top:485px left:252pxposition: absolute"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id=demo1>
<!-- 要循环滚动的图片 -->
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="200" align="center" style="height: 151px">
<a href="WebDeSign.aspx">
<img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>
</td>
<td width="200" align="center" style="height: 151px">
<a href="SoftWare.aspx">
<img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>
</td>
<td align="center" style="height: 151px width: 200px">
<a href="VhostIndex.aspx">
<img src="images/indexpic3.gif" width="194" height="147" border="0" /></a>
</td>
</tr>
</table>
</td>
<TD id=demo2 width=1></TD>
</tr>
</table>
</DIV>
<SCRIPT>
var speed=30//速度数值越大速度越慢
var demo2 = document.getElementById("demo2")
var demo = document.getElementById("demo")
var demo1 = document.getElementById("demo1")
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
自己站的效果
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)