导航:首页 > 万维百科 > 网页设计中让图片飘起来的代码

网页设计中让图片飘起来的代码

发布时间:2020-09-23 01:37:22

1、求一个网页漂浮图片代码

<script type="text/javascript">
function hidead()
{document.getElementById("ad").style.display="none";}
</script>
<div id="ad" style="position:absolute">
<a><a href="12.html"><img src="aa.jpg" border="0"></a>
</a>
<DIV onClick="hidead();" style="FONT-SIZE: 9pt; CURSOR: hand" align=right>关闭广告×</DIV></div>
<p>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 1
var obj=document.getElementById("ad")
function floatAD() {
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatAD()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)}
</script>

</p>

2、在HTML中图片左右浮动的代码。

html:
<a href="#">字体颜色</a>

CSS:
a:link{color:#03345C;}//定义链接没有点击时候的颜色
a:hover{ color:#F9C111;}//定义鼠标滑过时候的链接的颜色

3、图片在网页中左右漂浮代码?

<marquee
width="200"
height="100"
direction="left"
scrolldelay="80"
behavior="alternate">包头市</marquee>

把包头市把几个字换成图片,自己调整下高宽

4、在网页制作中如何编辑代码让某个图片变成悬浮的?

首先将图片装在一个盒子里,即,假设图片名为:回顶端.jpg,则代码为: <head> <style type="text/css"> #tupian { float:bottom; (让图片浮版动在页面的下方权) } </style> </head> <div id="tupian">回顶端<div>

5、如何让图片在网页上飘动?急!

s是小广告吧 用DIV绘制一个适当大小的层然后设置时间轴来确定层的移动方向 完了以后在文档窗口左下角标签选择器中选中<body>标签按SHIFT+F4打开行为面板 单击添加行为按钮 在弹出的菜单中选择 时间轴/播放时间轴的命令在打开的播放时间轴对话框中选择目标时间轴对象。 老大全手打啊 多给点分啊 如果还不是很明白 给我发消息吧

6、网页设计 图片滚动代码

素材的准备。为了更好的表现网站的风格和特色,具备一些更富表现力和吸引力的图片是必不可少的。同理,准备了一些与网页主题密切相关的图片,用于做为实现图片滚动效果的素材。

打开Dreamweaver8,新建一网页文件,并保存为名为“index.html"文件。

切换至代码编辑界面,输入如下代码:

<body><div id="photo-list">  <ul id="scroll">  
<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li>  
<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li>  </ul> </div></body>

对应效果如图所示:

新建一CSS样式表文件,并将该文件保存到与“index.html”相同的目录下,文件名称为“MyStyle.css"。

在新建的样式表文件"MyStyle.css”文件中输入如下代码:
* { padding:0; margin:0;} /*设置所有对像的内边距为0*/
body { text-align:center;}  /*设置页面居中对齐*/
#photo-list {
/* 6张图片的宽度(包含宽度、padding、border、图片间的留白)
计算:6*(100+2*2+1*2+9) - 9 
之所以减去9是第6张图片的右边留白 */
 width:681px;  

/* 图片的宽度(包含高度、padding、border)
 计算:100+2*2+1*2  */ 
height:106px;  
margin:50px auto; 
 overflow:hidden; /*溢出部份将被隐藏*/ 
border:1px dashed #ccc;  
}  
#photo-list ul { list-style:none;}  
#photo-list li { float:left; padding-right:9px;}  

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

对应文件内容如图所示:

在网页文件"index.html"中添加对该样式表的引用:

<link rel="stylesheet" type="text/css" href="MyStyle.css">

此时网页效果如图所示:

新建一个JS文件,并将该文件另存为“MoveEffect.js"。

在”MoveEffect.js“文件中输入如下所示代码:
 var id = function(el) {  return document.getElementById(el);  },
 c = id('photo-list');
 if(c) {
 var ul = id('scroll'),
 lis = ul.getElementsByTagName('li'),
 itemCount = lis.length,
 width = lis[0].offsetWidth, //获得每个img容器的宽度
 marquee = function() {
 c.scrollLeft += 2;
 if(c.scrollLeft % width <= 1){  //当 c.scrollLeft 和 width 相等时,把第一个img追加到最后面
 ul.appendChild(ul.getElementsByTagName('li')[0]);
 c.scrollLeft = 0;
 };
 },
 speed = 50; //数值越大越慢
 ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度  
 var timer = setInterval(marquee, speed);
 c.onmouseover = function() {
 clearInterval(timer);
 };
 c.onmouseout = function() {
 timer = setInterval(marquee, speed);
 };
 };


然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。

<script type="text/javascript" src="MoveEffect.js"></script>

代码如图所示:

打开“index.html”网页文件,最终效果如果所示:

7、网页制作中图片浮动的代码!!!急需!!!

<script>
var pngbrOK=false;
var mie=false;
var aver=parseInt(navigator.appVersion.substring(0,1));
var aname=navigator.appName;
var pngmystop=0;

function pngcheckbrOK()
{if(aname.indexOf("Internet Explorer")!=-1)
{if(aver>=4) pngbrOK=navigator.javaEnabled();
mie=true;
}
if(aname.indexOf("Netscape")!=-1)
{if(aver>=4) pngbrOK=navigator.javaEnabled();}
}
var vmin=2;
var vmax=5;
var vr=2;
var timer1;

function pngchip(chipname,width,height)
{
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}

function pngmovechip(chipname)
{
if(pngbrOK && pngmystop==0)
{eval("pngchip="+chipname);
if(!mie)
{pageX=window.pageXOffset;
pageW=window.innerWidth;
pageY=window.pageYOffset;
pageH=window.innerHeight;
}
else
{pageX=window.document.body.scrollLeft;
pageW=window.document.body.offsetWidth-8;
pageY=window.document.body.scrollTop;
pageH=window.document.body.offsetHeight;
}
pngchip.xx=pngchip.xx+pngchip.vx;
pngchip.yy=pngchip.yy+pngchip.vy;
pngchip.vx+=vr*(Math.random()-0.5);
pngchip.vy+=vr*(Math.random()-0.5);
if(pngchip.vx>(vmax+vmin)) pngchip.vx=(vmax+vmin)*2-pngchip.vx;
if(pngchip.vx<(-vmax-vmin)) pngchip.vx=(-vmax-vmin)*2-pngchip.vx;
if(pngchip.vy>(vmax+vmin)) pngchip.vy=(vmax+vmin)*2-pngchip.vy;
if(pngchip.vy<(-vmax-vmin)) pngchip.vy=(-vmax-vmin)*2-pngchip.vy;
if(pngchip.xx<=pageX)
{pngchip.xx=pageX;
pngchip.vx=vmin+vmax*Math.random();
}
if(pngchip.xx>=pageX+pageW-pngchip.w)
{pngchip.xx=pageX+pageW-pngchip.w;
pngchip.vx=-vmin-vmax*Math.random();
}
if(pngchip.yy<=pageY)
{pngchip.yy=pageY;
pngchip.vy=vmin+vmax*Math.random();
}
if(pngchip.yy>=pageY+pageH-pngchip.h)
{pngchip.yy=pageY+pageH-pngchip.h;
pngchip.vy=-vmin-vmax*Math.random();
}
if(!mie)
{eval('document.'+pngchip.named+'.top ='+pngchip.yy);
eval('document.'+pngchip.named+'.left='+pngchip.xx);
}
else
{eval('document.all.'+pngchip.named+'.style.pixelLeft='+pngchip.xx);
eval('document.all.'+pngchip.named+'.style.pixelTop ='+pngchip.yy);
}
pngchip.timer1=setTimeout("pngmovechip('"+pngchip.named+"')",100);
}
}
function pngstop(x)
{
pngbrOK=true;
pngmystop=x;
pngmovechip("pngtome");
}
var pngtome;
var pngchip;
function pngtome()
{pngcheckbrOK();
pngtome=new pngchip("pngtome",80,80);
if(pngbrOK)
{ pngmovechip("pngtome");
}
}

ns4=(document.layers)?true:false;
ie4=(document.all)?true:false;

document.write("<div align=center id='pngtome' style='position:absolute;'><a href='http://www.baidu.com' target=_blank><img src='images/2.jpg' border=0 id='myimg'></a>"+"</div>"
);
pngtome()

function exchangeImg() {
var imgobj = document.getElementById('myimg');
if (imgobj != null) {
if (imgobj.src == 'images/1.jpg'){
imgobj.src = 'images/2.jpg'
}
else {
imgobj.src = 'images/1.jpg'
}
}
var timer1 = setTimeout('exchangeImg()', 1000);
}

exchangeImg();
</script>

8、求网页右下角漂浮代码..放图片和连接的..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>右下角浮动</title>
<style type="text/css">
<!--
#img{ position:absolute; right:0; bottom:0; color:#F00;}
#img a{color:#F00; text-decoration:none;}
#img a:hover{color:#00F; text-decoration:none;}
-->
</style>
</head>

<body>
<div id="img"><a href="#">兄弟看这里<br>你完全可以把我当作是图片</a></div>
</body>
</html>

<!--简单的弄了个,复制直接粘贴到Dreamweaver你就能看到了-->

9、网页设计怎样使图片在网页中任意的飘来飘去,例如广告图片之类的

那个要用到一个JS代码。上面的连接地址和图片可以自行更改! <div id="codefans_net" style="position:absolute"> <!--链接地址--><a href=" http://www.soso.com/" target="_blank"> <!--图片地址--><img src="/images.gif" width="160" height="95" border="0"> </a></div> <script> var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById("codefans_net") function float() { var L=T=0 var R= document.body.clientWidth-obj.offsetWidth var B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x + step*(xin?1:-1) if (x < L) { xin = true; x = L} if (x > R){ xin = false; x = R} y = y + step*(yin?1:-1) if (y < T) { yin = true; y = T } if (y > B) { yin = false; y = B } } var itl= setInterval("float()", delay) obj.onmouseover=function(){clearInterval(itl)} obj.onmouseout=function(){itl=setInterval("float()", delay)} </script>

10、寻求一段网页制作网站上漂浮的图片的代码?

<html> <title>送给你</title> <body text="blue" background="868239f370390344342acc31.jpg"> <bgsound src="棉花糖.mp3"/> <marquee behavior="alternate" direction="down"> <font size="7">缘起惜缘</font> </marquee> </marquee> <marquee behavior="alternate" direction="up"> <marquee behavior="alternate" direction="right"> <font size="7" color="red">有的只是一些温暖</font> </marquee> </marquee> </body> </html> 其实都是类似的 自己修改下就可以用了

与网页设计中让图片飘起来的代码相关的知识