import win.ui;

/*DSG{{*/

var winform = win.form( text = "仿Picasa照片查看器效果";exmode="toolwindow" )

/*}}*/

winform.transparent(true);//啟用分層窗口以支持透明

winform.fullscreen(true);//全屏

import web.layout;//導入內置瀏覽器引擎

import web.layout.behavior.windowCommand;//導入標題欄按鈕支持庫

wbLayout = web.layout(winform); //創建瀏覽器

wbLayout.html = /**

r

**/

wbLayout.css = /**

html { background: none; } /* HTML背景透明 */

body, html { margin:0; padding:0; height:100%; width:100% }

body { margin:0; outline: none; background-color:rgba(0,0,0,0.7); }

/* 窗體控制按鈕 */

#hl_ctrl_bar { max-width: max-intrinsic; padding-right: 5px; position: absolute; right:0; top:0; padding: 0; }

#hl_ctrl_bar span {

display: block; float: left; color: #fff; line-height: 22px; padding: 0 5px;

font-family: Webdings; font-weight: bold; font-size: 13px;

behavior: windowCommand; /* 添加標題欄按鈕交互行為 */

}

#hl_ctrl_bar #close {

width: 40px; height: 40px; padding:0; overflow: hidden;line-height: 28px;

text-indent: 16px; font-size: 14px;background-color:#666; border-radius:0 0 0 100%;

}

#hl_ctrl_bar span#close:hover { background-color: #da3610; }

#simulate_area[ready]{

background:#000;/* 設背景色后發光效果性能會好點 */

outline:15px glow #000 0px;

width:0; height:0;

}

/* 圖像已下載完成 */

#simulate_area[src]:not(:incomplete){

top: 50%%; left: 50%%; right: 50%%; bottom: 50%%;

position: absolute;

/*初始化事件*/

assigned!:

self.start-animation( 0.9s ); /*啟動動畫*/

/*動畫事件*/

animation-step!:

self::width = morph("cubic-in-out", 1px, self.min-intrinsic-width()),

self::height = morph("cubic-in-out", 1px, self.min-intrinsic-height() );

animation-end!:

self.ready = "true"; /* 動畫完了再顯示發光效果 */

}

**/

winform.updateImage = function(url){

var ltEle = wbLayout.queryEle('#simulate_area'); //CSS選擇器獲取節點對象

ltEle.src = url;//動態修改圖像

}

//預覽指定圖像

winform.updateImage( "http://bbs.aardio.com/data/attachment/portal/201308/20/165515p11prhr96zp919xh.jpg" )

winform.show();

win.loopMessage();

總結

以上是生活随笔為你收集整理的html5手机网站照片查看器,HTMLayout仿Picasa照片查看器效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。