历史版本2 :利用JS制作旋转木马效果 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
一、概述编辑
见过旋转木马吗？目前很多画面都要用旋转木马的效果来展示，现在我们就用JS的效果来实现它。
二、内容编辑
1、首先新建一个frm表单，在里面添加一个“绝对画布块”，在右侧的“事件”，新建一个“初始化后事件”，代码如下：
setTimeout(
function(){
$("div[widgetname='ABSOLUTE0']").append("
<div id=\"box\">
<div class=\"slide\">
<ul>
<!--下方将src处链接填写自己的图片链接地址-->
<li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"啊啊啊\"></a></li>
<li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"啊啊啊\"></a></li>
<li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"啊啊啊\"></a></li>
<li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"啊啊啊\"></a></li>
<li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"啊啊啊\"></a></li>
</ul>
<div class=\"arraw\"><a href=\"javascript:;\" class=\"next\"></a><a href=\"javascript:;\" class='prev'></a>
</div>
</div>
</div>
<!--以下为设置旋转木马效果-->
<script>var box = document.querySelector('#box');var slide = document.querySelector('.slide');var arraw = document.querySelector('.arraw');var lis = document.querySelectorAll('li');var json = [ { width:400,top:20,left:120,opacity:20,z:2,id:1},{ width:600,top:70,left:50,opacity:60,z:3,id:2},{ width:800,top:100,left:150,opacity:100,z:4,id:3},{ width:600,top:70,left:350,opacity:60,z:3,id:4},{ width:400,top:20,left:370,opacity:20,z:2,id:5}];var next = document.querySelector('.next');var prev = document.querySelector('.prev');var timer = null;var flag = true;move();run();function run(){clearInterval(timer);timer = setInterval(function(){if(flag == true){flag = false;move(true);}},500);}function move(x){if(x != undefined){if(x){json.push(json.shift());}else{json.unshift(json.pop());};};for(var i = 0; i<json.length; i++){animate(lis[i],{width: json[i].width,top: json[i].top,left: json[i].left,opacity: json[i].opacity,zIndex: json[i].z},function(){flag = true;})};}function animate(obj, json, callback){clearInterval(obj.timer);obj.timer = setInterval(function(){var stoped = true;for(var k in json){var leader = 0;if(k == 'opacity'){leader = Math.round(getStyle(obj, k)*100) || 100;}else {leader = parseInt(getStyle(obj, k)) || 0;};var step = (json[k]-leader)/10;step = step > 0? Math.ceil(step) : Math.floor(step);leader = leader + step;if(k == 'opacity'){obj.style[k] = leader/100;obj.style['filter'] = 'alpha(opacity='+ leader +')';}else if(k == 'zIndex'){obj.style['zIndex'] = json[k];console.log(666);}else{obj.style[k] = leader + \"px\";}if(leader != json[k]){stoped = false;}};if(stoped){clearInterval(obj.timer);callback && callback();};},50);};function getStyle(obj, attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return window.getComputedStyle(obj, null)[attr];};};
</script>")
},20);
2、然后新建一个css文件，在css文件中添加代码如下：（然后保存为一个css文件，放在 盘符:\%tomcat%\webapps\WebReport文件夹下）
ul li {
list-style: none;
}
*{margin:0;padding:0;}
#box {
width: 1200px;
margin: 20px auto;
}
.slide {
height: 200px;
position: relative;
}
.slide ul {
height: 50%;
}
.slide li {
position: absolute;
left:200px;
top:0;
}
.slide li img{
width: 50%;
}
3、在工具栏“服务器”-“服务器配置”选项中选择“引入css”选项卡，并引入刚刚创建的css文件
4、进行预览
三、结论及注意事项编辑
在使用中照片是以轮播的形式出现，带有旋转木马的效果。
注意：1、用于frm表单中，添加JS初始化事件中，需要替换照片时需要替换照片的链接。 2、cpt导入css文件的操作与frm导入css文件不一样，注意操作步骤。