js按钮特效（cocos js 怎样做出按钮选中效果）

本文目录

• cocos js 怎样做出按钮选中效果
• 用js函数实现点击按键的效果，比如一个按钮，点击触发回车或者上下左
• JS特效 按钮实现图片左右轮换（总共4张图，img1.jpg，img2.jpg，img3.jpg，img4.jpg）
• 求一段JS特效，将一个下拉菜单的选中的值通过按钮添加到多行文本框

cocos js 怎样做出按钮选中效果

cocos js 做出按钮选中效果示例：

一，首先使用cocos新建一个Cocos2d-js的新项目，然后再cocostudio中创建一个场景，在场景中添加三个按钮分别设置三态的图片

二，打开器，实现代码如下：

var HelloWorldLayer = cc.Layer.extend({

ctor:function () {

this._super();

//导入cocostudio中拼好的界面

mainscene = ccs.load(res.MainScene_json).node;

this.addChild(mainscene);

this.teamButton = ccui.helper.seekWidgetByName(mainscene,“Button_0“);

var btn2 = ccui.helper.seekWidgetByName(mainscene,“Button_1“);

var btn3 = ccui.helper.seekWidgetByName(mainscene,“Button_2“);

//先默认设置一个按钮为选中状态   this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);

this.teamButton.setEnabled(false);

var teamInfo = this.teamButton;

this.teamButton.addTouchEventListener(this.selectedBtn1,this);

btn2.addTouchEventListener(this.selectedBtn2,this);

btn3.addTouchEventListener(this.selectedBtn3,this);

return true;

},

selectedBtn1: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender);

cc.log(“==========商店界面“);

}

},

selectedBtn2: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender);

cc.log(“==========卡牌界面“);

}

},

selectedBtn3: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender);

cc.log(“==========战斗界面“);

}

},

callBack: function (sender) {

if (this.teamButton == sender){

return;

}else{

this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_NORMAL);

this.teamButton.setEnabled(true);

sender.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);

sender.setEnabled(false);

this.teamButton = sender;

}

},

});

var HelloWorldScene = cc.Scene.extend({

onEnter:function () {

this._super();

var layer = new HelloWorldLayer();

this.addChild(layer);

}

});

三，运行就可以查看界面，点击不同的按钮显示不同的输出结果

[Log] ==========商店界面 (CCDebugger.js, line 331)

[Log] ==========卡牌界面 (CCDebugger.js, line 331)

[Log] ==========战斗界面 (CCDebugger.js, line 331)

用js函数实现点击按键的效果，比如一个按钮，点击触发回车或者上下左

document.onkeydown = function (e) {
      if (!e) e = window.event;
      if ((e.keyCode || e.which) == 13) {
        var obtnLogin = document.getElementById(“submit_btn“);  //submit_btn为按钮ID
        obtnLogin.focus();　　　　　　　　　 fun();//提交按钮触发的方法
      }
    }

JS特效 按钮实现图片左右轮换（总共4张图，img1.jpg，img2.jpg，img3.jpg，img4.jpg）

var picID = 0;//换成网页中那幅图在picURL中的序号(记得要从0开始数)
var picURL = [“images/img1.jpg“,“images/img2.jpg“,“images/img3.jpg“];//将图片链接地址放进来，数量随意
function showimg(str){
　if(str==“L“){
　　if(picID==0){
　　　picID = picURL.length-1;
　　　document.getElementById(“advimg“).src = picURL[picID];
　　}else{
　　　document.getElementById(“advimg“).src = picURL[--picID];
　　}
　}else if(str==“R“){
　　if(picID==(picURL.length-1)){
　　　picID = 0;
　　　document.getElementById(“advimg“).src = picURL[picID];
　　}else{
　　　document.getElementById(“advimg“).src = picURL[++picID];
　　}
　}
}

求一段JS特效，将一个下拉菜单的选中的值通过按钮添加到多行文本框

《tr》
《td align=“center“ class=“tableHeader3-wn“》所属类别《/td》
《td class=“tableHeader3-wn“ align=“left“》
《table》
《tr》
《td》
《select id=“srcList“ name=“srcList“ multiple=“multiple“ size=“12“ ondblclick=“addSort()“》
《option value=“1“》VALUE1《/option》
《option value=“2“》VALUE2《/option》
《option value=“3“》VALUE3《/option》
《option value=“4“》VALUE4《/option》
《/select》
《/td》
《td》
《a href=“#“ onclick=“addSort()“ style=“height:20px;border: 1px solid #99BBE8;margin:auto; padding:0px; text-align:center;
width:30px; display:block; background-image:url(${ctx}/images/button.gif);
text-decoration:none; font-size:14px; color:#282523; padding-top:4px;“》添加《/a》 
《a href=“#“ onclick=“deleteSort()“ style=“height:20px;border: 1px solid #99BBE8;margin:auto; padding:0px; text-align:center;
width:30px; display:block; background-image:url(${ctx}/images/button.gif);
text-decoration:none; font-size:14px; color:#282523; padding-top:4px;“》移除《/a》
《/td》
《td》
《select id=“destList“ name=“destList“ multiple=“multiple“ size=“12“ ondblclick=“deleteSort()“》
《/select》
《/td》
《/tr》
《/table》

《/td》

《/tr》

《script
type=“text/javascript“》
function addSort(){
var src = document.getElementById(’srcList’);
var dest = document.getElementById(’destList’);

for (var i = 0; i 《 src.options.length; i++)
{
if (src.options[i].selected)
{
var exist = false;
for (var j = 0; j 《 dest.options.length; j++)
{
if (dest.options[j].value == src.options[i].value)
{
exist = true;
break;
}
}
if (!exist)
{
var opt = document.createElement(’OPTION’);
opt.value = src.options[i].value;
opt.text = src.options[i].text;
dest.options.add(opt);
}
}
}
}
/** 删除分类 */
function deleteSort(){
var dest = document.getElementById(’destList’);

for (var i = dest.options.length - 1; i 》= 0 ; i--)
{
if (dest.options[i].selected)
{
dest.options[i] = null;
}
}
}

《/script》