终于解决了一点问题

来源：互联网发布：通用版读书软件下载编辑：程序博客网时间：2024/06/09 19:40

在个人网站的制作中，终于感受到css+div以及js都不是好驾驭的，今天解决了动态切换图片、动态改变css样式还有鼠标跟随。

下面是代码，同大家分享：

Code:

// 动态切换css样式
function $(obj){
return document.getElementById(obj);
}
var skin={};
skin.addEvent=function(){
var skins =$("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i++)
{
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
skin.setCookie=function(n){
var expires=new Date();
expires.setTime(expires.getTime()+24*60*60*365*1000);
var flag="Skin_Cookie="+n;
document.cookie=flag+";expires="+expires.toGMTString();
}
skin.readCookie=function(){
var skin=0
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name+"=");
if(start1==-1){
skin=0;
}
else{
var start=mycookie.indexOf("=",start1)+1;
var end=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;
}
skin.setSkin=function(n){
var skins =$("skin").getElementsByTagName("li");
skin.setCookie(n);
$("cssfile").href="c"+n+".css";
}
window.onload=function(){
skin.setSkin(skin.readCookie());
skin.addEvent();
}
//鼠标样式
var x,y; //鼠标当前在页面上的位置
var step=10; //字符显示间距，为了好看，step=0则字符显示没有间距
var flag=0;
var message=" Welcome to coobr!"; //跟随鼠标要显示的字符串
message=message.split(""); //将字符串分割为字符数组
var xpos=new Array() //存储每个字符的x位置的数组
for (k=0;k<message.length;k++) {
xpos[k]=-50;
}
var ypos=new Array() //存储每个字符的y位置的数组
for (k=0;k<message.length;k++) {
ypos[k]=-50;
}
for (k=0;k<message.length;k++) { //动态生成显示每个字符span标记,
//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
document.write("<span id='span"+k+"' class='spanstyle' style='color:#999; z-index:2'>");
document.write(message[k]);
document.write("");
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1;
}
function makesnake() { //重定位每个字符的位置
if (flag==1 && document.all) { //如果是IE
for (k=message.length-1; k>=1; k--) {
xpos[k]=xpos[k-1]+step; //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
//这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
ypos[k]=ypos[k-1]; //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
}
xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
ypos[0]=y
//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
// 该算法显示字符串就有点象人类的游行队伍一样，
for (k=0; k<=message.length-1; k++) {
var thisspan = eval("span"+(k)+".style"); //妙用eval根据字符串得到该字符串表示的对象
thisspan.posLeft=xpos[k];
thisspan.posTop=ypos[k];
}
}
else if (flag==1 && document.layers) {
for (k=message.length-1; k>=1; k--) {
xpos[k]=xpos[k-1]+step;
ypos[k]=ypos[k-1];
}
xpos[0]=x+step;
ypos[0]=y;
for (k=0; k<=message.length-1; k++) {
var thisspan = eval("document.span"+k);
thisspan.left=xpos[k];
thisspan.top=ypos[k];
}
}
var timer=setTimeout("makesnake()",10) //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;