热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

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

prowin.js

/**
* @author ldgmc
*/
function PopWin(id,width,title){
    this.id=id;
    this.div");
        ins.className="popWin";
        ins.id=this.id;
        ins.style.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;
    }
}

代码如下:
    
        
        
        
        
        
        
        
    
    

    



推荐阅读
  • selenium通过JS语法操作页面元素
    做过web测试的小伙伴们都知道,web元素现在很多是JS写的,那么既然是JS写的,可以通过JS语言去操作页面,来帮助我们操作一些selenium不能覆盖的功能。问题来了我们能否通过 ... [详细]
  • 本文由公众号【数智物语】(ID: decision_engine)发布,关注获取更多干货。文章探讨了从数据收集到清洗、建模及可视化的全过程,介绍了41款实用工具,旨在帮助数据科学家和分析师提升工作效率。 ... [详细]
  • 本文由chszs撰写,详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤,适合希望深入了解Mina框架应用的开发者。 ... [详细]
  • 本文提供了一个关于AC自动机(Aho-Corasick Algorithm)的详细解析与实现方法,特别针对P3796题目进行了深入探讨。文章不仅涵盖了AC自动机的基本概念,还重点讲解了如何通过构建失败指针(fail pointer)来提高字符串匹配效率。 ... [详细]
  • 本报告记录了嵌入式软件设计课程中的第二次实验,主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作,加深了对嵌入式系统硬件接口编程的理解。 ... [详细]
  • LeetCode 102 - 二叉树层次遍历详解
    本文详细解析了LeetCode第102题——二叉树的层次遍历问题,提供了C++语言的实现代码,并对算法的核心思想和具体步骤进行了深入讲解。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • JavaScript 中引号的多层嵌套使用技巧
    本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
  • 解决UIScrollView自动偏移问题的方法
    本文介绍了一种有效的方法来解决在使用UIScrollView时出现的自动向下偏移的问题,通过调整特定的属性设置,可以确保滚动视图正常显示。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
  • Awk是一款功能强大的文本分析与处理工具,尤其在数据解析和报告生成方面表现突出。它通过读取由换行符分隔的记录,并按照指定的字段分隔符来划分和处理这些记录,从而实现复杂的数据操作。 ... [详细]
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
author-avatar
华女-1_572
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有