14 Comments
04 7 月 2014

宣告回来，域名转回万网

这几个月事情多，我成功成为硕士了。

域名从crazydomains转移到万网了。超级方便转移。所以大胆的注册crazydomains的便宜域名吧，挺靠谱的。

3 Comments
29 3 月 2014

Ebury 侵入 SSH 导致中毒

在 v2ex上看到的

侵入了 SSH 服务器，会开后门，偷走所有经过本机的 SSH 用户名密码、密钥等
在本机运行ipcs -m，如果发现666权限，超过3M的空间那就是中毒了
介绍里还有一句很重要：
The network of cPanel Inc.’s support department was compromised and machines used for connecting to customers’ servers were found to be infected with Ebury [3].

赶紧检查了一下自己的，显示如下：

1
2
3
 
~ ipcs -m
------ Shared Memory Segments --------
key shmid owner perms bytes nattch status

如果显示是空的，那么就没中招；大于26k 且666权限的基本就是中招了。

4 Comments
20 3 月 2014

jQuery动态改变图片显示大小

当我们要显示后台传过来若干个尺寸不一的图片时，为了保证图片大小的一致性及比例的协调，需要动态改变图片显示尺寸。通过搜索，我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持在一定范围内，如果图片的原始尺寸都大于max*值，则显示出来的图片宽度都相等。

原始代码：

 

01 $(document).ready(function() {
02      $('.post img').each(function() {
03      var maxWidth = 100; // 图片最大宽度
04      var maxHeight = 100;    // 图片最大高度
05      var ratio = 0;  // 缩放比例
06      var width = $(this).width();    // 图片实际宽度
07      var height = $(this).height();  // 图片实际高度
08   
09      // 检查图片是否超宽
10      if(width > maxWidth){
11          ratio = maxWidth / width;   // 计算缩放比例
12          $(this).css("width", maxWidth); // 设定实际显示宽度
13          height = height * ratio;    // 计算等比例缩放后的高度
14          $(this).css("height", height);  // 设定等比例缩放后的高度
15      }
16   
17      // 检查图片是否超高
18      if(height > maxHeight){
19          ratio = maxHeight / height; // 计算缩放比例
20          $(this).css("height", maxHeight);   // 设定实际显示高度
21          width = width * ratio;    // 计算等比例缩放后的高度
22          $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
23      }
24  });
25  });

 

在我的js代码中，也采取了这种写法。然而在不同的浏览器测试效果时，发现此种写法不能适应chrome浏览器（chrome版本号为10.0.648.204），会产生图片以原有尺寸显示出来的bug。后来把$(‘.post img’).each()的代码用$(window).load()方法包装起来，就解决了chrome浏览器显示不正确的问题。那么在chrome浏览器中为什么会产生bug，并且$(document).ready和$(window).load有什么区别呢？

 

原来document ready事件是在HTML文档载入即DOM准备好就开始执行了，即使图片资源还没有加载进来。而window load事件执行的稍晚一些，它是在整个页面包括frames, objects和images都加载完成后才开始执行的。从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法处理时，图片载入与动态改变图片的js代码执行顺序不确定。

关于上面的代码,放到我的页面中时获取图片高度时会报错,提示没有提供width方法：

 

1 var width = $(this).width();    // 图片实际宽度
2 var height = $(this).height();  // 图片实际高度

 

故修改代码如下：

 

01 jQuery(window).load(function () {
02             jQuery("div.product_info img").each(function () {
03                 DrawImage(this, 680, 1000);
04             });
05         });
06         function DrawImage(ImgD, FitWidth, FitHeight) {
07             var image = new Image();
08             image.src = ImgD.src;
09             if (image.width > 0 && image.height > 0) {
10                 if (image.width / image.height >= FitWidth / FitHeight) {
11                     if (image.width > FitWidth) {
12                         ImgD.width = FitWidth;
13                         ImgD.height = (image.height * FitWidth) / image.width;
14                     } else {
15                         ImgD.width = image.width;
16                         ImgD.height = image.height;
17                     }
18                 } else {
19                     if (image.height > FitHeight) {
20                         ImgD.height = FitHeight;
21                         ImgD.width = (image.width * FitHeight) / image.height;
22                     } else {
23                         ImgD.width = image.width;
24                         ImgD.height = image.height;
25                     }
26                 }
27             }
28         } 
2 Comments
20 3 月 2014

