您的位置：首页 > Web前端 > JavaScript

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

2012-07-07 14:54 411 查看

写了一个小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，效果则是另外的一种了，

感兴趣的可以试试~~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航