编程

一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件。

实现的思路是通过编写hook图片的onclick事件的函数,在函数中对body追加div元素,再将传入的图片对象放入元素中,同时再监听div的onclilck事件,当捕捉到点击,再关闭(其实是隐藏)弹出的div。
通过在函数初始化的时候收集页面所有的img元素,再为每个img元素增加onclick=”picHook(this)”这条属性,这样当图片在被点击时,这个函数就能自动创建div蒙板背景,并获取被点击图片的宽度和高度,同时生成一个新的和图片一样大小的div来显示图片。当蒙板再次被点击时,hook事件再次响应,并将蒙板和图片div的style置为none,弹出的图片就被关闭了。
说起来很简单,做起来就更简单了,简单到只需要一个函数即可实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script>
function picHook(pic){
/*图片对象*/
var imgs = document.getElementsByTagName("img");
/*前景div*/
var light = document.getElementById('light') || document.createElement("div");
/*背景div*/
var bg = document.getElementById('bg') || document.createElement("div");
/*图片放大*/
var s_pic = document.getElementById('s_pic') || document.createElement("img");
/*css对象*/
var css = document.createElement("style");
/*css样式*/
var csstext = '\
.pic_bg{\
position: absolute;\
margin:0 auto; \
top: 0%;\
left: 0%;\
right: 0%;\
width: 100%;\
padding-bottom: 1000%;\
background-color: black;\
z-index:1001;\
opacity:.80;\
filter: alpha(opacity=80);\
overflow:scroll;\
}\

.pic_div {\
margin-bottom: auto;\
position: fixed;\
left:30%;\
top:20%;\
width: 100%;\
padding-top:25px;\
margin-left:-250px;\
margin-top:-100px;\
z-index:1002;\
}';
/*收集页面所有图片对象*/
for(i=0; i<imgs.length;i++){
imgs[i].setAttribute("onclick", "picHook(this)" );
}
css.type = "text/css";

/*关闭图像*/
if( !pic ){
bg.style.display = light.style.display = "none";
}

/*ie兼容*/
if(css.styleSheet){
css.styleSheet.cssText = csstext;
}else{
css.appendChild(document.createTextNode(csstext));
}

s_pic.setAttribute("id", "s_pic");
s_pic.setAttribute("src", pic.src);
s_pic.setAttribute("width","70%");
s_pic.setAttribute("height","65%");
s_pic.setAttribute("margin","0 auto");
s_pic.style.display = 'block';
light.setAttribute("id", "light");
light.setAttribute("class", "pic_div");
light.style.display = 'block';
light.appendChild(s_pic);
light.setAttribute("onclick", "picHook()");
bg.setAttribute("id", "bg");
bg.setAttribute("class", "pic_bg");
bg.setAttribute("onclick", "picHook()");
bg.style.display = light.style.display;
document.getElementsByTagName("head")[0].appendChild(css);
document.body.appendChild(bg);
document.body.appendChild(light);
}
</script>

将这段代码保存在页面的head中,再将body的onload事件绑定到picHook()函数,你的页面中就也可以实现图片点击弹出大图啦。
还存在一点小bug,主要是因为我不太熟悉css,导致div的样式做的有点难看。
css的样式我是直接声明在js里的,这样就不用再另外创建css文件了。
强迫症,没办法。
等有时间再琢磨琢磨css,优化下样式。

定义类

定义类的过程就是定义类的属性的过程。类的属性就是类的静态属性的简称,指类内包含的各项数据。类的服务被称为成员函数或方法。

继承(extends)

通过定义继承方法,子类可以获得父类的所有属性和方法。

接口(implements)

说明当前类中实现了哪个接口定义的功能和方法,是Java语言中实现多重继承的一种机制

修饰符

  • 访问控制符
  • 抽象类说明符
  • 最终说明符

类的属性

描述了类内部的信息,又称为类的静态属性。类属性为简单变量。

【修饰符】 变量类型 变量名【=变量初值】
【修饰符】 类名 对象名 【=new 类名(实际参数列表)】

若使用另一个类的对象作为当前类所定义的类的属性,要保证该对象所在的类在当前类中是可已被当前类所引用的

类属性的修饰符

  • 访问控制符
  • 静态修饰符static
  • 最终修饰符final
  • 易失修饰符volatile
  • 过渡修饰符transient

类的方法(成员函数)

用来规定类属性上的操作,实现类内部功能的机制,也是类与外界交互的窗口。

声明方法的语法:
【修饰符】返回值类型 方法名(参数列表)
Trows 例外名1,例外名2,… {
方法体:
局部变量声明;
语句序列;
}

方法的修饰符

  • 访问控制符
  • 静态修饰符static
  • 抽象修饰符abstract
  • 最终修饰符final
  • 同步修饰符synchronous
  • 本地修饰符native

类的构造函数

