有关51特长长假前之一——网页部分[2012.5.17]_var demo = $("#demo")[0]; var demo1 = $("#demo1")[-CSDN博客

本文链接：https://blog.csdn.net/tutuguaiguai0427/article/details/7575190

给家里的生意做了个网页，匆匆赶完后又帮某个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的在下一篇。