(转)htmlayout仿Picasa照片查看器效果

By admin at 2017-11-18 • 0人收藏 • 306人看过
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 = /**
<!DOCTYPE html>
<html>
<body>
        <div id="hl_ctrl_bar"><span id="close" command="window-close" title="关闭">r</span></div>
        <img id="simulate_area"></img>
</body>
</html> 
**/

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( "C:\Users\Administrator\Desktop\仿Picasa照片查看器效果\res\gifTest1.gif" )

winform.show();
win.loopMessage();

blob.png

准备把这个功能添加到GIF录制助手里面去,这样录制完成之后可以直接查看录制效果了.

引用自:http://bbs.aardio.com/forum.php?mod=viewthread&tid=10820&extra=page%3D1

1 个回复 | 最后更新于 2017-11-18
2017-11-18   #1

右上角的提示是乱码,要解决他,用

/*提示框样式*/
popup {
    font-family: '微软雅黑','宋体'; 
    font-size: 12px; 
    font-weight: normal;
    padding: 0 5px;
}


登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
Htmlayout皮肤Htmlayout皮肤引擎介绍
黑猫Aar教程网:简码编程
C大Aardio论坛:Aar爱好者论坛
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...