common.js:
//对系统按钮的样式进行控制 function showImsg(buttids){ var ids = buttids.split(","); var button; for(var i=0;i<ids.length;i++){ button = document.getElementById(ids[i]); if(button == null || button == undefined){ continue; } if(button.value.length<=4){ button.className="btn_sty2_4"; button.onmouseover = function(){ this.style.cursor="pointer"; this.className="btn_sty22_4"; } button.onmouseout = function(){ this.style.cursor="pointer"; this.className="btn_sty2_4"; } button.onmousedown = function(){ this.style.cursor="pointer"; this.className="btn_sty23_4"; } } if(button.value.length>4){ button.className="btn_sty2_6"; button.style.marginTop="3"; button.onmouseover = function(){ this.style.cursor="pointer"; this.className="btn_sty22_6"; } button.onmouseout = function(){ this.style.cursor="pointer"; this.className="btn_sty2_6"; } button.onmousedown = function(){ this.style.cursor="pointer"; this.className="btn_sty23_6"; } } } }
common.css:
.btn_sty1_4 { background: url("../images/btn_sty1_4.png") no-repeat scroll left top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 29px; line-height: 29px; text-align: center; width: 77px; } .btn_sty12_4 { background: url("../images/btn_sty1_4.png") no-repeat scroll -87px top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 29px; line-height: 29px; text-align: center; width: 77px; } .btn_sty13_4 { background: url("../images/btn_sty1_4.png") no-repeat scroll -174px top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 29px; line-height: 29px; text-align: center; width: 77px; } .btn_sty1_6 { background: url("../images/btn_sty1_6.png") no-repeat scroll left top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 29px; line-height: 29px; text-align: center; width: 97px; } .btn_sty12_6 { background: url("../images/btn_sty1_6.png") no-repeat scroll -107px top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 29px; line-height: 29px; text-align: center; width: 97px; } .btn_sty13_6 { background: url("../images/btn_sty1_6.png") no-repeat scroll -214px top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 29px; line-height: 29px; text-align: center; width: 97px; } .btn_sty2_4 { background: url("../images/btn_sty2_4.png") no-repeat scroll left top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 25px; line-height: 25px; margin-right: 10px; margin-top: 2px; text-align: center; width: 80px; } .btn_sty22_4 { background: url("../images/btn_sty2_4.png") no-repeat scroll -88px top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 25px; line-height: 25px; margin-right: 10px; margin-top: 2px; text-align: center; width: 80px; } .btn_sty23_4 { background: url("../images/btn_sty2_4.png") no-repeat scroll -175px top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 25px; line-height: 25px; margin-right: 10px; margin-top: 2px; text-align: center; width: 80px; } .btn_sty2_6 { background: url("../images/btn_sty2_6.png") no-repeat scroll left top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 25px; line-height: 25px; margin-right: 10px; margin-top: 2px; text-align: center; width: 100px; } .btn_sty22_6 { background: url("../images/btn_sty2_6.png") no-repeat scroll -107px top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 25px; line-height: 25px; margin-right: 10px; margin-top: 2px; text-align: center; width: 100px; } .btn_sty23_6 { background: url("../images/btn_sty2_6.png") no-repeat scroll -214px top rgba(0, 0, 0, 0); border: 0 none; color: #FFFFFF; font-weight: bold; height: 25px; line-height: 25px; margin-right: 10px; margin-top: 2px; text-align: center; width: 100px; }
相关推荐
JavaScript\JS\按钮类css按钮样式1JavaScript\JS\按钮类css按钮样式1
JavaScript\JS\按钮类css按钮样式JavaScript\JS\按钮类css按钮样式2
36种漂亮的CSS3网页按钮Button样式,不看不知道,一看吓一跳,让你以后不用再为按钮的样式担心!
主要介绍了JS控制按钮10秒钟后可用的方法,涉及JavaScript基于时间函数控制页面元素样式动态变换的技巧,需要的朋友可以参考下
按钮样式4
云台控制器+css+jQuery+canvas(鼠标移入移出,按钮改变样式)
公共按钮样式插件化
css3 input按钮样式代码是一款基于CSS3实现的input个性实用提交按钮,可以使页面更加丰满。
jQuery单选多选按钮样式美化代码jquery.1.10.2.min.js,有删除功能,按钮类型有圆心、圆钩、方心、方钩。
jquery.icheck.js复选框样式和单选按钮样式代码
这是一款使用使用CSS3 线性渐变来制作的超酷彩色3D按钮样式。这组按钮分为不同的颜色,尺寸和圆角,使用时只需要添加相应的class类即可,简单实用。
日历 省市联动 按钮样式 js asp js文件调用
主要介绍了javascript实现点击提交按钮后显示loading的方法,涉及javascript动态设置页面元素样式的相关技巧,需要的朋友可以参考下
Switch.js一个iOS样式滑动开关按钮JS插件
里面只是JS样例,谨慎下载 可以参考地址: http://www.jq22.com/jquery-info14913 (按钮样式) http://www.jq22.com/jquery-info5231(上传文件)
js 特效 html 特效 按钮与input框
代码简介:html5分页导航按钮样式动画特效里面总共包含17种不同效果的垂直分页按钮动画特效。
Switch.js是一款可以将任意CheckBox控件转换为iOS样式滑动开关按钮的JS插件。Switch.js使用简单,功能强大,它可以控制滑动按钮的尺寸,颜色,状态等。