Windows界面編程_Miniblink(6) 個人信息界面

先看一下Demo：

按鈕發光動畫效果：

字體效果： 鼠標移動到字體上會有陰影緩動

使用skn皮膚+miniblink框架編寫而成，結合之前的教程，可以輕易寫出這樣的界面

本源碼基於前幾篇文章，這裏直接給源碼:

Win32:

// Win32Project1.cpp : 定義應用程序的入口點。
//

#include "stdafx.h"
#include "Win32Project1.h"
#include "wke.h"
#include "SkinH.h"
#pragma comment(lib, "SkinHu.lib")
#define MAX_LOADSTRING 100

// 全局變量: 
HINSTANCE hInst;								// 當前實例
TCHAR szTitle[MAX_LOADSTRING];					// 標題欄文本
TCHAR szWindowClass[MAX_LOADSTRING];			// 主窗口類名
HWND hWnd;
// 此代碼模塊中包含的函數的前向聲明: 
ATOM				MyRegisterClass(HINSTANCE hInstance);
BOOL				InitInstance(HINSTANCE, int);
LRESULT CALLBACK	WndProc(HWND, UINT, WPARAM, LPARAM);
INT_PTR CALLBACK	About(HWND, UINT, WPARAM, LPARAM);

int APIENTRY _tWinMain(_In_ HINSTANCE hInstance,
                     _In_opt_ HINSTANCE hPrevInstance,
                     _In_ LPTSTR    lpCmdLine,
                     _In_ int       nCmdShow)
{
	UNREFERENCED_PARAMETER(hPrevInstance);
	UNREFERENCED_PARAMETER(lpCmdLine);

 	// TODO:  在此放置代碼。
	MSG msg;
	HACCEL hAccelTable;

	// 初始化全局字符串
	LoadString(hInstance, IDS_APP_TITLE, szTitle, MAX_LOADSTRING);
	LoadString(hInstance, IDC_WIN32PROJECT1, szWindowClass, MAX_LOADSTRING);
	MyRegisterClass(hInstance);

	// 執行應用程序初始化: 
	if (!InitInstance (hInstance, nCmdShow))
	{
		return FALSE;
	}

	hAccelTable = LoadAccelerators(hInstance, MAKEINTRESOURCE(IDC_WIN32PROJECT1));

	// 主消息循環: 
	while (GetMessage(&msg, NULL, 0, 0))
	{
		if (!TranslateAccelerator(msg.hwnd, hAccelTable, &msg))
		{
			TranslateMessage(&msg);
			DispatchMessage(&msg);
		}
	}

	return (int) msg.wParam;
}



//
//  函數:  MyRegisterClass()
//
//  目的:  註冊窗口類。
//
ATOM MyRegisterClass(HINSTANCE hInstance)
{
	WNDCLASSEX wcex;

	wcex.cbSize = sizeof(WNDCLASSEX);

	wcex.style			= CS_HREDRAW | CS_VREDRAW;
	wcex.lpfnWndProc	= WndProc;
	wcex.cbClsExtra		= 0;
	wcex.cbWndExtra		= 0;
	wcex.hInstance		= hInstance;
	wcex.hIcon			= LoadIcon(hInstance, MAKEINTRESOURCE(IDI_WIN32PROJECT1));
	wcex.hCursor = NULL;
	wcex.hbrBackground	= (HBRUSH)(COLOR_WINDOW+1);
	wcex.lpszMenuName = NULL;
	wcex.lpszClassName	= szWindowClass;
	wcex.hIconSm		= LoadIcon(wcex.hInstance, MAKEINTRESOURCE(IDI_SMALL));

	return RegisterClassEx(&wcex);
}

//
//   函數:  InitInstance(HINSTANCE, int)
//
//   目的:  保存實例句柄並創建主窗口
//
//   註釋: 
//
//        在此函數中，我們在全局變量中保存實例句柄並
//        創建和顯示主程序窗口。
//
wkeWebView m_web;
//移動窗口
jsValue JS_CALL js_Index2(jsExecState es){
	int x = jsToInt(es, jsArg(es, 1));	
	int y = jsToInt(es, jsArg(es, 2));
	MoveWindow(hWnd,x ,y ,474 ,430 ,TRUE );
	return jsStringW(es, L"0X00");
}

