关于图片阴影的实现

6月 29th, 2010

先把代码地址放上来:http://pastebin.com/egT0gADN

然后看下大概的效果,今天下午来公司,最后一次在这个电脑前面弄点东西,想去看电影,扫到了mtime里,看见了他们的图片全部都带了个小阴影,我想了想,先用css方法实现了,之后又写了段不伦不类的js代码又实现一遍。

主要是最近看了一些乱七八糟的东西,就想试验下效果。主要代码看上面的地址吧。

图片阴影的效果如下:

CSS的思路其实就是给图片和a标签做一个left和top的负值即可。

然后我用js重新写了下实现,里面包括一个简单的递归循环函数,一个查找元素函数,一个getclass函数,并且都自带回调方法,算模仿jquery吧,可以看下实现和使用。其他的就木有了,这个方法写的也比较奇怪,其实就是个字面量对象。

关于DOM和BOM。

6月 20th, 2010

很久不更新什么内容了。其实还是因为不太知道该写点什么。

昨天晚上给一个同学讲了好久的javascript的基础知识,其实我基础也不好,没什么资本给别人说教什么。其中就讲到了DOM和BOM这2个东西。

到底它们是什么,我想每个人都会有自己心里自己的答案,我也不说这么基础的问题了。

但是不知道你们有没有想过这样一个问题,DOM对象和BOM对象在不同浏览器下的差异问题到底是为什么呢。如果没有文档总结你要怎么办呢,还有非常全的关于这2个对象的手册在哪里呢?

其实,答案都在浏览器自己内部留着。

代码很简单,可以在jstyrtime里跑一下:

for(var i in window){alert(i+’:'+window[i])};

for(var i in document){alert(i+’:'+document[i])};

查看当前浏览器的window或者document对象或者其他一些浏览器内置对象或者js原生对象等。

运行在不同浏览器下的不同结果,我跑了一下,总结了下面几个表格内容,针对DOM和BOM这2个对象,地址如下:

http://www.designsor.com/demo/dom/bom.html

可以方便大家查阅所有的对象方法名并区分了各种浏览器,仔细看一看,我只想对所有的浏览器说一句:艹你大爷的……。

JsTryTime~量身为自己打造js小工具……

6月 9th, 2010

首先地址如下:

http://www.designsor.com/jstime/

扔个示意图:

当然了,如果你不开firebug,禁用的话,结果会直接打到页面中,而且支持IE,chrome,意思是,有控制台的就用控制台,没控制台的就直接在页面中报出log信息。

显示控制分为3项,log信息,运行速度信息(MS单位),我自定义的警告信息,还有你输入代码的错误catch信息。

看看下面这张图:

这个工具不光可以跑原生js的代码,而且支持你加载不同的框架库,来运行你依赖的代码片段,目前支持4个核心js文件的选择,jquery,mootools,dojo,yui2 core。加载js 的方法是用的jquery里$.getscript()方法的源码。

再看下面的图,如果你的浏览器没有支持console对象,那么输出信息会变成如下:

页面底部直接log出了信息,输出的是我选择jquery中的$。

最后还有一些其他的小用处,比如中文转unicode编码……你可以直接在文本框中输入汉字。如下图:

那么输出的脚本错误信息的结果,我们可以看出小爝的unicode码就是……\u5cof \u721d啦……

其他功能有待大家自由发挥,其他功能有待以后慢慢扩展,这个工具还可以自动转换alert为console.log,量身为我自己设计打造…………-_-||

以后可能会推出新页面运行代码?临时保存代码片段地址?或者代码高亮?或者其他更NB的控制台功能?或者测速更加准确有对比性?还是未知= =||

最后的最后,如果你的浏览器有控制台,那么好,要不你在开始就把他开开,要不你就一直关着他。否则一会console对象存在,一会不存在的,丫不报错才怪呢。。

如何把twitter的数据展现到自己的页面里

6月 7th, 2010

咳咳,当然大家都知道推特是被墙的。

那么,翻墙好了,咳咳。

还记得以前饭否么,恩,饭否可以有一个小的flash插件挂在自己的BLOG上,有段js调用,就可以实时更新自己的状态。那时候还觉得,我擦,真神奇,现在想想,其实也就是个内部的api。

今天逛别人blog,看到了一个小应用,就是类似以前饭否的那个东西,只不过数据是twitter的。我一看,哎呀,自己也做个吧。方便一些观众更加了解我,也方便自己更进一步的装X。

看下首页右下角,如图:

额,首先把实现思路和大家说下,由于最近做小偷程序做的太多了……(低头),我第一个实现方法就还是那些老套路。。

恩,那么继续,api是我自己的,由于我的WordPress服务器在美国,所以基本不存在翻墙的问题,访问下面的地址你就懂了。

http://www.designsor.com/demo/tw/curl.php?url=http://twitter.com/xiao_jue/

恩,简单的一个curl翻墙,php代码如下:

<?php
$url=$_GET['url'];
$ch = curl_init($url);
curl_exec($ch);
//echo $ch; 可以删掉了,具体为什么见4楼……
curl_close($ch);
?>

主要就是借助我国外的主机,抓取了一下被墙的页面……

之后嘛,嘿嘿,要制作这个twitter小玩意就好办多了。

js部分代码:

/*@author xiaojue*/
/*twitter prowed by jqueryAjax*/
$.ajax({
url:’http://www.designsor.com/demo/tw/curl.php?url=http://twitter.com/xiao_jue/’,
type:’get’,
success:function(html){
var reg=/.*?<\/span>/ig; //2条抓数据的正则
var reg2=/.*?<\/span>/ig;
var time=html.match(reg2); //获得时间
var tw=html.match(reg); //获得我说的话
time=time.slice(0,10); //取前10条
tw=tw.slice(0,10).join(”);
$(’#tw’).html(tw);

//把时间加入到说过的话的下面,并且添加hover效果事件。

$(’#tw span’).each(function(i){
$(this).after(time[i]);
$(’a',this).click(function(){return false;})
}).hover(function(){
$(this).css({’color’:'#336699′})
},function(){
$(this).css({’color’:'#666′})
});

//设置抓取来的时间部分的样式
$(’#tw span:odd’).each(function(i){
$(this).css({’border-bottom’:'#ccc dashed 1px’,'padding’:'5px 0px’,'font-size’:'9px’,'color’:'#666′});
});
},
error:function(){
$(’#tw’).text(’加载twitter数据失败’);
}
});

js部分应该很容易懂,其实就是分析了下twitter的页面html结构,然后写了2条正则,处理了下自己的blog页面的html,添加了几条样式。就齐活了。

主要提供一个抓取外加翻墙的思路,如果你也想做一个类似的东东而没有看懂上面的某个部分,欢迎留言交流或者gtalk我!

自己做的chrome实用插件一枚,forgetful helper.

6月 7th, 2010

先上图吧~

扩展地址:
https://chrome.google.com/extensions/detail/bpnpaekhdjhmgodlllkkkohgbgadgjdl

如果你总是迷路,或者总是外出,我觉得你挺应该装一个的。。。 (其实主要还是我自己使用方便,上面的功能基本都是给自己定制的……)

支持:
1,你的IP地址定位。(腾讯api)
2,当日,次日天气预报(google weather api)
3,你的城市所在地定位(maxmind api)
4,你当前地理位置的定位—目前来说有点不太准……(google map api)
5,查询你想到的任何地方的地图查询(google map api)
6,查询你国内目前的火车票票价与车次。(trainInfo api)
7,查询手机归属地等手机卡信息。(shouji.com的api)

————————————————–可能以后扩展的功能—————————-

可能以后会做支持查询飞机票的……虽然组里有人说比较难实现了,没有API,只有爬虫抓了。

以后非常可能而且可能明天就会做的其他地区城市的天气预报查询。

暂时想到这么多,其实还想再连接一个淘宝的JavaScript api做本地网店实体店一览之类的功能。。。

具体想到这么多。BUG还比较多,源代码也比较乱,编程风格也比较肥猪流,以后慢慢修改……

童趣……

6月 5th, 2010

很久很久,没有发和前端无关的东西了,好吧,其实这玩意也是photoshop画的。那么也算沾边?累死我了,10张描边~唔。。。。不是我画的,但是感觉还好,多可爱啊,想起小时候。丑丑的,但是很真实。

看成果吧~帮朋友做的,印T恤去啦。

哈哈哈哈,看来我还是鼠绘不老啊~

写了个javascript的图片放大镜效果

5月 30th, 2010

主要js的代码在下面:

http://pastebin.com/F6kguW5s

预览地址在这里:

http://www.designsor.com/demo/Magnifier/Magnifier.html

写成了个类,很简陋,只是个思路问题。具体到做放大镜,JS的组件现成的应该有很多,考察到的知识点其实也比较全面了。2种实现思路,一种HTML CSS JS完全分开,就只是实现放大效果,一种是把HTML CSS集合到JS之中做成JS组件。当然都各有利弊。我做的是后者,用JS生成了部分HTML结构和CSS代码。

实现思路:首先需要一张大图了,做放大的效果图了。然后就是按照比例生成缩小后的图,让用户觉得缩小了的图是实际尺寸,而实际尺寸是放大尺寸。OK。然后2个层,一个缩层,一个放大层。根据比例生成后,监听mousemove鼠标相对的offsetX和offsetY,然后改变放大层中的图片的left值和top值,感觉是放大了还根据鼠标移动了。具体看上面的预览地址就明白了。实现起来不难,浏览器兼容问题有些就是IE和非IE的鼠标坐标问题,但是还是可以解决的…

嗯,扩展思考,如果要做成放大镜根据鼠标移动 的怎么办?

哈,很简单了,让那个放大层根据鼠标移动就好了,当然这里就还需要监听鼠标所在层的状态了,其实也就是mouseover和mouseout了。思路都是一样的……^_^

肯定还有很多别的好办法实现……大家多交流啊。

PS:最后我犯了个逻辑错误,在添加DOM的时候如果先设置了SRC什么的,后绑定事件,非常有可能因为图片已经加载了,而导致最后事件没有绑定或者触发,比如onload事件……特别记录一下!!经验啊……

js数组去除重复元素,获得重复元素的方法

5月 30th, 2010

代码不多,贴出来地址:

http://pastebin.com/P2WZfTUD

2个根据Array原型扩展的方法: unique剔除重复数组,返回不重复的数组。repeat找到重复数组元素,返回数组中重复的元素。

具体的思路剔除重复数组是利用js对象的属性不可重复来进行剔除的。获取重复数组是用不重复的数组和源数组进行比对,删除雷同的返回重复的,最后再次进行重复剔除即可。

具体的代码参见上面的代码链接。

top languages

5月 28th, 2010

看下面图吧,我们啥也不说了,都来我们豆瓣javascript小组里喝酒来吧!

来自github.com的代码统计数据。yeah.

关于javascript对象字面量

5月 28th, 2010

啊,我不是专业程序员,我英文烂到不行。嗯……基础差劲,经验一般~嗯,群里给我结论……

个人我也很同意[使劲点头],但是我绝对自信的是自己的歪门邪道……也就是野路子。嗯,遇到问题会用自己知识范围内的所知全力解决……唔。也就是所谓的实战派,实用派,最意外忍者和野路子了。

好了,扯淡结束,下个话题。关于javascript对象字面量,到底是什么东西?看下下面的例子代码:

var a={
‘m’:'b’,
‘a’:'c’,
‘c’:'1′
};

这里的a,被定义了成了一个对象,他有3个属性m,a,c值则就是b,c,1了。这就是javascript中的对象,键对值的。然后我们如果要访问他们,如果知道属性名则这样访问a['m']//返回b;而我们当然开始不知道对象里有什么。就需要使用for in循环了比如for(var k in a){a[k];//以此返回b,c,1;}k则是遍历的键名了。

唔……昨天有个傻呸在群里说:他想不用循环又想得到一个对象字面量的第一个键名和值……

好吧,我们想了好久,最终我这个野路子想出方法啦……嗯,其实我也是现找的一个javascript对象属性外加一个野想法……

嗯,a这个对象我们不知道内部有什么,我们又不可以用循环,最开始的思路大家都差不多,嗯,匹配?或者……啊,对,总之要把他这个对象转换成可以操作的一个什么东西,toString();?不行,caller?也不行……额,我找了挺久发现了这么一个属性……toSource() ;方法……嗯,返回对象内部的源码,哇嘞NB,因为我的手册里没有这个属性- -||所以之前一直不知道有这么个方法。

既然这样实现起来就容易了:

var a={
‘m’:'b’,
‘a’:'c’,
‘c’:'1′
};
function objfirstparam(obj){
var str=obj.toSource();
var re = /(?!\{)[\w](?=:)/;
return str.match(re).toString();
}
alert(objfirstparam(a));
alert(a[objfirstparam(a)]);

嗯,先读出对象里的源码,我判断了,就是str类型,那么OK了,根据读出来的str写个正则匹配下,不用循环匹配字符串特定的第一个键名还是比较容易的。嗯,要求符合,问题解决……我是野路子……

这只是个思路,基本和实际应用关系不大,可谁知道呢,也许以后没准还能真可以用上,特此记录一下(PS:最近迷上了正则表达式,哇嘞真的是jser的一把瑞士军刀,NB,建议大家多多练习使用,增强火力吧。)


Dtools Top
本页文章快速定位...