Eclipse出现failed to create the java virtual machine

有时候重装系统之后会发现eclipse很意外的打不开，出现failed to create the java virtual machine的这种情况

 

“failed to create the java virtual machine”

对于这种情况的解决方法很简单，原因是计算机的内存不足。可以通过修改eclipse的配置文件来解决这种情况～

首先进入到eclipse的安装文件夹，打开 eclipse,ini 文件，找到–launcher.XXMaxPermSize  256M  将256M改成128M即可以正常打开eclipse了（注：一共有两处，两处都要修改！！）

 

修改后的文件如下所示：
-startup
plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar
–launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.0.v20100503
-product
org.eclipse.epp.package.jee.product
–launcher.defaultAction
openFile
–launcher.XXMaxPermSize
128M
-showsplash
org.eclipse.platform
–launcher.XXMaxPermSize
128m
–launcher.defaultAction
openFile
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m

 

源文件如下：
-startup
plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar
–launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.0.v20100503
-product
org.eclipse.epp.package.jee.product
–launcher.defaultAction
openFile
–launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
–launcher.XXMaxPermSize
256m
–launcher.defaultAction
openFile
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m

2 Comments
11 3 月 2014

实习—JQuery 自动触发事件

JQuery

常用模拟

有时候，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。

在JQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。

1 $('#btn').trigger("click");

这样，当页面加载完毕后，就会立刻输出想要的效果。也可以直接简写click()，来达到同样的效果：

1 $('#btn').click();

触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件，JQuery代码如下：

1 $('#btn').bind("myClick", function(){  
2      $('#test').append("<p>我的自定义事件.</p>");  
3  });

想要触发这个事件，可以使用以下代码来实现：

1 $('#btn').trigger("myClick");

传递数据

trigger(type[，data])方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

下面是一个传递数据的例子。

1 $(function(){  
2    $('#btn').bind("myClick", function(event, message1, message2){  
3                  $('#test').append( "<p>"+message1 + message2 +"</p>");  
4     });  
5    $('#btn').click(function(){  
6         $(this).trigger("myClick",["我的自定义","事件"]);  
7    }).trigger("myClick",["我的自定义","事件"]);  
8 })

执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。例如：

1 $("input").trigger("focus");

以上代码不仅会触发为<input>元素绑定的focus事件，也会使<input>元素本身得到焦点（这是浏览器的默认操作）。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。

1 $("input").triggerHandler("focus");

该方法会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点。

一条评论
06 3 月 2014

实习之frameset常用属性

frame作为html语言中的一部分，在网页制作中占据着重要的地位。大家看到很多网页上都好像windows下的资源管理器一样，在左边点击相应的链接，右边就会有相应的网页显示。就如我们进入邮箱的时候一样。这些都是使用frame的结果。

下面我来给大家介绍frame的具体使用方法。

使用frame必须首先用frameset来定义，可以说frameset就是frame的一个“统治者”。在html文档中，可以有frameset元素或者body元素，但是绝对不能同时使用这两种元素。

 

frameset元素的使用：

(1) <html>

(2) <head><title>frameset元素的使用</title></head>

(3) <frameset>

(4) <frame>

(5) <frame>

(6) </frameset>

(7) </html>

当然了，这个html文档在浏览器上什么也显示不出来。只是告诉大家最基本的frameset及frame的使用方法。

frameset是确定网页分框的定义，其属性rols及rows、border将在下面给大家介绍。

frame是frameset定义的每个“网页分框”的定义，其属性name、scrolling及noresize、marginHeight及marginWidth、frameborder也将在下面给大家介绍。

