Jul
2
谷歌这次遇到的蛮烦几乎就是致命性的打击。
运营的牌照没拿到，就是说，你这张网络户口本过时了，然后网协的“城管”就会把你的摊子砸了。
手机上的UC浏览器的默认搜索引擎由谷歌变成了百度。
傲游上的默认搜索引擎由谷歌变成了百度。
这不是落井下石，而是威屈于GD的淫威，当然，或许有些商业性质。
但是业内人士都知道哪种搜索引擎更好用。
网络的自由在党内人士还不理解的时候，还曾是块干净的地方。
当有一天，党内人士监听老百姓的电话时，人们都是在聊网络，而且党内的一些隐秘事件当天老百姓们就会在那个叫“网络”的人那里听到。
这下可不得鸟了，还鸟得，都反了这是。
所以党国下令，全国通缉“网络”。
老头子手下的知青们，听到老头子说要抓“网络”，当然是哭笑不得，但是谁TM敢笑啊，所以就寻思着，或许这就是一个赚钱的商机呢。
老头子们为党国“夜以继日”，知青们为了RMB“大肆屠杀”。从此，中华大地上一片腥风血雨。
运营的牌照没拿到，就是说，你这张网络户口本过时了，然后网协的“城管”就会把你的摊子砸了。
手机上的UC浏览器的默认搜索引擎由谷歌变成了百度。
傲游上的默认搜索引擎由谷歌变成了百度。
这不是落井下石，而是威屈于GD的淫威，当然，或许有些商业性质。
但是业内人士都知道哪种搜索引擎更好用。
网络的自由在党内人士还不理解的时候，还曾是块干净的地方。
当有一天，党内人士监听老百姓的电话时，人们都是在聊网络，而且党内的一些隐秘事件当天老百姓们就会在那个叫“网络”的人那里听到。
这下可不得鸟了，还鸟得，都反了这是。
所以党国下令，全国通缉“网络”。
老头子手下的知青们，听到老头子说要抓“网络”，当然是哭笑不得，但是谁TM敢笑啊，所以就寻思着，或许这就是一个赚钱的商机呢。
老头子们为党国“夜以继日”，知青们为了RMB“大肆屠杀”。从此，中华大地上一片腥风血雨。
Jul
1
用JS来做一个拥有良好效果的投票系统，需要写的样式以及JS代码会较多。
虽然有很多依靠JQ库的现成的例子，但是那不是我所追求的。
我们应当追求原创。
我们只需要少量的代码即可在flash中完成投票系统的前台。
我们需要用到缓动类库greensock。
代码如下：
其中的water1-4都用的一个MC，只是实例名不同。在bear1上我使用的是遮罩，然后用缓动类将bear1这个MC按总票数的比例移动到指定的X坐标上。
我们可以使用很多的方法来完成这个简单的效果，但是我的项目中已经有了greensock缓动库，也就拿来耍耍。
没什么创意，仅供娱乐。
虽然有很多依靠JQ库的现成的例子，但是那不是我所追求的。
我们应当追求原创。
我们只需要少量的代码即可在flash中完成投票系统的前台。
我们需要用到缓动类库greensock。
代码如下：
import com.greensock.*;
import com.greensock.easing.*;
var num1=1232;
var num2=385;
var num3=613;
var num4=134;
var num=num1+num2+num3+num4 ;//总人数
var x1=num1/num*300-300;
var x2=num2/num*300-300;
var x3=num3/num*300-300;
var x4=num4/num*300-300;
bear2.addEventListener(MouseEvent.CLICK,bearx);
function bearx(event:MouseEvent):void
{
TweenLite.to(water1.bear1, 1, {x:x1, y:0, motionBlur:true, ease:Expo.easeOut});
TweenLite.to(water2.bear1, 1, {x:x2, y:0, motionBlur:true, ease:Expo.easeOut});
TweenLite.to(water3.bear1, 1, {x:x3, y:0, motionBlur:true, ease:Expo.easeOut});
TweenLite.to(water4.bear1, 1, {x:x4, y:0, motionBlur:true, ease:Expo.easeOut});
}
import com.greensock.easing.*;
var num1=1232;
var num2=385;
var num3=613;
var num4=134;
var num=num1+num2+num3+num4 ;//总人数
var x1=num1/num*300-300;
var x2=num2/num*300-300;
var x3=num3/num*300-300;
var x4=num4/num*300-300;
bear2.addEventListener(MouseEvent.CLICK,bearx);
function bearx(event:MouseEvent):void
{
TweenLite.to(water1.bear1, 1, {x:x1, y:0, motionBlur:true, ease:Expo.easeOut});
TweenLite.to(water2.bear1, 1, {x:x2, y:0, motionBlur:true, ease:Expo.easeOut});
TweenLite.to(water3.bear1, 1, {x:x3, y:0, motionBlur:true, ease:Expo.easeOut});
TweenLite.to(water4.bear1, 1, {x:x4, y:0, motionBlur:true, ease:Expo.easeOut});
}
其中的water1-4都用的一个MC，只是实例名不同。在bear1上我使用的是遮罩，然后用缓动类将bear1这个MC按总票数的比例移动到指定的X坐标上。
我们可以使用很多的方法来完成这个简单的效果，但是我的项目中已经有了greensock缓动库，也就拿来耍耍。
没什么创意，仅供娱乐。
Jun
30
最近邱道长的网站被别人频频挂黑链，主要是文章都是原创，而且访问量很大。
这自然引起了黑链毛贼的窥视。
邱道长的网站使用的是以前呆过的公司制作的一个半成品CMS，富文本编辑器选用的是fck 2.6.4版本。
其中的跨站攻击漏洞已经满谷歌飞了。
直到有一天邱道长致电说网站变形了，才发现首页被挂了不少的黑链。
而且这些犊子们还在HTML代码里面聊起了天，什么共创挂链和谐啦之类的。
干掉无数图片木马后安静了一段时间，不久后又再次席卷而来。
后来索性把FCK删掉了。万事大吉？
哦，NO!服务器的SHELL都被拿下了，汗，没意义了，没意义了……
个人一直都不喜欢使用ASP程序，无论是C#还是什么的。
这自然引起了黑链毛贼的窥视。
邱道长的网站使用的是以前呆过的公司制作的一个半成品CMS，富文本编辑器选用的是fck 2.6.4版本。
其中的跨站攻击漏洞已经满谷歌飞了。
直到有一天邱道长致电说网站变形了，才发现首页被挂了不少的黑链。
而且这些犊子们还在HTML代码里面聊起了天，什么共创挂链和谐啦之类的。
干掉无数图片木马后安静了一段时间，不久后又再次席卷而来。
后来索性把FCK删掉了。万事大吉？
哦，NO!服务器的SHELL都被拿下了，汗，没意义了，没意义了……
个人一直都不喜欢使用ASP程序，无论是C#还是什么的。
Jun
29
一个拥有许多图片以及较多用户的网站，面临的压力会较大，并发连接数我们且略过。就拿下载图片时产生的带宽影响来说，就是一个很需要解决的问题。
所以，我们得做一个图片缓加载的功能。
用户打开网站的瞬间，浏览器显示区以外的图片，我们都暂时不去加载和显示，这个对SEO无害吧(我们肯定会选择一个小图片进行替换，不会空着的)。
这效果用JQ即可完美解决，虽然别的网站是自己写的类。
代码如下：
当然，我没去获取分辨率大小，这个以后实际用到再去做
所以，我们得做一个图片缓加载的功能。
用户打开网站的瞬间，浏览器显示区以外的图片，我们都暂时不去加载和显示，这个对SEO无害吧(我们肯定会选择一个小图片进行替换，不会空着的)。
这效果用JQ即可完美解决，虽然别的网站是自己写的类。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bearjia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
默认显示区的图片<img src="x.jpg"/>
<div id="lazyBox" style="margin-top:100px;"> 延迟载入的图片 <img style="border:0;" class="lazyImg" alt="11.jpg" src="loading.gif" coords="_DAA"/> <img style="border:0;" class="lazyImg" alt="22.jpg" src="loading.gif" coords="_DBA"/> </div>
<div style="height:1000px;"> </div>
<script type="text/javascript">
var hasShow = false;
$(window).bind("scroll",function(){
if(hasShow==true){
$(window).unbind("scroll");
return;
}
var t = $(document).scrollTop();
if(t>100){
// 滚动高度超过100时，加载图片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bearjia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
默认显示区的图片<img src="x.jpg"/>
<div id="lazyBox" style="margin-top:100px;"> 延迟载入的图片 <img style="border:0;" class="lazyImg" alt="11.jpg" src="loading.gif" coords="_DAA"/> <img style="border:0;" class="lazyImg" alt="22.jpg" src="loading.gif" coords="_DBA"/> </div>
<div style="height:1000px;"> </div>
<script type="text/javascript">
var hasShow = false;
$(window).bind("scroll",function(){
if(hasShow==true){
$(window).unbind("scroll");
return;
}
var t = $(document).scrollTop();
if(t>100){
// 滚动高度超过100时，加载图片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
</body>
</html>
当然，我没去获取分辨率大小，这个以后实际用到再去做
Jun
28
见到不少的游戏网站上都有鼠标悬停显示提示内容的效果
今天，我也用jQuery来打造一个tips提示效果
JQ库选用的是最新版本，1.4.2版，jquery-1.4.2.min.js
效果图如下：
代码如下：
样式----------------------------------
JS脚本----------------------------------
HTML代码------------------------------
这也就是利用了JQ全局对“A”标签的搜索，来获取title属性以及a标签内文本内容，都会转化成HTML格式。
而tips提示效果的背景是一个PNG的半透明图片，这样在IE6这个浏览器下就不能透明了，其它主流浏览器都没有问题，解决办法是有，但是不在本文范围内，不多讲。
然后title里面的内容也有限制，尽量还是少放内容。
这个效果在会员列表、商品列表、游戏道具等地方将发挥比较大的作用，普通JS也可以达到这个效果，但是就一个项目的整体来说，还是建议选用jQuery，集成化较好。
相比较flash的tips类，JQ正在超越。无论元素的丰富度、易用度、以维护性，都可以看出JQ的优越。
今天，我也用jQuery来打造一个tips提示效果
JQ库选用的是最新版本，1.4.2版，jquery-1.4.2.min.js
效果图如下：
代码如下：
样式----------------------------------
<style type="text/css">
.tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:210px; }
.tool-title{ width:210px; font-size:13px; float:left; margin: 0; color:#FF0; text-align: center; border-bottom:1px #000 dashed; padding: 9px 0px 4px; background: url(tilps.png) top left; }
.tool-text{ padding: 8px 8px 8px; width:194px; float:left; height:auto; font-size:12px; color: #cf9; background: url(tilps.png) bottom right;}
.tool-tips img{ width:50px; height:50px; float:left; margin:0; padding:2; border:1px #666 solid;}
.tool-tips dl{ width:130px; padding-left:10px; line-height:20px; height:80px; float:left; margin:0;}
</style>
.tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:210px; }
.tool-title{ width:210px; font-size:13px; float:left; margin: 0; color:#FF0; text-align: center; border-bottom:1px #000 dashed; padding: 9px 0px 4px; background: url(tilps.png) top left; }
.tool-text{ padding: 8px 8px 8px; width:194px; float:left; height:auto; font-size:12px; color: #cf9; background: url(tilps.png) bottom right;}
.tool-tips img{ width:50px; height:50px; float:left; margin:0; padding:2; border:1px #666 solid;}
.tool-tips dl{ width:130px; padding-left:10px; line-height:20px; height:80px; float:left; margin:0;}
</style>
JS脚本----------------------------------
<script> $(document).ready(function(){ $('<div class="tool-tips"><div class="tool-title"></div><div class="tool-text"></div></div>').appendTo('body'); $('a').mouseover(function(){ $(this).css('cursor','pointer'); $('.tool-tips').css('visibility','visible'); var xixu = this; if(xixu.title){xixu.yishi=xixu.title;xixu.title='';} var dual = xixu.yishi.split('::'); if(dual.length>1){ myTitle = dual[0]; myText = dual[1]; }else{ myTitle = $(this).text(); myText = xixu.yishi; } $('.tool-title').html(myTitle); $('.tool-text').html(myText); }).mousemove(function(e){ $('.tool-tips').css('top',e.pageY-15); $('.tool-tips').css('left',e.pageX+15); }).mouseout(function(){ $('.tool-tips').css('visibility','hidden'); }) }) </script>
HTML代码------------------------------
<p><a href="#" title="这是我的超链接提示1.">《大师的》</a></p>
<p><a href="#" title="这是我的超链接提示2.">《特别的》</a></p>
<p><a href="#" title="<img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl>">《传说中的一世》</a></p>
<p><a href="#" title="<img src=x.jpg><dl>他可是U9上的大红人哦，在DOTA界名声可是响当当啊。</dl>">《额外哦》</a> </p>
<p><a href="#" title="这是我的超链接提示2.">《特别的》</a></p>
<p><a href="#" title="<img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl>">《传说中的一世》</a></p>
<p><a href="#" title="<img src=x.jpg><dl>他可是U9上的大红人哦，在DOTA界名声可是响当当啊。</dl>">《额外哦》</a> </p>
这也就是利用了JQ全局对“A”标签的搜索，来获取title属性以及a标签内文本内容，都会转化成HTML格式。
而tips提示效果的背景是一个PNG的半透明图片，这样在IE6这个浏览器下就不能透明了，其它主流浏览器都没有问题，解决办法是有，但是不在本文范围内，不多讲。
然后title里面的内容也有限制，尽量还是少放内容。
这个效果在会员列表、商品列表、游戏道具等地方将发挥比较大的作用，普通JS也可以达到这个效果，但是就一个项目的整体来说，还是建议选用jQuery，集成化较好。
相比较flash的tips类，JQ正在超越。无论元素的丰富度、易用度、以维护性，都可以看出JQ的优越。
