给家里的生意做了个网页,匆匆赶完后又帮某个body抓数据,还没来得及写下来就回家忙家里的事。
办手续、装修、搬东西、打扫卫生,终于停歇的时候因为没有宽带只能从早到晚窝在厨房折腾我的烤箱。
早上烤饼干,中午烤鸡,下午烤蛋糕,晚饭焗饭,夜宵布丁的生活对于我这种吃货来说相当充实。
只是没有宽带各种不方便,尤其是水果机的流量刷刷的跑,在5号那天就基本没流量了,只好用我妈的不支持后台程序的手机可怜巴巴的上着。
昨天回来把家里还缺的东西也买了,今天写个记录又是新的一段了。
先是网页,去论坛下了个华丽丽的源码,于是悲剧从此开始。
连IIS都不会配置的我求助了小菜以及晓晓童鞋,在他们热情帮助下终于配起来了,但是至今不能直接用网址打开,不知道为什么。
然后第一次正儿八经用dreamweaver,在我辛辛苦苦打了各种代码才发现可以直接拖控件的。。原谅只用frontpage做过网页的我吧。。。
华丽丽的网页是各种flash组成的,这是悲剧的根源。
在找到那个硕思闪客精灵7.0以后我才终于体会到什么叫磨刀不误砍柴工,太好用了哇。
如果只是替换图片、文字,7.0直接就搞定了,如果进一步修改就反编译成fla然后修改。
把文字图片改完以后本地看着挺像样了,于是去申请了域名和空间。
急急忙忙上传,却发现各种打不开。空间和域名不是同一家公司,来来回回问了好多次,终于搞定。
但是当第一个flash的1%跳到100%只用了一点点时间,然后在跳转首页的flash时,卡死了。。
黑色的,很久很久,久到我洗了个杯子上了个WC回来才慢悠悠的显示了首页那个flash。
当时就崩溃了。
于是把开场动画各种截短,但无奈发现在跳到首页的时候始终会卡住很久很久。
各种折腾以后终于放弃flash,改用web实现。
开场的小动画还是flash,但是首页只是普通的页面加了点效果。
主要有下面几个:
1 导航的按钮的效果用button样式来实现。
先定义样式。
button {
width:220px;
height:25px;
border:0;
text-align:center;
line-height:25px;
background:url(images/bnbblank.png);
color:#FC6;
font-size:18px;
font-weight:bold;
cursor:pointer;
}
button:hover {
background:url(images/bnb.gif);
color:#FFF;
}
bnbblank.png是全空白的,bnb.gif就是鼠标移到按钮上希望有的效果。
然后对应的<td>标签里面如下设置。
<td height="56" valign="bottom" background="images/image 55-3.png" style="background-repeat:no-repeat"><a href="链接.asp">
<button>链接名称</button>
</a></td>
这样单元格背景即背景图片,鼠标移过按钮则显示相应的效果,点击就是跳转的相应页面。
2 首页上切换图片的用jquery实现。
代码参考了别人的,但可能有相应修改。贴出来分享下。
<!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>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<style type="text/css"><!--
#banner {position:relative; width:773px; height:600px; border:1px solid #666; overflow:hidden; font-size:16px}
#banner_list img {border:0px;}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002;
margin:0; padding:0; bottom:3px; right:5px; height:20px}
#banner ul li { padding:0 8px; line-height:18px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background-color:#6f4f67;cursor:pointer; margin:0; font-size:16px;}
#banner_list a{position:absolute;} <! 让四张图片都可以重叠在一起
--></style>
</head>
<body>
<div id="banner">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="images/image 40.jpg" alt="p1" /></a>
<a href="#" target="_blank" diplay:none><img src="images/image 43.jpg" alt="p2" /></a>
<a href="#" target="_blank" diplay:none><img src="images/image 46.jpg" alt="p3" /></a>
<a href="#" target="_blank" diplay:none><img src="images/image 49.jpg" alt="p4" /></a>
</div>
</div>
<script type="text/javascript">// <![CDATA[
var t = n = 0, count;
$(document).ready(function(){
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner li").click(function() {
var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4
n = i;
if (i >= count) return;
$("#banner_list a").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(2000);
$(this).css({"background":"#be2424",'color':'#000'}).siblings().css({"background":"#6f4f67",'color':'#fff'});
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})
function showAuto()
{
n = n >=(count - 1) ? 0 : ++n;
$("#banner li").eq(n).trigger('click');
}
// ]]></script>
</body>
</html>
jquery文件要放在相应的目录下。图片切换的速度是可以自己调整的。
3 图片滚动即图片跑马灯的效果。
代码也是参考了别人的,但他们都是从右向左滚,我需要的是从下向上滚而已。
<style type="text/css">
img {border: none; }
ul,li {margin:0; padding:0;}
.ul_0 {width:auto; height:200px; float:left;}
.li_0 {width:1002px; height:564px; display:inline; float:left;}
.line {height:169px;}
#demo {overflow:hidden; width:1000px; height:169px; text-align:left; border:#999 solid 1px; padding:2px;}
</style>
<SCRIPT LANGUAGE="JavaScript" src="aa.js"></SCRIPT>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td>
<div id="demo">
<div class="line">
<ul class="ul_0" id="demo1">
<li class="li_0"><a href="#" target="_blank"><img src="images/P1000605.jpg" width="1002" height="564" alt="p1" /></a> </li>
<li class="li_0"><a href="#" target="_blank" diplay:none><img src="images/P1000744.jpg" width="1002" height="564" alt="p2" /></a> </li>
<li class="li_0"><a href="#" target="_blank" diplay:none><img src="images/P1010234.jpg" width="1002" height="564" alt="p3" /></a></li>
<!-- <li class="li_0"><a href="#" target="_blank" diplay:none><img src="images/image 49.jpg" alt="p4" /></a> </li>
--> </ul>
<ul class="ul_0" id="demo2"></ul>
</div>
</div>
</td></tr>
<script type="text/javascript">
var speed=80;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
var n = $("#demo1 li").length;
var m = $("#demo1 li").height() * n;
demo1.height(m);
$("div.line").height(2 * m);
demo2.html(demo1.html());
function Marquee(){
if(demo1.height()<=demo.height()) {demo2.remove();}
else{
if(demo.scrollTop()>=demo1.height()) {demo.scrollTop(0);}
else{demo.scrollTop(demo.scrollTop()+1);}
}
}
var MyMar=setInterval(Marquee,speed);
demo.mouseover(function() {
clearInterval(MyMar);
})
demo.mouseout(function() {
MyMar=setInterval(Marquee,speed);
})
</script>
</table>
这样是导航上方那块宽1002高169的地方作为可见窗口,总共有三张图片,宽度1002高度564,图片依次从下向上的滚动,类似于跑马灯的效果。
原本还有点击链接只刷新对应部分,导航和底部都不动,但似乎我看的方法浏览器兼容不大好,加上前面的修改使得加载速度在可以接受的范围内就作罢。
话说首页那些效果在safari、chrome、firefox、IE8和9都测试正常,但是据同学反应IE6、腾讯TT、360这些都不行,估计和内核有关。个人本来就很讨厌360以及TT,这次又让我多了一个讨厌的理由了。。。
网页部分到此结束。。。。
scrapy的在下一篇。