JavaScript 控制storyline元素

一、storyline哪些元素可以使用JavaScript 进行控制?
图片、形状、标注、文本框、视频、按钮、标记等元素都可以使用JavaScript 进行控制。
二、要怎么控制storline中的元素。
官方没有提供api接口,默认情况下只能通过触发器控制元素。要实现对元素的控制必须为每个元素添加id和class属性。
三、常用的属性设置
1.元素隐藏
2.元素显示
3.无素淡入淡出
4.元素大小
5.元素颜色
6.缩放元素
7.旋转元素
8.裁剪元素
9.元素层次
10.元素动画
11.添加元素
12.删除元素
13.克隆元素
四、常用的属性控制代码。

storyline3.10下经版本支持jQuery,可以写jQuery代码进行控制。附:jQuery基础教程

//1.元素隐藏显示
$("#name svg").hide();//隐藏
$("#name svg").show();//显示
$("#name svg").toggle();//切换 hide() 和 show()
//2.无素淡入淡出
$("#name svg").fadeIn();
$("#name svg").fadeOut();
$("#name svg").fadeToggle();
$("#name svg").fadeTo();//允许渐变为给定的不透明度(值介于 0 与 1 之间),如fadeTo("slow",0.7);
//说明:隐藏显示、淡入淡出括号里可以填写以下值:"slow"、"fast" 或毫秒。
//4.元素大小,此法适用矩形,别的形状修改后也会变成矩形
var width=200;
var height=300;
$("#name path").attr("d", "M0,0 L" + width + ",0 " + width + "," + height + " 0," + height + "Z")
//5.元素颜色
$("#name path").attr("fill", "#ff0000");
//6.缩放元素
$("#name svg").css("transform", "scale(1.5,1.5)");
//7.旋转元素
   //2d旋转
$("#name svg").css('transform-origin','50% 92.9%');//设置中心点位置50%设置X轴位置,92.9%设置Y轴位置
$("#name svg").css('transform', 'rotate(' + r + 'deg)');//设置旋转角度
//3d旋转
$("#name svg").css('transform-origin','left')
$("#name svg").css('transform', 'rotateY(' + r + 'deg)');

//8.裁剪元素
//clip属性
$('#name svg').css({"position":"absolute","clip":"rect(50px,96px,384px,0px)"});//rect (top, right, bottom, left)
//clip-path 属性
$("#name svg").css({"clip-path": "circle(20% at center)"})
//9.元素层次
$("#name div").parent().css({
        "position": "relative",
        "z-index": 90
    });
//10.元素动画
$("#name svg").animate({left:"100px"});
//11.添加元素
div=$('<div>添加元素</div>');//创建元素
$("#main-window").append(div);
//12.删除元素
$("#name").remove();
//13.克隆元素
$("#name").clone().appendTo("#main-window");

五、为什么要使用JavaScript控制元素?

1.有些功能storyline不具备。如元素旋转、克隆元素、设置元素的颜色等。

2.storyline无法对元素的属性进行批量操作,举个例子,如果想隐藏显示20个元素就得添加40个触器发器。显然效率很低,而采用JavaScript只要一个触发器就可以了。

$(“.juxing svg”).fadeToggle();//这句代码就可以对所有类名是juxing的元素进行隐藏和显示切换。

发表评论