【BPI-BPI-Webduino Smart 物联网无线控制模块试用体验】网页图片

  • 图片
  • 无线
  • 物联网
  • 网页
  • 顺时针
  • xukejing
  • LV5工程师
  • |      2017-02-11 03:26:24
  • 浏览量 1024
  • 回复:1
今天我们要测试用Webduino Smart控制网页上的图片 我们一起用积木组个小程序,当按钮按下时候,让网页上的图片顺时针旋转45 搭好的积木是下图这样的 我找了个云汉芯城的logo图,地址是http://static.ickimg.com/assets/release3.001/img/pic/logo-300-72.png?v=20160723 程序如下所示
var button;





boardReady({board: 'Smart', url: '192.168.11.104'}, function (board) {

  board.systemReset();

  board.samplingInterval = 50;

  document.getElementById("demo-area-03-image").setAttribute("src",'http://static.ickimg.com/assets/release3.001/img/pic/logo-300-72.png?v=20160723');

  var imageWidth = 281;

  var imageHeight = 61;

  document.getElementById("demo-area-03-image").style.width = imageWidth+"px";

  document.getElementById("demo-area-03-image").style.height = imageHeight+"px";

  button = getPullupButton(board, 4);

  button.on("pressed", function(){

    console.log("pressed");

      var deg = 45;

    document.getElementById("demo-area-03-image").style.transform = "rotate("+deg+"deg)";



  });

  button.on("released", function(){

    console.log("released");

      var deg2 = 0;

    document.getElementById("demo-area-03-image").style.transform = "rotate("+deg2+"deg)";



  });

});
程序运行效果按钮按下,图片旋转45 按钮放开,图片恢复正常角度 最后,感谢Webduino和云汉提供的这次评测机会,我会在接下来的文章里多发一点干货,与大伙儿一起学习和分享该开发板的相关知识。
  • 0
  • 收藏
  • 举报
  • 分享
我来回复

登录后可评论,请 登录注册

所有回答 数量:1
7943603 2017-05-04
:victory::victory:
0   回复
举报
发布
x
收藏成功!点击 我的收藏 查看收藏的全部帖子