1、怎样制作网页中的浮动层效果?
<!-- 完整的HTML代码如下 -->
1.首先在<head>和</head>之间插入下列代码
<br>
<style type="text/css">
#floater {
position: absolute;
left: 500;
top: 146;
width: 176;
visibility: visible;
z-index: 10;
}
-->
</style>
<br>
<br>
2.在body中的任意位置插入下列代码
<div ID="floater" style="left: 590px; top: 158px">
<p align="center">
<img src="http://cfan.net.cn/tutu/200406301.jpg" width="127" height="150"><br>
<font color="#FF8040">欢迎光临</font></p>
</div><script LANGUAGE="JavaScript">
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}
}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}
<!-- DRAG DROP CODE -->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>
<p></p>
2、在网页中如何制作一个随着页面滚动浮动的包含超链接的图片?
直接放在浮动的div中
希望采纳
3、IE67浮动问题(网页设计)很简单的效果。
把<li>定一个宽就行的了,会自动换行的 <!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;list-style:none;outline:none; word-break:break-all;} div{ width:300px; padding:10px; overflow:hidden; border:1px solid #000000; margin:50px auto;} div ul{ width:300px; } div ul li{float:left; width:80px; line-height:24px; margin:0px 5px; } </style> </head> <body> <div> <ul> <li>收看1电视1</li> <li>收看1电视2</li> <li>收看1电视3</li> <li style="background:#00CCFF;">收看1电视4</li> <li>收看1电视5</li> <li>收1看电视6</li> <li>收1看电视7</li> </ul> </div> </body> </html>
4、怎么在网页中制作浮动的小图标
1.新建一个HTLM的网页.
2.转到"布局"面板,选中"绘制层"按扭,在网页上面画一个图层
3.然后,在图层里放入你想要的内容,比如一张图片等.
4.再次,在窗口栏中,将"时间轴"掉出来.也可Alt+F9.
5.这步最关键,将你绘制的图层用鼠标拖到时间轴上(注意是"拖动"哦),然后将时间上面的选项"自动播放"和"循环"勾起.
6.最后一步.在时间轴第一桢上,点击鼠标左键,选中"录制层路径",然后在网页上拖动你画的图层.这时你会看见拖动图层后面有些小点,那么恭喜你,你这时是在绘制浮动广告的路径,绘完后,保存.预览.完成了.(若想直线运动,可在针上点左键,选"添加关键针",再到网页上移动图层即可,如你懂FLASH,那就简单了)
5、网页设计浮动的问题
把你的背景图片加引号background-image:url("images/header.jpg");
另外content层高度你可以不设,现在你里面只放了一个left层,如果内容多的话它可以自动撑开的.
6、网页设计,DIV+CSS问题,浮动问题
浮动最直接 最根本的原因就是两个float的宽度和 大于总宽度。注意 IE下的偏移和margin在浮动下值的变化
7、dw cs5制作网页 LOGO图片向左浮动之后与下面的div标签之间有个3像素的间隙,跪求解决办法
#logo img {height:64px;width:200px;} img 加宽度和高度不起作用内联元素要变成块版元素先 display block
#logo { height: 64px; width:250px; float: left; display:inline} 这个权 displsy:inline多余的
8、网页设计,图片的浮动,滑动鼠标时图片距离顶部边框的长度总是一定的,代码到底错在哪里了,帮忙看下
加上一张图片 否则 把代码拷进去以后什么都看不见
9、网页设计中浮动框怎么制作?
浮动框还是浮动层?其实都一样,知道做层就行了,加个浮动代码就OK了
10、网页设计清除浮动的问题
不是每一个div都需要清楚浮动,在ff中凡是样式带有float或者position属性的div,都会被认为是浮动层,这样的层在被父级div嵌套的时候是不会根据内容将父级撑开的,为了让他既有float/position的效果还想根据内容撑开父级div,所以才会清除浮动。文字说的话也不是很明白,给你个例子。
下面的例子你可以很明显的看出在FF和在IE中的不同
<!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">
.clear {clear: both;}
</style>
</head>
<body>
<div style="background-color:#666; width:500px;">
<div style="float: left;width: 130px;">内容 内容</div>
</div>
</body>
</html>
如果加上clear清楚浮动的话,效果就相同了。
<div style="background-color:#666; width:500px;">
<div style="float: left;width: 130px;">内容 内容</div>
<div class="clear"></div>
</div>