用js实现的仿sohu博客更换页面风格(简单版)


Posted in Javascript onMarch 22, 2007
prowin.js /** 
* @author ldgmc 
*/ 
function PopWin(id,width,title){ 
    this.id=id; 
    this.width=width; 
    this.title=title; 
    this.createIns=function(){ 
        var ins=document.createElement("div"); 
        ins.className="popWin"; 
        ins.id=this.id; 
        ins.style.width=this.width+'px'; 
        return ins;     
    }; 
    this.items=new Array(); 
    this.instance=this.createIns(); 
    this.init=function(){ 
        this.addTitle(this.title); 
        document.body.appendChild(this.instance); 
    } 
    this.addTitle=function(title){ 
        var titleDiv=document.createElement("div"); 
        titleDiv.className="title"; 
        var titleText=document.createTextNode(title); 
        titleDiv.appendChild(titleText); 
        this.instance.appendChild(titleDiv); 
    } 
    this.addItem=function(id,title){ 
        this.items[id]={}; 
        this.items[id]["title"]=ldg.common.setClassName("div","itemTitle"); 
        this.items[id]["title"].appendChild(document.createTextNode(title)); 
        this.items[id]["content"]=ldg.common.setClassName("div","itemContent"); 
        this.items[id]["title"].id=id; 
        ldg.event.addEvent(this.items[id]["title"],"mouseover",this.mouseover.bindAsEventListener(this)) 
        ldg.event.addEvent(this.items[id]["title"],"mouseout",this.mouseout.bindAsEventListener(this)); 
        ldg.event.addEvent(this.items[id]["title"],"click",this.click.bindAsEventListener(this)); 
        this.instance.appendChild(this.items[id]["title"]); 
        this.instance.appendChild(this.items[id]["content"]); 
    } 
    this.addItemContent=function(parentId,imgUri,cssUri,isLast){ 
        var itemDiv=ldg.common.setClassName("div","item"); 
        var itema=document.createElement("a"); 
        itema.href="#"; 
        var itemImg=document.createElement("img"); 
        itemImg.src=imgUri; 
        itemImg.css=cssUri; 
        ldg.event.addEvent(itemImg,"click",this.changeLink.bindAsEventListener(this));     
        itema.appendChild(itemImg); 
        itemDiv.appendChild(itema); 
        this.items[parentId]["content"].appendChild(itemDiv); 
        if(isLast){ 
            this.items[parentId]["content"].appendChild(document.createElement("br")); 
        } 
    }                                           
    this.changeLink=function(e){ 
        var eObj=e.srcElement || e.target; 
        var link=document.getElementsByTagName("link"); 
        link[1].href=eObj.css; 
    } 
    this.mouseover=function(e){ 
        var eObj=e.srcElement || e.target; 
        eObj.style.backgroundColor="#e5e5e5"; 
    } 
    this.mouseout=function(e){ 
        var eObj=e.srcElement || e.target; 
        eObj.style.backgroundColor="#EEEEEE"; 
    } 
    this.click=function(e){ 
        var eObj=e.srcElement || e.target; 
        var item=this.items[eObj.id]["content"]; 
        item.style.display=="block"?item.style.display="none":item.style.display="block"; 
    } 
    this.init(); 

ldg.js 
var ldg=window.ldg || {} 
Array.prototype.append=function(item){ 
    this[this.length]=item 
} 
Function.prototype.bindAsEventListener=function(obj){ 
    var _method=this; 
    return function(event){ 
        return _method.call(obj,event || window.event); 
    } 
} 
ldg.event={ 
    addEvent:function(obj,evType,fun){ 
        if(obj.addEventListener){ 
            obj.addEventListener(evType,fun,false); 
            return true; 
        }else if(obj.attachEvent){ 
            obj.attachEvent("on"+evType,fun); 
            return true; 
        }else{return false} 
    } 
} 
ldg.common={ 
    $:function(id){ 
        return document.getElementById(id);     
    }, 
    setClassName:function(eleType,className){ 
        var element=document.createElement(eleType) 
        element.className=className; 
        return element; 
    } 
}

<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>testBlog</title> 
        <link rel=stylesheet type=text/css href="css/window.css"> 
        <link rel=stylesheet type=text/css href="css/bg.css"> 
        <script src="js/prpwin.js"></script> 
        <script src="js/ldg.js"></script> 
        <script> 
            window.onload=function(){         
                var pop=new PopWin(1,440,"标题"); 
                pop.addItem(1,"默认主题"); 
                pop.addItem(2,"2222"); 
                pop.addItem(3,"3333"); 
                pop.addItem(4,"4444"); 
                pop.addItemContent(1,"images/1.gif","css/bg2.css"); 
                pop.addItemContent(1,"images/2.gif","css/bg3.css"); 
                pop.addItemContent(1,"images/3.gif","css/bg4.css"); 
                pop.addItemContent(1,"images/4.gif","css/bg5.css"); 
                pop.addItemContent(1,"images/5.gif","css/bg6.css"); 
                pop.addItemContent(1,"images/1.gif","css/bg7.css"); 
                pop.addItemContent(1,"images/2.gif","css/bg8.css"); 
                pop.addItemContent(1,"images/3.gif","css/bg9.css"); 
                pop.addItemContent(1,"images/4.gif","css/bg0.css"); 
                pop.addItemContent(1,"images/5.gif","css/bg4.css"); 
                pop.addItemContent(1,"images/6.gif","css/bg2.css",true); 
                pop.addItemContent(2,"images/7.gif","css/bg8.css"); 
                pop.addItemContent(2,"images/8.gif","css/bg6.css"); 
                pop.addItemContent(2,"images/9.gif","css/bg3.css"); 
                pop.addItemContent(2,"images/10.gif","css/bg2.css"); 
                pop.addItemContent(2,"images/11.gif","css/bg6.css"); 
                pop.addItemContent(2,"images/12.gif","css/bg4.css",true); 
                pop.addItemContent(3,"images/13.gif","css/bg9.css");     
                pop.addItemContent(3,"images/14.gif","css/bg1.css");     
                pop.addItemContent(3,"images/15.gif","css/bg7.css",true); 
                pop.addItemContent(4,"images/4.gif","css/bg9.css"); 
                pop.addItemContent(4,"images/5.gif","css/bg3.css"); 
                pop.addItemContent(4,"images/1.gif","css/bg5.css"); 
                pop.addItemContent(4,"images/2.gif","css/bg2.css"); 
                pop.addItemContent(4,"images/3.gif","css/bg3.css"); 
                pop.addItemContent(4,"images/4.gif","css/bg0.css"); 
                pop.addItemContent(4,"images/5.gif","css/bg7.css"); 
                pop.addItemContent(4,"images/1.gif","css/bg4.css"); 
                pop.addItemContent(4,"images/2.gif","css/bg3.css"); 
                pop.addItemContent(4,"images/4.gif","css/bg7.css"); 
                pop.addItemContent(4,"images/5.gif","css/bg1.css"); 
                pop.addItemContent(4,"images/4.gif","css/bg1.css",true); 
            }         </script> 
    </head> 
    <body> 
    </body> 
</html>
Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
childNodes.length与children.length的区别
May 14 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
浅析vue深复制
Jan 29 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
漂亮的提示信息(带箭头)
Mar 21 #Javascript
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 #Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 #Javascript
表单提交时自动复制内容到剪贴板的js代码
Mar 16 #Javascript
用javascript自动显示最后更新时间
Mar 15 #Javascript
用js实现预览待上传的本地图片
Mar 15 #Javascript
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 #Javascript
You might like
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python轻松实现代码编码格式转换
2015/03/26 Python
python图片验证码生成代码
2016/07/02 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python命令行参数用法实例分析
2019/06/25 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
如何实现一个自定义类的序列化
2012/05/22 面试题
竞聘演讲稿
2014/04/24 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
SpringBoot整合Minio文件存储
2022/04/03 Java/Android
nginx日志格式分析和修改
2022/04/28 Servers
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android