这个网页效果是怎么做出来的？？？
作者&投稿：书纨 （若有异议请与网页底部的电邮联系）
你说的是点击那个导航……然后就会跳到同一个页面的相应位置吧。这个就是导航的链接是href=“#a” 而下面其中一个位置的层的 id=“a” 依次类推 这样就实现了。而整个导航是 posizition：fixed。固定在头部的。这个就是锚点定位。
直接可以用css来做的渐变背景效果，先在ps里做好渐变图片，切成宽度1px和高255px的图片
在css样式里这样写: {background:url(图片地址) repeat-x top center transparent;}
把图片放进去向横向重复，位置向上局中。就可以了。
<html>
<head>
<title>8</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #222;
position: absolute;
width: 100%;
height: 100%;
}
#screen {
position:absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
cursor: url("../cross_rm.cur"), auto;
}
#pan {
position: absolute;
height: 150%;
width: 150%;
padding: 5%;
background: #000000 url("bumps2.gif");
}
#screen .frame {
position: relative;
float: left;
width: 29%;
height: 27%;
margin: 2%;
background: #000;
overflow: hidden;
}
#screen .slider {
position: absolute;
width: 100%;
height: 100%;
background: #222 url("bumps3.gif");
z-index: 1000;
}
#pan img {
position: absolute;
visibility: hidden;
}
#pan .legend {
position: absolute;
bottom: 0px;
font-size: 1em;
color: #FFF;
width: 2000px;
font-family: arial;
font-weight: bold;
}
</style>
<script type="text/javascript">
var xm = 0;
var ym = 0;
sP = {
cx : 0,
cy : 0,
N : 0,
R : [],
I : [],
C : [],
L : [],
Id : 0,
init : function ()
{
/* ==== init script ==== */
this.scr = document.getElementById('screen');
this.pan = document.getElementById('pan');
this.div = this.pan.getElementsByTagName('div');
this.scr.onselectstart = function () { return false; }
this.scr.ondrag = function () { return false; }
/* ==== for each pane ==== */
for (var i = 0, o; o = this.div[i]; i++)
{
if (o.className == 'frame')
{
/* ==== create legend ==== */
o.l = document.createElement('div');
o.l.className = 'legend';
o.appendChild(o.l);
/* ==== create flap ==== */
o.r = document.createElement('div');
o.r.className = 'slider';
o.appendChild(o.r);
o.r.x = 0;
o.r.l = o.l;
o.r.p = 0;
o.r.s = 2;
o.r.m = false;
o.img = o.r.img = o.getElementsByTagName('img')[0];
o.r.c = Math.random() * 100;
o.r.o = o;
sP.R[sP.N] = o.r;
sP.I[sP.N] = o.img.src;
sP.L[sP.N] = o.title;
o.title = "";
sP.N++;
/* ==== flap mouse over event ==== */
o.r.onmouseover = function ()
{
if (!this.m && this.img.complete)
{
/* ==== switch image ==== */
if (sP.O != this && !this.n)
{
this.x = this.o.offsetWidth;
this.l.innerHTML = sP.L[sP.Id];
this.img.src = sP.I[sP.Id];
this.resize();
this.n = true;
if(++sP.Id >= sP.N)
{
sP.Id = 0;
for (var i = 0, o; o = sP.R[i]; i++) o.n = false;
}
}
/* ==== up++ ==== */
if (sP.O)
{
sP.O.s = 2;
sP.C.push(sP.O);
}
this.m = true;
sP.O = this;
sP.Or = this;
}
}
/* ==== resize image ==== */
o.r.resize = function ()
{
var i = new Image();
i.src = this.img.src;
this.img.style.width = (i.width < this.offsetWidth) ? Math.round(this.offsetWidth * 1.25) + 'px' : Math.round(i.width) + 'px';
this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px';
this.w = (this.img.offsetWidth - this.offsetWidth) * .5;
this.h = (this.img.offsetHeight - this.offsetHeight) * .5;
this.img.style.visibility = 'visible';
}
}
}
/* ==== start script ==== */
sP.resize();
sP.run();
},
resize : function () {
/* ==== window resize ==== */
var o = sP.scr;
sP.nw = o.offsetWidth;
sP.nh = o.offsetHeight;
sP.iw = sP.pan.offsetWidth;
sP.ih = sP.pan.offsetHeight;
for (sP.nx = 0, sP.ny = 0; o != null; o = o.offsetParent)
{
sP.nx += o.offsetLeft;
sP.ny += o.offsetTop;
}
for (var i = 0, o; o = sP.R[i]; i++) o.resize();
},
/* ==== main loop ==== */
run : function ()
{
/* ==== scroll main frame ==== */
sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * .5 - (xm - sP.nx) * 2))) * (sP.iw - sP.nw)) / sP.nw) - sP.cx) * .1;
sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * .5 - (ym - sP.ny) * 2))) * (sP.ih - sP.nh)) / sP.nh) - sP.cy) * .1;
sP.pan.style.left = Math.round(sP.cx) + 'px';
sP.pan.style.top = Math.round(sP.cy) + 'px';
/* ==== lissajou ==== */
if(sP.O) {
sP.O.c += .015;
sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + 'px';
sP.O.img.style.top = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px';
sP.O.l.style.left = Math.round(sP.O.x--) + 'px';
}
/* ==== up ==== */
if (sP.Or)
{
sP.Or.p -= sP.Or.s;
sP.Or.s *= 1.1;
if (sP.Or.p < -sP.Or.offsetHeight)
{
sP.Or.p = -sP.Or.offsetHeight;
sP.Or.s = 2;
sP.Or.m = false;
sP.Or = false;
}
sP.O.style.top = Math.round(sP.O.p) + 'px';
}
/* ==== down ==== */
for (var i = 0, c; c = sP.C[i]; i++)
{
if (c != sP.Or)
{
c.p += c.s;
c.s *= 1.2;
if (c.p >= 0)
{
c.p = 0;
c.s = 2;
c.m = false;
sP.C.splice(i, 1);
}
c.style.top = Math.round(c.p) + 'px';
} else {
c.s = 2;
c.m = false;
sP.C.splice(i, 1);
}
}
setTimeout(sP.run, 16);
}
}
/* ==== global mouse position ==== */
document.onmousemove = function(e)
{
if (window.event) e = window.event;
xm = e.clientX;
ym = e.clientY;
return false;
}
</script>
</head>
<body>
<div id="screen">
<div id="pan">
<div class="frame" title="Isolating the longer dimension of the main hall"><img src="http://preview.zcool.com.cn/code/js/04/8/gr69.jpg" alt=""></div>
<div class="frame" title="?We'll start from here?, my partner said."><img src="http://preview.zcool.com.cn/code/js/04/8/or66.jpg" alt=""></div>
<div class="frame" title="As we proceeded, I recalled a similar situation"><img src="http://preview.zcool.com.cn/code/js/04/8/bl117.jpg" alt=""></div>
<div class="frame" title="The place was no example of resource efficient construction."><img src="http://preview.zcool.com.cn/code/js/04/8/bl112.jpg" alt=""></div>
<div class="frame" title="Ultracompaction had been caused by the linear vibrator."><img src="http://preview.zcool.com.cn/code/js/04/8/gr68.jpg" alt=""></div>
<div class="frame" title="We put the meter to use. It was the fully-built one."><img src="http://preview.zcool.com.cn/code/js/04/8/rd103.jpg" alt=""></div>
<div class="frame" title="Soon we accessed the restricted area."><img src="http://preview.zcool.com.cn/code/js/04/8/rd101.jpg" alt=""></div>
<div class="frame" title="The combo password was validated."><img src="http://preview.zcool.com.cn/code/js/04/8/gr66.jpg" alt=""></div>
<div class="frame" title="We succeeded to quantify the network."><img src="http://preview.zcool.com.cn/code/js/04/8/bl116.jpg" alt=""></div>
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
sP.init();
onresize = sP.resize;
</script>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
如何做网页效果图如何做网页效果图片
第一步:在制作静态网页之前，我们需要对网页进行1:1的渲染，也称为静态网页渲染。制作静态网页效果图可以通过破解中文版PhotoshopCS4来制作。第二步:PS切片制作好的静态网页效果图。通过PS切片，可以把一个大的渲染图切割成几个小图，以后可以直接用在网页上。第三步:使用HTML5和CSS3进行网页布局。网页...
网页设计应该怎么做效果更好
1、网页设计追求内容新颖网页的内容不能和大多数网站的内容相同或者相似，要追求新颖，这就需要我们坚守原则，善于动脑，不抄袭别人的内容，同时根据自己网站的主题，进行一些题材的创作，做出一个与众不同的网站。其实细心观察就会发现，很多人在网站上发布的东西杂乱无章，什么类容都有，题材大多相似。这...
网页设计动画效果怎么实现的?
你可以在动画效果中自定义关键帧，选择预设的动画效果，如淡入、滑入、弹入等。线性动画则包括缓入、缓出、缓动、线性回弹等，支持自定义。通过设置关键帧，你可以实现更加复杂的变化效果，点击眼睛图标可以查看关键帧的变化过程。每个动画默认有初始帧和结束帧，你还可以添加中间帧以实现更精细的动画效果。...
网页设计效果图如何做网页设计效果图如何做的
1、打开一个IE的浏览器的功能,进入到一个网页的页面上,在左上角的位置,点击“文件”选项的功能。 2、在弹出下拉菜单中,然后点击“另存为”的选项功能。 3、在保存到电脑时候,对保存类型进行修改,修改为“网页,全部(*.htm;*.html)”,这样就可以把网页全部网页内容保存下来,包括图片,js等内容, 4、保存的图片...
网页设计制作详细流程
效果图制作完毕后，首先需要进行切片。把网页比喻成一幅图，而切片工具就像是剪刀，使用切片工具可以把一张大图像裁剪成很多小图像。这样做目的之一是为了加快下载速度。因为IE浏览器是多线程的，同一时间可以下载3幅图像。切片的另外一个目的，也是最主要的目的是为了布局的需要。很多人不知道该如何对效果...
怎么样制作网页才能达到更好的效果
三、不断在网页上添加内容 相对于一个没有什么内容的网站，大家肯定更加愿意去内容丰富的网站。因此网页上需要持续不断的添加内容，从而能够让用户找到对自己有用的信息。怎么样制作网页才能达到更好的效果？现在大家知道了吧，只要按照以上的方法来操作的话，基本上问题就不大了。怎么样制作网页 ...
HTMLCSS做一个漂亮的网页?
一方面要实现同样的效果，只用HTML和DIV+CSS相对复杂，用的时间也多，会消耗更多的人力物力，另一方面也不利于维护。可以，可以先建一个个人博客网站，到阿里云申请个服务器。腾讯云好像能免费试用1个月。不行。用HTML做的全是静态网页。论坛需要服务器端编程，比如php，还需要数据库来存储数据。
一文带你了解:网页的灰色效果是如何实现的?
接下来，我们将分别介绍filter的三个实例：1. 模糊效果 2. 灰色效果 3. 改变对比度 通过对各大主流网站代码的分析，我们了解到，网页的灰色效果是利用CSS3中的filter属性实现的，同时它还可以实现其他图像处理效果，如模糊处理和对比度改变。大家可以亲自实践一下，检验自己是否掌握了这一技能。
怎样去做一个网站的效果图呢?求详细。。。
其实说来说去就是颜色搭配问题及图片布局，一般一个网站效果图都只是一个静态的页面而已，要图片格式的话，直接截个图就行了。所以只要知道布局及颜色搭配再就是懂设计技术基本上就可以做一个效果图了。当然你自己感觉创意不够的话，一般可以同过网络去搜索一下网站模板，可以去借鉴别人的设计风格之后在...
自己做的网页怎么自己做的网页怎么上传到网上
1.首先你要安装Dreamweaver软件，打开它启动它，然后点击创建一个html页面。2.设置表格中的行数和列数。3.单击“确定”以获得宽度为1000像素的表格。我们可以添加图片或文字作为bnner。4.在这里，让我们键入一行来演示。5.设置表格高度，左侧增加5列，分类导航。6.最后保存看看，按F12预览效果。7.文字...
长梵裕优： 这是用循环 将数据库里面的信息显示出来 是网页编程的基本语言 首先将企业名称用循环列出来 然后在这个循环里面再用循环将这个企业的招聘职位列出来 简单
巴南区15929135997： 请问一下这个网站的效果是怎么做出来的 - ？
长梵裕优： 事实上它并不是你所说的“两边”,而是一整张背景图,然后网页内容放在它上面,这样感觉就成了两边.它用的是背景固定,就是网页滚动时背景不滚动.代码在它的css.css文件中.B...
巴南区15929135997： 请教,这个网页效果是怎么做的. - ？
长梵裕优： 给这幅图片加个onmouseover事件,当鼠标移到图片上时,显示动画所在的div 再加个onnouseover事件,当鼠标离开图片,隐藏动画所在的div
巴南区15929135997： 这种网页效果怎么做?一张图片,它的周围有一圈光晕,这圈光晕每一秒 ？
长梵裕优： 1、制作一个Glow滤镜,CSS滤镜的设置方法请参看“CSS滤镜应用技巧”的有关文章.在此不再重复.不是使用Dreamweaver的网友,请把下面的代码复制到网页源代码...
巴南区15929135997： 请问这网页里的效果是怎么做的？
长梵裕优： 这个是采用的JS调用或者FLASH调用制作成的,FLASH就需要一个单独的FLASH文件了,.网上代码比较多的,你去找找看,名字就叫做首页图片书页转换,注意,和首页图片轮换不一样的,别找错了,呵呵. 别急,慢慢找,会有的.
巴南区15929135997： 在网页制作中,这个效果是如何弄出来的? - ？
长梵裕优： 如果楼主有网页制作基础,那就好解释了,这种有很多方法,当然,那电视机的图片素材你肯定要自己准备,或者弄成其他的也行,这种要是我做的话,可以用CSS+DIV来做,把尺寸算好,电视机等其他图片的大小,然后定义一些DIV标签,其中一个背景为 电视剧图片,然后在那个DIV中插入视频文件或者flash.
巴南区15929135997： 这样的网页透明效果是怎么做出来的! - ？
长梵裕优： 应该是用CSS的filter(滤镜效果)~ 第一种:加入带有颜色的遮罩一样的半透明效果. 源代码为: <STYLE type=text/css> .bodyBg {background:#transparent;filter:progid:DXImageTransform.Microsoft.gradient(GradientType ='1',enabled='true',...
巴南区15929135997： 这种网页效果是怎么做出来的? - ？
长梵裕优： 这个是通过超级链接里面用java特效控制的,---用实际行动迎接党的十七大 2007年8月27日
巴南区15929135997： 这种网页效果是怎样做出来的? - ？
长梵裕优： 看不大清楚.不过是动态产生的.鼠标移入移出特效.控制DIV的显示与隐藏.
巴南区15929135997： 求这个网页特效的制作方法？
长梵裕优： 其中这个不是什么特效,只是利用CSS样式控制了罢了,实现代码如下(注意加粗部分): <div style=＂width:100%;height:30px; line-height:30px; position:fixed; left:0; top:0;＂>永远在页面最上方</div>