//修改窗口標題
jsValue JS_CALL js_Index1(jsExecState es){ 
	const wchar_t* FuncIndex = jsToStringW(es, jsArg(es, 1));	//得到第二個參數
	SetWindowText(hWnd, FuncIndex);
	return jsStringW(es, L"0X00");
}

//中轉函數
jsValue JS_CALL js_msgBox(jsExecState es)
{
	const wchar_t* FuncIndex = jsToStringW(es, jsArg(es, 0));	//開始中轉	
	if (wcscmp(FuncIndex, L"1") == 0){
		//執行索引一		
		return js_Index1(es);
	}	
	if (wcscmp(FuncIndex, L"2") == 0){
		//執行索引二	
		return js_Index2(es);
	}
	return jsStringW(es, L"0X00");
	
}

BOOL InitInstance(HINSTANCE hInstance, int nCmdShow)
{

   hInst = hInstance; // 將實例句柄存儲在全局變量中

   hWnd = CreateWindow(szWindowClass, szTitle, WS_OVERLAPPEDWINDOW,
      CW_USEDEFAULT, 0, 474,430,0, NULL, NULL, hInstance, NULL);

   if (!hWnd)
   {
      return FALSE;
   }
   SkinH_Attach();
   SkinH_AttachEx(L"1.she", NULL);
   ShowWindow(hWnd, nCmdShow);
   UpdateWindow(hWnd);
   wkeSetWkeDllPath(L"node.dll");

   wkeInitialize();
   RECT rtClient;
   GetClientRect(hWnd,&rtClient);
   rtClient.top += 0;
   m_web = wkeCreateWebWindow(WKE_WINDOW_TYPE_CONTROL, hWnd, rtClient.left, rtClient.top, rtClient.right - rtClient.left, rtClient.bottom - rtClient.top);
   wkeLoadFile(m_web, "index.html");
   jsBindFunction("msgBox", js_msgBox, 1);//JS調用C++
   wkeShowWindow(m_web, TRUE);
   return TRUE;
}

//
//  函數:  WndProc(HWND, UINT, WPARAM, LPARAM)
//
//  目的:    處理主窗口的消息。
//
//  WM_COMMAND	- 處理應用程序菜單
//  WM_PAINT	- 繪製主窗口
//  WM_DESTROY	- 發送退出消息並返回
//
//
LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
	int wmId, wmEvent;
	PAINTSTRUCT ps;
	HDC hdc;

	switch (message)
	{
	case WM_COMMAND:
		wmId    = LOWORD(wParam);
		wmEvent = HIWORD(wParam);
		// 分析菜單選擇: 
		switch (wmId)
		{
		case IDM_ABOUT:
			DialogBox(hInst, MAKEINTRESOURCE(IDD_ABOUTBOX), hWnd, About);
			break;
		case IDM_EXIT:
			DestroyWindow(hWnd);
			break;
		default:
			return DefWindowProc(hWnd, message, wParam, lParam);
		}
		break;
	case WM_PAINT:
		hdc = BeginPaint(hWnd, &ps);
		// TODO:  在此添加任意繪圖代碼...
		EndPaint(hWnd, &ps);
		break;
	case WM_DESTROY:
		PostQuitMessage(0);
		break;
	default:
		return DefWindowProc(hWnd, message, wParam, lParam);
	}
	return 0;
}

// “關於”框的消息處理程序。
INT_PTR CALLBACK About(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)
{
	UNREFERENCED_PARAMETER(lParam);
	switch (message)
	{
	case WM_INITDIALOG:
		return (INT_PTR)TRUE;

	case WM_COMMAND:
		if (LOWORD(wParam) == IDOK || LOWORD(wParam) == IDCANCEL)
		{
			EndDialog(hDlg, LOWORD(wParam));
			return (INT_PTR)TRUE;
		}
		break;
	}
	return (INT_PTR)FALSE;
}

Html:

<html>
<head>
 <link rel="stylesheet" type="text/css" href="index.css">
 <script> 
function myFunction() {  
 var temp = document.getElementById('fname').value;
 msgBox("1",temp);	  
 }   
 
 function myFunction1() {  
 var temp = document.getElementById('pox').value;
 var temp1 = document.getElementById('poy').value;
 msgBox("2",temp,temp1);	  
 }   
