模仿了WP的tile的title和message的切换功能，和一个数字的提示，以及一个拖动的实现
脚本代码
function WPFn(o){
this.o=o;
this.time=2500;
this.toggletime=1000;
this.scrollmove=false;
this.Initialization();
this.Run();
document.onselectstart=new Function ("return false");
}
WPFn.prototype.Run = function(){
var self = this;
$("#"+this.o+" ul li[class='Tile']").each(function(i){
var Tile=this;
setTimeout(function(){
self.toggle(Tile);
},parseInt(Math.random()*10)*self.time);
});
}
WPFn.prototype.Initialization=function(){
var self=this;
var _o=this.o;
var Y=0;
$(window).resize(function(){
$("#"+_o).css("height",$(window).height());
});
$(window).resize();
$("#"+this.o).bind("mousedown",function(){
self.scrollmove=true;
Y=event.clientY;
});
$("#"+this.o).bind("mousemove",function(){
if(self.scrollmove){
var current_Y=0;
current_Y=event.clientY-Y;
$("#"+_o).scrollTop((event.clientY>Y)?(current_Y):($("#"+_o).scrollTop()+current_Y));
}
});
$("#"+this.o).bind("mouseup",function(){
self.scrollmove=false;
});
}
WPFn.prototype.toggle=function(Tile){
var self = this;
var Title=$(Tile).children(".Title");
var Message=$(Tile).children(".Message");
if(parseInt($(Title).css("bottom"))!="0"){
$(Message).animate({bottom: "-20"}, this.toggletime);
$(Title).css({
"-webkit-transform":"rotate(-0deg)",
"-moz-transform":"rotate(-0deg)",
"filter":"progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
});
$(Title).animate({bottom: 0}, this.toggletime);
}else{
$(Message).animate({bottom: 0}, this.toggletime);
$(Title).css({
"-webkit-transform":"rotate(-180deg)",
"-moz-transform":"rotate(-180deg)",
"filter":"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"
});
$(Title).animate({bottom: 25}, this.toggletime);
}
setTimeout(function(){
self.toggle(Tile);
},parseInt(Math.random()*10)*self.time);
}
布局代码
<div id="MainWP">
<ul>
<li class="Tile">
<div class="Title">内容管理</div>
<div class="Message">我是提示信息..</div>
<div class="Number appbar-basecircle-rest">3</div>
</li>
<li class="Tile">
<div class="Title">会员管理</div>
<div class="Message">我是提示信息..</div>
<div class="Number appbar-basecircle-rest">1</div>
</li>
<li class="End"></li>
<li class="Tile">
<div class="Title">模版管理</div>
<div class="Message">我是提示信息..</div>
</li>
<li class="Tile">
<div class="Title">标签管理</div>
<div class="Message">我是提示信息..</div>
</li>
<li class="End"></li>
<li class="Tile">
<div class="Title">内容管理</div>
<div class="Message">我是提示信息..</div>
<div class="Number appbar-basecircle-rest">1</div>
</li>
<li class="Tile">
<div class="Title">会员管理</div>
<div class="Message">我是提示信息..</div>
<div class="Number appbar-basecircle-rest">3</div>
</li>
<li class="End"></li>
<li class="Tile">
<div class="Title">模版管理</div>
<div class="Message">我是提示信息..</div>
</li>
<li class="Tile">
<div class="Title">标签管理</div>
<div class="Message">我是提示信息..</div>
</li>
<li class="End"></li>
<li class="Tile">
<div class="Title">内容管理</div>
<div class="Message">我是提示信息..</div>
<div class="Number appbar-basecircle-rest">5</div>
</li>
<li class="Tile">
<div class="Title">会员管理</div>
<div class="Message">我是提示信息..</div>
<div class="Number appbar-basecircle-rest">1</div>
</li>
<li class="End"></li>
<li class="Tile">
<div class="Title">模版管理</div>
<div class="Message">我是提示信息..</div>
</li>
<li class="Tile">
<div class="Title">标签管理</div>
<div class="Message">我是提示信息..</div>
</li>
<li class="End"></li>
</ul>
</div>
<script>
var Wp=new WPFn("MainWP");
</script>
posted @ 2011-12-20 14:33 十年一刻·i 阅读(479) 评论(2) 编辑
一个妇科视频学习网站，和美工一起花了一个星期的时间，个人觉得还算速度蛮快的。。无加班状态
posted @ 2011-12-12 17:28 十年一刻·i 阅读(664) 评论(13) 编辑
1 (function($){
2 $.fn.lsMovePanel=function(){
3 var id=this.attr("id");
4 var X=Y=0;
5 var offsetX=offsetY=0;//绝对位置
6 var OldIndex=0;///存储原始索引
7 var Temp_Li="<li id=\"Temp_Li\" style=\"background-color:#FFFFFF;border-color:#FF023C\"></li>";
8 var Move_obj;///当前拖动的对象
9 $("#"+id+" li").each(function(i){
10 $(this).attr("open","0");
11 //鼠标点击
12 $(this).bind("mousedown",function(){
13 if(event.button==1 || event.button==0){$(this).attr("open","1");}
14 if($(this).attr("open")=="1"){
15 $(this).css({
16 cursor:"move",
17 opacity:"0.7"
18 });
19 X=event.clientX;
20 Y=event.clientY;
21 offsetX=$(this).offset().left;
22 offsetY=$(this).offset().top;
23 OldIndex=$(this).index();
24 $(this).css({
25 position:"absolute",
26 left:offsetX,
27 top:offsetY
28 });
29 $("#"+id+" li").each(function(i){
30 if(i==OldIndex){
31 $(this).after(Temp_Li);
32 }
33 })
34 }
35 });
36 //鼠标放开
37 $(this).bind("mouseup",function(){
38 if(event.button==1 || event.button==0){$(this).attr("open","0");}
39 if($(this).attr("open")=="0"){
40 $("#Temp_Li").before($(this));
41 $(this).animate({
42 left:$("#Temp_Li").offset().left,
43 top:$("#Temp_Li").offset().top,
44 },300,function(){
45 $("#Temp_Li").remove();
46 $(this).css({
47 cursor:"default",
48 opacity:"1",
49 position:"static"
50 });
51 });
52 $("#"+id+" li").each(function(i){
53 $(this).css({
54 "border-color":"#666666"
55 });
56 });
57 }
58 });
59 //移动
60 $(this).bind("mousemove",function(){
61 if($(this).attr("open")=="1"){
62 var current_X=current_Y=0;
63 current_X=offsetX+event.clientX-X;
64 current_Y=offsetY+event.clientY-Y;
65 $(this).css({
66 position:"absolute",
67 left:current_X,
68 top:current_Y
69 });
70 Move_obj=this;
71 $("#"+id+" li").each(function(i){
72 if(i!=OldIndex && $(this).attr("id")!="Temp_Li"){
73 var Deviation=0;
74 var Max_X=$(this).offset().left+$(this).width()-Deviation;
75 var Min_X=$(this).offset().left+Deviation;
76 var Max_Y=$(this).offset().top+$(this).height()-Deviation;
77 var Min_Y=$(this).offset().top+Deviation;
78 if((event.clientX < Max_X) && (event.clientY+$(Move_obj).height() > Max_Y) && (event.clientY+$(Move_obj).height() > Min_Y) && (event.clientX > Min_X) && (event.clientY < Max_Y) ){
79 $(this).css({
80 "border-color":"#FF7578"
81 });
82 //判断覆盖对象索引值在前还是后
83 if(OldIndex>$(this).index()){
84 $("#Temp_Li").before($(this));
85 $("#Temp_Li").remove();
86 $(this).before(Temp_Li);
87 }else{
88 $("#Temp_Li").after($(this));
89 $("#Temp_Li").remove();
90 $(this).after(Temp_Li);
91 }
92 }else{
93 $(this).css({
94 "border-color":"#666666"
95 });
96
97 }
98
99 }
100
101 })
102 }
103 });
104 });
105 }
106 })(jQuery);
调用例子:
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
5 <title></title>
6 <style>
7 #Panel{
8 width:630px;
9 height:auto;
10 padding:0px;
11 }
12 #Panel li{
13 float:left;
14 list-style:none;
15 width:300px;
16 height:100px;
17 margin:5px;
18 background-color:#D9F1FF;
19 border:1px dotted #666666;
20 text-align:center; position:static;
21 }
22 *{
23 font-size:12px;
24 }
25 </style>
26 </head>
27 <script src="http://files.cnblogs.com/lsmayday/jquery-1.4.2.min.js"></script>
28 <script src="http://files.cnblogs.com/lsmayday/lsMovePanel.js"></script>
29 <body>
30 <div style="margin-left:100px;">
31
32 <ul id="Panel">
33 <li style="background-color:#3399FF"></li>
34 <li style="background-color:#00CCFF"></li>
35 <li style="background-color:#CC9900"></li>
36 <li style="background-color:#FF6600"></li>
37 <li style="background-color:#FFCC99"></li>
38 </ul>
39
40 </div>
41
42
43 <script>
44 $("#Panel").lsMovePanel();
45 </script>
46 </body>
47 </html>
posted @ 2011-11-24 09:10 十年一刻·i 阅读(475) 评论(1) 编辑
每次坐火车都想靠着窗户坐，看看风景人也舒服些，在网上找了下座位计算的方法，就做了一个小应用
注:不包括高铁和动车
计算的代码：
View Code
1 int Num;
2 if (int.TryParse(this.phoneTextBox_Num.Text.ToString(), out Num))
3 {
4 Debug.WriteLine(Num.ToString());
5 if (Num > 0 && Num <= 118)
6 {
7 if (Num == 1 || Num == 4 || Num == 114 || Num == 118)
8 {
9 this.textBlock_Out.Text = "您查询的座位临窗";
10 Debug.WriteLine("靠窗:" + Num.ToString() + "号");
11 }
12 else
13 {
14 if (Num > 4 || Num < 114)
15 {
16 //座位号码减去4除以5余1或0的座位均为靠窗座位，其中余0者为两座临窗，余1者为三座临窗。
17 if ((Num - 4) % 5 == 1)
18 {
19 this.textBlock_Out.Text = "您查询的座位两座临窗";
20 Debug.WriteLine("两座靠窗:" + Num.ToString() + "号");
21 }
22 else if ((Num - 4) % 5 == 0)
23 {
24 this.textBlock_Out.Text = "您查询的座位三座临窗";
25 Debug.WriteLine("三座靠窗:" + Num.ToString() + "号");
26 }
27 else
28 {
29 this.textBlock_Out.Text = "您查询的座位不临窗";
30 Debug.WriteLine("不靠窗:" + Num.ToString() + "号");
31 }
32 }
33 }
34 }
35 else {
36 this.textBlock_Out.Text = "您输入的座位号不正确";
37 }
38 }
39 else
40 {
41 this.phoneTextBox_Num.Text = "";
42 MessageBox.Show("请输入数字!");
43 }
下载地址:http://files.cnblogs.com/lsmayday/Trainseat.xap
posted @ 2011-11-20 09:28 十年一刻·i 阅读(466) 评论(4) 编辑
View Code
1 function lsFloat(id,location,intervalshow){
2 this.ID=id;
3 this.InnerHTML="";
4 this.Location=location;
5 this.IntervalShow=intervalshow;
6 this.CloseButton=true;
7 this.Width=0;
8 this.Height=0;
9 this.IE6CalibrationlsTop=6;//校准IE6偏差
10 }
11 ///关闭浮动
12 function lsFloatClose(ID,Time){
13 document.getElementById(ID).style.display="none";
14 setTimeout(function(){
15 document.getElementById(ID).style.display="block";
16 },Time);
17 }
18 ///校准位置
19 function CalibrationlsFloatOffset(ID,Location){
20 var Obj=document.getElementById(ID);
21 switch(Location.toLowerCase()){
22 case "left"://左居中
23 Obj.style.top=GetFloatOffsetTop(Obj.clientHeight);
24 break;
25 case "right"://右居中
26 Obj.style.top=GetFloatOffsetTop(Obj.clientHeight);
27 break;
28 case "centent"://居中
29 Obj.style.left=GetFloatOffsetLeft(parseInt(Obj.style.width));
30 Obj.style.top=GetFloatOffsetTop(parseInt(Obj.style.height));
31 break;
32 }
33 }
34 ///校准位置
35 function _CalibrationlsFloatOffset(ID,Location,IE6CalibrationlsTop){
36 var Obj=document.getElementById(ID);
37 switch(Location.toLowerCase()){
38 case "left"://左居中
39 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(parseInt(Obj.style.height))+")");
40 break;
41 case "right"://右居中
42 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(parseInt(Obj.style.height))+")");
43 break;
44 case "lefttop"://左上
45 Obj.style.setExpression("top","eval(document.documentElement.scrollTop)");
46 break;
47 case "righttop"://右上
48 Obj.style.setExpression("top","eval(document.documentElement.scrollTop)");
49 break;
50 case "leftbottom"://左下
51 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+document.documentElement.clientHeight+"-"+(parseInt(Obj.style.height)+IE6CalibrationlsTop)+")");
52 break;
53 case "rightbottom"://右下
54 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+document.documentElement.clientHeight+"-"+(parseInt(Obj.style.height)+IE6CalibrationlsTop)+")");
55 break;
56 case "centent"://居中
57 Obj.style.setExpression("top","eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(parseInt(Obj.style.height))+")");
58 Obj.style.setExpression("left","eval(document.documentElement.scrollLeft+"+GetFloatOffsetLeft(parseInt(Obj.style.width))+")");
59 break;
60 }
61 }
62 ///返回绝对位置
63 //return OffseTop
64 function GetFloatOffsetTop(Height){
65 var clentHeight=document.documentElement.clientHeight;
66 var offsettop=0;
67 offsettop=clentHeight/2-Height/2;
68 return parseInt(offsettop);
69 }
70
71 //return OffseLeft
72 function GetFloatOffsetLeft(Width){
73 var clentWidth=document.documentElement.clientWidth;
74 var offsetleft=0;
75 offsetleft=clentWidth/2-Width/2;
76 return parseInt(offsetleft);
77 }
78 ///返回浏览器版本
79 lsFloat.prototype.GetBrowserVersion=function(){
80 try{
81 var browser=navigator.appName;
82 var b_version=navigator.appVersion;
83 var version=b_version.split(";");
84 var trim_Version=version[1].replace(/[ ]/g,"");
85 if(browser=="Microsoft Internet Explorer"){
86 if(trim_Version=="MSIE6.0"){
87 return "IE6";
88 }else{
89 return "IE6+";
90 }
91 }else{
92 return "NotIE";
93 }
94 }catch(e){
95 return "NotIE";
96 }
97 }
98 //返回样式
99 lsFloat.prototype.GetStyle=function(){
100 var TempHTML="";
101
102 if(this.GetBrowserVersion()=="IE6"){
103 TempHTML="<div id=\""+this.ID+"\" style=\"_position:absolute; @Location;width:auto;height:auto;margin:2px;padding:0px;width:"+this.Width+"px;height:"+this.Height+"px;\">";
104
105 switch(this.Location.toLowerCase()){
106 case "lefttop"://左上
107 TempHTML=TempHTML.replace("@Location","left:0px;_top:expression(eval(document.documentElement.scrollTop));");
108 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"',"+this.IE6CalibrationlsTop+");",1000);
109 break;
110 case "righttop"://右上
111 TempHTML=TempHTML.replace("@Location","right:0px;_top:expression(eval(document.documentElement.scrollTop));");
112 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"',"+this.IE6CalibrationlsTop+");",1000);
113 break;
114 case "leftbottom"://左下
115 TempHTML=TempHTML.replace("@Location","left:0px;_top:expression(eval(document.documentElement.scrollTop+"+document.documentElement.clientHeight+"-"+(this.Height+this.IE6CalibrationlsTop)+"));");
116 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"',"+this.IE6CalibrationlsTop+");",1000);
117 break;
118 case "rightbottom"://右下
119 TempHTML=TempHTML.replace("@Location","right:0px;_top:expression(eval(document.documentElement.scrollTop+"+document.documentElement.clientHeight+"-"+(this.Height+this.IE6CalibrationlsTop)+"));");
120 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"',"+this.IE6CalibrationlsTop+");",1000);
121 break;
122 case "left"://左居中
123 TempHTML=TempHTML.replace("@Location","left:0px;_top:expression(eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(this.Height)+"));");
124 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
125 break;
126 case "right"://右居中
127 TempHTML=TempHTML.replace("@Location","right:0px;_top:expression(eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(this.Height)+"));");
128 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
129 break;
130 case "centent"://屏幕居中
131 TempHTML=TempHTML.replace("@Location","_top:expression(eval(document.documentElement.scrollTop+"+GetFloatOffsetTop(this.Height)+"));_left:expression(eval(document.documentElement.scrollLeft+"+GetFloatOffsetLeft(this.Width)+"));");
132 setInterval("_CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
133 break;
134 default:
135 TempHTML=TempHTML.replace("@Location","left:0px;top:0px");
136 break;
137 }
138 }else{
139 TempHTML="<div id=\""+this.ID+"\" style=\"position:fixed!important; @Location;width:auto;height:auto;margin:2px;padding:0px;width:"+this.Width+"px;height:"+this.Height+"px;\">";
140
141 switch(this.Location.toLowerCase()){
142 case "lefttop"://左上
143 TempHTML=TempHTML.replace("@Location","left:0px;top:0px");
144 break;
145 case "righttop"://右上
146 TempHTML=TempHTML.replace("@Location","right:0px;top:0px");
147 break;
148 case "leftbottom"://左下
149 TempHTML=TempHTML.replace("@Location","left:0px;bottom:0px");
150 break;
151 case "rightbottom"://右下
152 TempHTML=TempHTML.replace("@Location","right:0px;bottom:0px");
153 break;
154 case "left"://左居中
155 TempHTML=TempHTML.replace("@Location","left:0px;top:"+GetFloatOffsetTop(this.Height)+"px;");
156 setInterval("CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
157 break;
158 case "right"://右居中
159 TempHTML=TempHTML.replace("@Location","right:0px;top:"+GetFloatOffsetTop(this.Height)+"px;");
160 setInterval("CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
161 break;
162 case "centent"://居中
163 TempHTML=TempHTML.replace("@Location","right:"+GetFloatOffsetLeft(this.Width)+"px;top:"+GetFloatOffsetTop(this.Height)+"px;");
164 setInterval("CalibrationlsFloatOffset('"+this.ID+"','"+this.Location+"');",1000);
165 break;
166 default:
167 TempHTML=TempHTML.replace("@Location","left:0px;top:0px");
168 break;
169 }
170
171 }
172 if(this.CloseButton){
173 TempHTML+="<div style=\"font-size:12px;text-align:right\"><a href=\"javascript:void(0)\" style=\"color:#000000;text-decoration:none\" onclick=\"lsFloatClose('"+this.ID+"',"+this.IntervalShow+")\">关闭</a></div>";
174 }
175 TempHTML+="@InnerHTML</div>";
176
177 return TempHTML;
178 }
179 //初始化
180 lsFloat.prototype.Initialization=function(){
181 var Html=this.GetStyle();
182 Html=Html.replace("@InnerHTML",this.InnerHTML);
183 return Html;
184 }
185 ///显示
186 lsFloat.prototype.Show=function(){
187 this.Height+=18;
188 var html=this.Initialization();
189 document.write(html);
190 }
调用方法：
1 var ls_1=new lsFloat("ID","位置",关闭后再显示的间隔时间);
2 ls_1.InnerHTML="内容";
3 ls_1.CloseButton=关闭按钮(true,false)
4 ls_1.Width=内容宽;
5 ls_1.Height=内容高;
6 ls_1.Show(); 显示
7
8 完整调用例子
9 var ls_1=new lsFloat("temp1","left",3000);
10 ls_1.InnerHTML="<a href='http://kft.zoosnet.net/LR/Chatpre.aspx?id=KFT36998244 ' target='_blank' ><img src='http://www.cddfnzyy.com/images/left_zx.gif' border='0' usemap='#leftKfMap' alt='健康直通车'/></a>";
11 ls_1.CloseButton=true;
12 ls_1.Width=225;
13 ls_1.Height=645;
14 ls_1.Show()
位置参数:
View Code
1 左上:lefttop
2 右上:righttop
3 左下:leftbottom
4 右下:rightbottom
5 左居中:left
6 右居中:right
7 屏幕居中:centent
posted @ 2011-11-16 09:41 十年一刻·i 阅读(233) 评论(1) 编辑
摘要: 首先建立一个Song.cs，用于保存歌曲信息View Code 1 using System; 2 using System.Net; 3 using System.Windows; 4 using System.Windows.Controls; 5 using System.Windows.Documents; 6 using System.Windows.Ink; 7 using System.Windows.Input; 8 using System.Windows.Media; 9 using System.Windows.Media.Animation;10 using Syst.阅读全文
posted @ 2011-11-10 15:14 十年一刻·i 阅读(358) 评论(6) 编辑
摘要: Push Notification简介目前，Windows Phone支持三种Push Notification方式：Toast Notifications、Tile Notifications和Raw Notifications，我不想翻译成中文名字了，因为“吐司”之类的翻译无法帮助理解。Toast Notifications，当我们的程序没有运行时，我们希望有一种形式可以通知用户，并且让用户调用对应的应用，就像收到SMS时，调用Messaging程序一样。运行效果如下图，当用户点击Toast时，可以调用对应的程序。Tile Notifications，用于更新启动界面上的Tile，可以通过阅读全文
posted @ 2011-11-08 11:35 十年一刻·i 阅读(260) 评论(0) 编辑
摘要: 代码 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Net; 5 using System.Windows; 6 using System.Windows.Controls; 7 using System.Windows.Documents; 8 using System.Windows.Input; 9 using System.Windows.Media; 10 using System.Windows.Media.Animation; 11 ...阅读全文
posted @ 2011-11-07 11:35 十年一刻·i 阅读(402) 评论(7) 编辑
摘要: 刚开始做，然后今天又一瞄坛子里有人已经发了一个类似的，呵呵，看来初学者都喜欢做这种应用了。。先看图，有图有真相本来想用Hubtile做的，但是样式更改起来好麻烦，就干脆自己写了一个自定义控件。比较简单，可以在面板里直接预览3天的温度信息。还没做完，目前就实现了添加城市，然后读取城市的天气信息。再准备加上定时更新天气预报信息的功能，在首页显示首选城市的天气信息。数据全部是以模板的方式绑定的，显示天气的方块需要绑定数据，之前是动态绑定的，后来换成模板绑定的，但运行就报错，查了下资料，需要注册这个属性。注册属性的方法。 1 ///<summary> 2 /// 天气信息 3 ///<阅读全文
posted @ 2011-10-27 11:57 十年一刻·i 阅读(461) 评论(4) 编辑
摘要: 貌似还没认证吧。也没发布。怎么来的崩溃？阅读全文
posted @ 2011-10-27 08:47 十年一刻·i 阅读(164) 评论(3) 编辑