JS图片播放 (仿一些论坛的Flash图片调用)

写了一个小JS代码

用JS播放图片，并点击可以打开设定的链接

当然，每张图片是可以自己设定简单的动画，不设置动画时则直接显示

效果如下

 

实现方式呢

就是DIV+Canvas

当然，我们现在写程序辛苦，还要苦逼的兼容HTML4，所以HTML4下是用div+img实现的

 

而现在的智能移动平台的浏览器，都支持canvas了，而且在尺寸小的情况下，Canvas的效率还算可以

下面把测试代码附上来

 

< body >
         < div  id ="jsapanel"  class ="jsa"  style ="height:400px; width:600px; border:1px solid gray;" ></ div >
         < div  id ="testc" >
        
         </ div >
</ body >
< script  type ="text/javascript"  src ="JSA/JSA.js" ></ script >
< script  type ="text/javascript" >
     var  myjsa  =   new  jsa();
     if  (myjsa._platform.mobile) {
         var  mobilemeta  =  document.createElement( " meta " );
        mobilemeta.setAttribute( " name " ,  " viewport " );
        mobilemeta.setAttribute( " content " ,  " width=device-width, user-scalable=no; " );
        document.head.appendChild(mobilemeta);
    }
     // {ShowIndex:true,IndexPosition:'lb|rb|rt|lt',ShowTooltip:true,TooltipPosition:'',ForceHtml4:false}
    myjsa.SetConfig({ Width:  600 , Height:  400 , ShowIndex: true , IndexPosition: " rb " , ShowTooltip: true , TooltipPosition: " lb " });
    myjsa.SetImageArray([{ src:  ' t1.jpg ' , linkto:  ' http://www.sohu.com ' , timeout:  1000 , tooltip:  " 点击会打开搜狐 " , animation:  " b2t " , animatetime:  500  }, { src:  ' t2.jpg ' , linkto:  ' http://www.sina.com.cn ' , timeout:  2000 , tooltip:  " 点击会打开新浪 " , animation:  " r2l " , animatetime:  500  },
         { src:  " t3.jpg " , linkto:  null , timeout:  3000 , tooltip: " 点击什么也不会打开 " ,animation: " l2r " ,animatetime: 500 }]);
    myjsa.SetContainer( " jsapanel " );
    myjsa.run();

     var  browserarr  =  [ " ie " , myjsa.browser().msie,  " firefox " , myjsa.browser().firefox,  " chrome " , myjsa.browser().chrome,
         " safari " , myjsa.browser().safari,  " opera " , myjsa.browser().opera,  " webkit " , myjsa.browser().webkit,  " html5 " , myjsa.browser().html5];
     var  screenarr  =  [ " screen " , myjsa._screen.width  +   " x "   +  myjsa._screen.height,  " scroll " , myjsa._screen.scrollWidth  +   " x "   +  myjsa._screen.scrollHeight,  " offset " , myjsa._screen.offsetWidth  +   " x "   +  myjsa._screen.offsetHeight];
    showtest(navigator.userAgent  +   " <br/> "   +  browserarr.join( " ,  " )  +   " <br/> "   +  screenarr.join( " ,  " ));

     function  showtest(msg) {
         var  testc  =  document.getElementById( " testc " );
         if  ( ! msg) {
            testc.innerHTML  =   "" ;
             return ;
        }
        testc.innerHTML  =  msg;
    }
</ script >

 

我把测试代码提供下载/Files/xjfhnsd/JSA.rar

里面的js文件是混淆过的

 

目前Canvas方式的动画还太少，只有left2right,right2left,top2bottom,bottom2left四种

当然，canvas可以写成多种动画，比如百叶窗之类的，精力有限，不想添加了

愿意完善的兄弟们，可以邮件我拿js的源码去添加动画, xjfhnsd@163.com

 

这玩意，当不给图片使用动画，而用一串小图片，设置不同的timeout，效果则是另外的一种了，

感兴趣的可以试试~~

 

转载于:https://www.cnblogs.com/xjfhnsd/archive/2012/07/07/2580629.html