特殊之处:

  • 构造函数的方法名与类名相同
  • 构造函数没有返回类型
  • 构造函数的主要作用是完成对类对象的初始化工作

Java在声明类时,可以不定义构造函数,系统会自动为该类生成一个默认的构造函数,此时这个构造函数的名字与类名相同,没有任何形式参数,也不完成任何操作。

在创建一个类的新对象的同时,系统会自动调用该类的构造函数为新对象初始化。

类的访问控制符只有一个public

属性和方法的访问控制符有:

  • public
  • private
  • protected
  • private protected

对于同一个包中的类可以不需任何说明,方便的互相访问和引用。

在不同包中的类,只有他们都声明为public时,然后再在程序头部声明import后才可以被访问和引用相应的类。

publici修饰的类的属性称为公共属性,如果公共属性属于一个公共类,则可以被所有的其他类使用。

public修饰符会造成安全性和数据封装性下降,应尽量减少public属性的使用。

缺省访问控制符规定该类只能被同一个包中的类访问和引用,而不可以被其他包中的类引用,这种特性称为包访问性。

类内的属性和方法如果没有访问控制符来限定,也说明他们具有包访问性,可以被同一个包中的其他类所访问和调用。

用private修饰的属性或方法只能被该类自身所访问和修改,而不能被任何其他类,包括该类的子类来获取和引用。

procted修饰的属性可以被该类自身和包中的类访问。

静态属性

被static修饰的属性称为静态属性,静态属性是一个公共的存储单元。任何一个类的对象访问它时取到的都是相同的值,任何一个类的对象去修改它时,都是在对同一个内存单元做操作。

static修饰符修饰的属性是属于类的公共属性

static修饰符修饰的方法是属于整个类的方法

不用static修饰符修饰的方法是属于某个具体对象或实例的方法

声明一个方法的static至少有三重含义:

  • 调用这个方法时,应该使用类名做前缀,而不是某一个具体的对象名
  • 非static的方法是属于某个对象的方法,在这个对象创建时对象的方法在内存中拥有自己的专用代码段,而static的方法是属于整个类的,它在内存中的代码段将随着类的定义而分配和装载,不被任何一个对象专有。
  • static方法只能处理static类型的数据

静态初始化器

是由关键字static引导的一对大括号括起的语句组。

静态初始化器与构造函数的区别:
构造函数是对每个新创建的对象初始化,而静态初始化器是对每个类进行初始化。

构造函数是在用new运算符产生新对象时由系统自动执行,而静态初始化器则是在它所属的类加载入内存时由系统调用运行的。

不同于构造函数,静态初始化器不是方法,没有方法名,返回值和参数列表。

抽象类

当一个类被生命为abstract时,这个类被称为抽象类。

所谓抽象类就是没有具体实例对象的类。

抽象类是它所有子类的公共属性的集合。

使用抽象类的一大优点就是可以利用这些公共属性来提高开发和维护程序的效率。

最终类,最终属性,最终方法,终结器

  • 最终类
  • 如果一个类被final修饰符所修饰和限定,说明这个类不可能拥有子类

  • 最终属性

final就是用来修饰常量的修饰符,一个类的成员变量如果被声明为final,那么它的取值在程序的执行过程中都不会改变,也就是一个常量

用final修饰符说明常量时:

需要说明常量的数据类型

需要同时指出常量的具体取值

因为所有类的对象的常量成员,其数值都固定一致,为了节省空间,常量通常都被声明为static。

final修饰符所修饰的类方法,是功能和内部语句都不能被更改的最终方法,即是不能被当前类的子类重载的方法。

final方法固定所对应的具体操作,防止子类对父类关键方法的错误的重定义,保证了程序的安全性和正确性。

所有已被private修饰符限定为私有的方法,以及所包含在final类中的方法,都被缺省的认为是final的。

  • 终结器
  • 终结器是回收对象时执行的方法。

protected void finalize(){}

终结器是一个名为finalize的方法,没有产生列表和返回值。

volatile修饰符

被volatile修饰的类的属性可能同时被几个线程控制和修改,通常用来修饰受外部输入的属性。

环境:
Windows 10
Python 2.7.10

0x01 安装PyQt4
在这个页面下载,注意选对版本。
https://riverbankcomputing.com/software/pyqt/download
我选择的版本是 PyQt4-4.11.4-gpl-Py2.7-Qt4.8.7-x64.exe

0x02 编写测试脚本

1
2
3
4
5
6
7
8
9
import sys
from PyQt4 import QtGui

app = QtGui.QApplication(sys.argv)
widget = QtGui.QWidget()
widget.resize(250, 150)
widget.setWindowTitle('PyQt')
widget.show()
sys.exit(app.exec_())

如果成功运行并弹出一个空白的窗口,说明PyQt4已经安装上了。

0x03 使用PyQt4的QtWebKit实现解析Dom

待续。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×