标签新闻列表～
news.js
程序代码
/*预读取图片*/
function PreloadImages() {
var d=document;
if(d.images){
if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=PreloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){
d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
}
}
}/*显示选定的菜单*/
function selectMenu(obj){
var selected = document.getElementById(“nav”).getElementsByTagName(“li”);
var selectedLength = selected.length;
for(i=0; i<selectedLength; i++){
if(selected[i].getElementsByTagName(“a”)[0].className==“currentMenu”){
selected[i].getElementsByTagName(“a”)[0].className = “”;
}
}
obj.className = “currentMenu”;
}
/*隐藏/显示新闻列表*/
function tagNews(obj,id){
selectMenu(obj);
for (var i =1; j=document.getElementById(“page”+i); i++){
j.style.display=“none”;
}
document.getElementById(“page”+id).style.display=“block”;
}
/*打开网页时响印的事件*/
window.onload = function(){
PreloadImages();
}
接近完成了～
还是没有办法分离html和js
在a中通过onmouseover调用tagNews函数
到底是js没有办法用面向对象的方法写函数
还是别的什么原因，
把onmouseover封装到js里时，
参数的传递总出些莫名其妙的问题～
滑动新闻栏～
信息量大了以后，版面是有限的～
横向满了，纵向来改进～
这种借鉴C/S系统中的滚动栏能很好的解决问题
moveElement.js
程序代码
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = “0px”;
}
if (!elem.style.top) {
elem.style.top = “0px”;
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + “px”;
elem.style.top = ypos + “px”;
var repeat = “moveElement(’”+elementID+“‘,”+final_x+“,”+final_y+“,”+interval+“)”;
elem.movement = setTimeout(repeat,interval);
}
prepareSlideshow.js
程序代码
function prepareSlideshow() {
// Make sure the browser understands the DOM methods
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
// Make sure the elements exist
if (!document.getElementById(”linklist”)) return false;
var slideshow = document.createElement(”div”);
slideshow.setAttribute(”id”,”slideshow”);
var preview = document.createElement(”img”);
preview.setAttribute(”src”,”topics.gif”);
preview.setAttribute(”alt”,”building blocks of web design”);
preview.setAttribute(”id”,”preview”);
slideshow.appendChild(preview);
var list = document.getElementById(”linklist”);
insertAfter(slideshow,list);
// Get all the links in the list
var links = list.getElementsByTagName(”a”);
// Attach the animation behavior to the mouseover event
links[0].onmouseover = function() {
moveElement(”preview”,-100,0,10);
}
links[1].onmouseover = function() {
moveElement(”preview”,-200,0,10);
}
links[2].onmouseover = function() {
moveElement(”preview”,-300,0,10);
}
}
addLoadEvent(prepareSlideshow);[/color]
addLoadEvent.js
程序代码
Apollo的对手是Firefox～
The Coming Apollo vs. Firefox Battle
在她的文章(原文)中指出，apollo一出世就正面与firefox交上火了～
虽然，到目前为止我还没用上apollo，但从种种报道上我有一种感觉—–apollo的对手不止WPF，还有firefox和yahoo的widget，它们都是一类东西～
在Anne文章后面adobe的John Dowell马上出来指出，不要把apollo写的如此有敌意～
但无疑在WPF还没出来之前，apollo已经正面于firefox交上交了～
这两种东西，都是在经历C/S和B/S各种优缺点之后的集大成者。具有Browse的易部署性，也具有Client的强大功能。
我以前写过一篇文章<<选B/S还是C/S>>，讲述了这么一件事。
一个用户以前用foxpro搞的一套管理系统，因为用得太久问题已经很多了，如是想转入web上信息系统。 不过web搭建好了，马上有出了问题。
web中输入信息，每一次都要刷新一次，这样太慢完不成每天巨大的信息输入量。相信即使用现在最时髦的ajax,在这种应用中也来得没有C/S快～
但是如果用户固定用firefox这种浏览器，输入速度的问题就可以解决了。可以开发一个firefox的插件，使用起来就如同C/S模式一般快速。但的的确确，这种应用是构架在web系统上的。
现有的del.icio.us的firefox插架已经做得很完美了，正是一上很好的例子～
在apollo和firefox 3.0的特性说明中，都出现了同一特性。
可以offline使用————-可以离线始用了～
这在很多应用中具有很大的意义，并不是说不受带宽，网速的影响了，而是从根本上改变了人们印象中web交互性和可访问性很差的形象。web系统的实用性必将大大增强。
标准的魅力～
结构，表现，行为的分离带来什么好处呢～
看看这个～
这是今天的网易头条，重庆钉字户的评论～
我估计网易的标准工程师也没想到这种效果，
民众意见空前统一，无比的支持
一个网户的评论
造成了这种如雄伟的大山般的宏伟效果～
估计设计这种表现时，工程师考虑的只是突出
评论时，引用和评论的主次效果，将margin设置为5~
但没有想到海量的引用同一条评论时会产生
如此一种视觉语言
壮观～
形中又无形地突出的语言的神韵
达到了很好的人机交互的效果～
受众网友支持的评论而突击的
就是这一条评论～