frameset元素的cols及rows属性

属性说明：cols及rows的作用是设置frame的宽度及高度

 

 

(1) <html>

(2) <head><title>frameset元素中cols及rows属性的使用</title></head>

(3) <frameset cols=”20%,200,*”>

(4) <frame>

(5) <frameset rows=”30%,*”>

(6) <frame>

(7) <frame>

(8) </frameset>

(9) <frame>

(10) <frame>

(11) </frameset>

(12) </html>

 

示例说明： 第三行中的语句cols=”20%,400,*” 定义了浏览器中frame的“列数”。20%说明最左边的frame占据整个浏览器宽度的百分比，400说明中间的frame占据整个浏览器的宽度是400个像素，*则说明除去左边和中间的frame以外的地方，其余全部留给最右边的frame。第4、9、10行的frame是<frameset cols=”20%,400,*”>语句定义后的每个“框架”的各自定义。同样，第6、7行的frame是<frameset rows=”30%,*”>语句所定义的“框架”的各自定义。

第二个frameset定义在一个frame之内，大家也从浏览器的结果看来了，横向的“框架”只出现在最中间的列向“框架”之中。可以试图改变浏览器窗口的大小，就可以看出中间的frame的宽度是始终不变的，大小总是400像素。最左边的frame所占的比例总是总宽度的20%，剩下的宽度就留给了最右边的frame。横向frame同理。

frameset元素的border属性

 

属性说明：设置frame之间的距离，包括3-D边框

(1) <html>

(2) <head><title> frameset元素中border属性的使用</title></head>

(3) <frameset cols=”20%,60%,*” border=10>

(4) <frame>

(5) <frame>

(6) <frame>

(7) </frameset>

(8) </html>

 

示例说明：frame之间的宽度现在为10个像素。 如果定义border属性的值为0，则在浏览器中将不会看到边界。同样，framespacing也可以设定frame之间的宽度，只不过framespacing设定的是附加的空间。

另外：bordercolor属性作用是设定边框的颜色，颜色值为标准RGB颜色值。

 

frame元素的name属性

属性说明：设置frame的名字

 

(1) <html>

(2) <head><title> frame元素中name属性的使用</title></head>

(3) <frameset cols=”50%,*”>

(4) <frame name=”left” src=”html语言教程1.htm”>

(5) <frame name=”right” src=”html语言教程2.htm”>

(6) </frameset>

(7) </html>

 

说明：框架的名称并不会影响到框架内显示的内容，名称的作用是指定相应框架链接的显示内容。

frameset元素的scrolling属性及noresize属性

属性说明：

 

scrolling:决定frame是否可以使用滚动条

noresize:决定frame是否可以改变大小

(1) <html>

(2) <head><title> frame元素中scrolling属性及noresize属性的使用</title></head>

(3) <frameset cols=”30%,40%,*”>

(4) <frame name=”left” src=”html语言教程1.htm” scrolling=no>

(5) <frame name=”center” src=”html语言教程2.htm” noresize=true>

(6) <frame name=”right” src=”html语言教程3.htm” scrolling=yes>

(7) </frameset>

(8) </html>

 

示例说明：左边的frame使用了scrolling=no的属性，则无论需要显示的页面有多大，都不会有滚动条出现。中间的frame使用了noresize=true属性，这用户不能调整frame的大小（大家可以看到以前例子中的frame是可以调整大小的）。最右边的frame使用了scrolling=yes的属性，在这里大家看得不是很清楚，如果需要显示的页面过小，就是说不需要滚动条也能够显示出全部，则此时最右边的frame也是拥有滚动条的。默认情况下，scrolling的值是auto。而noresize是一个布尔型的变量，当为true时，不能改变frame的大小；为false时(默认情况)，可以改变frame的大小。

frameset元素的marginHeight属性及marginWidth属性

属性说明：

 

marginHeight:设定在显示frame中的文字之前文字距离顶部及底部的空白距离

marginWidth:设定在显示frame中的文字之前文字距离左右两边的空白距离

