(转)htmlayout仿Picasa照片查看器效果
By
admin
at 2017-11-18 • 0人收藏 • 1644人看过
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();
准备把这个功能添加到GIF录制助手里面去,这样录制完成之后可以直接查看录制效果了.
引用自:http://bbs.aardio.com/forum.php?mod=viewthread&tid=10820&extra=page%3D1
1 个回复 | 最后更新于 2017-11-18
登录后方可回帖
右上角的提示是乱码,要解决他,用