</script> 
</head>
<body>
<div class="msg">
</div>
<img class="image1" src="tx.jpg"/>
<p>姓名：17歲boy博客 </br>地址：17歲boy博客</br>簽名：沒什麼想說的</br>近況：不方便透露</br>愛好：編程</br>
  粉絲：321(非實時)</br>原創：153篇文章 </br>訪問：35萬次</br>評論：79</br>喜歡：336</br></p>
<div class="msg1">
</br>
  <input class="b" type="text" id="fname"/>
  </br></br>
  <button type="button" class="button1" onclick="myFunction()">修改窗口標題</button>
</div>
<div class="msg2">  
<p class="p1">x座標</p>
</br></br>
 <input type="text" class="b" id="pox" />
</br></br>
 <p class="p2">y座標</p>
 <input type="text" class="b" id="poy" />
  <button type="button" class="button2" onclick="myFunction1()">移動窗口</button>
 </div>

</body>
</html>

css:

body{
text-align:center;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;
background-color:#D0D0D0; 
}

.msg{
	background-color:#F5F5F5; 
	height:320px;
	width:200;
	box-shadow: 2px 2px 5px #bbb;
	position:absolute;
	left:20px;
	top:40px;
	border-radius:25px;
	-moz-border-radius:25px; /* Old Firefox */
}
.msg1{
	background-color:#D0D0D0; 
	height:150px;
	width:200;
	box-shadow: 2px 2px 5px #bbb;
	position:absolute;
	left:240px;
	top:40px;
	border-radius:25px;
	-moz-border-radius:25px; /* Old Firefox */
}
.msg2{
	background-color:#D0D0D0; 
	height:170px;
	width:200;
	box-shadow: 2px 2px 5px #bbb;
	position:absolute;
	left:240px;
	top:210px;
	border-radius:25px;
	-moz-border-radius:25px; /* Old Firefox */
}
.button1{
	background-color: #F5F5F5; /* Green */
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 12px;
	box-shadow: 2px 2px 5px #bbb;
	 -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.button1:hover{
background-color: #66afe9; /* Green */
		box-shadow:0px 0px 25px #66afe9;
}
.button1:active{
background-color: #F5F5F5; /* Green */
}
.button2{
	background-color: #F5F5F5; /* Green */
    border: none;
    color: black;
    padding: 5px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 12px;
	box-shadow: 2px 2px 5px #bbb;
	 -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.button2:hover{
background-color: #66afe9; /* Green */
		box-shadow:0px 0px 25px #66afe9;
}
.button2:active{
background-color: #F5F5F5; /* Green */
}
.b{   
 outline-style: none ;
border: 1px solid #ccc;   
  border-radius: 3px;   
  padding: 4px 14px;  
  width: 150px;   
  font-size: 14px;
  font-weight: 700;   
  font-family: "Microsoft soft";	
  transition: all 1.1s;
  }
  .b:focus{  
  border-color: #66afe9;   
  outline: 0;   
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  }

.image1{ 
  position:absolute;
  left:70px;
  top:1px;
  width:100px; 
  height:100px; 
  border-radius:200px; 
  box-shadow: -1px -2px 5px #bbb;	
}
p{
	position:absolute;
    left:45px;
	top:90px;
	color:#FFF;
	font-size:17px;
	text-align:left;
	transition:all 0.3s;
	text-shadow:2px 2px 2px #004315;
}
p:hover{ 
text-shadow:6px 6px 6px #00FF00;
}
.p1{
	position:absolute;
	top:0px;
	color:#FFF;
	font-size:17px;
	text-align:left;
	transition:all 0.3s;
	text-shadow:2px 2px 2px #004315;
}
.p2{
	position:absolute;
	top:52px;
	color:#FFF;
	font-size:17px;
	text-align:left;
	transition:all 0.3s;
	text-shadow:2px 2px 2px #004315;
}

skn皮膚：

https://pan.baidu.com/s/1c0Ji_ricRghAK7vcoDbuuw

提取碼：

97p2

 

將skn目錄下的文件解壓到運行目錄下和工程目錄下，編譯運行即可！

 

懶人區：

源碼下載：

https://pan.baidu.com/s/1CohZ46z0hTBBMakWUqQ0Fg

 

提取碼：hsj4