(1) <html>

(2) <head><title> frame元素中marginHeight属性及marginWidth属性的使用</title></head>

(3) <frameset cols=”50%,*”>

(4) <frame name=”left” src=”html语言教程1.htm” marginHeight=60 marginWidth=30>

(5) <frame name=”right” src=”html语言教程2.htm”>

(6) </frameset>

(7) </html>

示例说明：左边的框架中文字与上下底边都有60像素的空间空白，与左右两边都有30像素的空间空白。右边的框架没有使用这一属性，所以就没有空间空白。

 

frameset元素的frameborder属性

属性说明：决定是否在frame中显示边界。可以使用的值有四个，分别是1、0、no、yes。frameborder值为1或者yes，则会显示框线；frameborder值为0或者no，则不会显示框线。frameborder的默认值为1。

浮动框架的制作

浮动框架，就好像一个文档之中又嵌入了一个文档，或者可以说成是一个浮动的frame。制作这样的文档需要用到iframe元素。iframe基本的语法格式如下

<IFRAME ID=IFrame1 FRAMEBORDER=0 SCROLLING=NO SRC=”sample.htm”></IFRAME>

需要注意的是iframe与frameset不同，其可以与body元素共同出现在同一篇文档之中。

(1) <html>

(2) <head><title> 浮动框架的使用</title></head>

(3) <body>

(4) <h1>浮动框架的使用</h1><hr>

(5) <iframe name=”inside” src=”html语言教程1.htm” height=300 width=200 align=right>

(6) </iframe>

(7) <p>右边显示的是《html语言教程1》中的内容。现在就好像是在这个网页中又嵌入了另外的一个网页。使用的就是iframe元素。这样可以使网页的可视性加强，对于讲解、说明等特定网页十分适合。</p>

(8) </body>

(9) </html>

示例说明：iframe的作用就是在网页中标记出一块区域，使得这块区域可以显示其他内容。iframe元素中的各种常用属性，border、frameBoder、marginHeight、marginWidth、scrolling等，与frame中的用法相同，不再重复。

超链接与框架的制作

经过前面艰苦的学习，下面开始让我们一步一步地制作类似于访问邮箱的网页。

首先：我需要说明个部分的html文件，详见下表：

HTML文件

说明

main.htm 主页面，分为左右两个框架

host.htm 左边框架所显示的内容。用于索引文件之用，点击其中不同的链接，右边框架会显示不同的内容。

html语言教程1.htm 在右边框架中准备需要显示的内容

html语言教程2.htm

html语言教程3.htm

在这个例子中，在左边的框架中设定了三个超链接。在右边框架中需要显示的就有三个网页。就是说左边框架中的内容是不会变的，右边框架是真正的“显示区域”，其内容根据左边框架中点击超链接的不同而不同。这样，左边的框架就好像一个目录一样，点击不同的链接，右边框架会显示不同的内容。

下面我来告诉大家各个网页的制作方法。

 

main.htm

(1) <html>

(2) <head><title>超链接与框架的制作</title></head>

(3) <frameset cols=”20%,*”>

(4) <frame name=”index” src=”host.htm”>

(5) <frame name=”content” src=”html语言教程1.htm”>

(6) </frameset>

(7) </html>

host.htm

(1) <html>

(2) <head><title>超链接与框架的制作</title></head>

(3) <body>

(4) <a href=”html语言教程1.htm” target=”content”>html语言教程1</a><br />

(5) <a href=”html语言教程2.htm” target=”content”>html语言教程2</a><br />

(6) <a href=”html语言教程3.htm” target=”content”>html语言教程3</a>

(7) </body>

(8) </html>

 

在左边框架中点击不同的链接，可以看到右边框架会显示不同的内容。同时，可以在“html语言教程1.htm”的最后加入下面的语句：

<a href=”html语言教程1.htm” target=”_top”>全屏显示</a>

  1. 上一页
  2. 1
  3. ...
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. ...
  10. 11
  11. 下一页