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 和 CSS 按钮样式的相关知识点： ### 一、HTML 页面结构 1. **文档类型声明**：虽然文档中未明确指定，但通常一个完整的 HTML 文件应该以 `<!DOCTYPE ...
在压缩包“按钮样式4”中，可能包含一个或多个CSS文件（如`styles.css`）用于定义按钮样式，一个或多个HTML文件（如`index.html`）用于展示和测试按钮，以及可能的JavaScript文件（如`script.js`）包含了使用jQuery...
根据给定的信息，我们可以推断出本文档主要讨论了如何使用CSS来设计两种不同样式的按钮，这些按钮可能被用于JavaScript或JS相关的项目中。接下来，我们将深入分析这两种按钮类别的CSS样式，并提取出其中的关键知识点...
本资源"css3 input按钮样式代码.zip"正是利用这些特性来定制input类型的按钮样式，以增强页面的视觉效果和用户体验。 输入框(input)是HTML表单中的基本元素，通常用于用户输入数据。在传统HTML中，input按钮样式...
本文将深入探讨ASP.NET按钮样式的源码及其背后的实现原理。 在ASP.NET中，按钮样式通常通过CSS（层叠样式表）来定制。CSS允许开发者控制网页元素的外观，包括字体、颜色、大小、布局等。对于按钮样式，我们可以...
3. JavaScript 和库：通过 JavaScript 实现动态按钮效果，如 jQuery UI 提供了丰富的按钮样式库。 4. UI 框架：如 Bootstrap、Material-UI 等提供现成的按钮组件，简化开发工作。 5. SVG：对于复杂背景或图标，...
在移动应用和网页设计中，按钮样式是用户体验的重要组成部分，特别是在单选和复选框的设计上。"单选复选按钮样式"这个主题主要关注如何创建吸引人的、易用的移动端交互元素，以提高用户的操作体验。下面我们将深入...
总的来说，这款“5款纯css3按钮样式”资源对于学习和应用CSS3技术非常有价值，它展示了如何通过纯CSS实现多种按钮效果，而无需依赖JavaScript或者其他外部库。对于网页设计师和前端开发者来说，理解并掌握这些CSS3...
在这个"jQuery单选多选按钮样式美化代码.zip"压缩包中，包含了一套利用jQuery实现的单选和多选按钮的美化方案。下面我们将详细探讨这一主题。 首先，`jquery.1.10.2.min.js`是jQuery的核心库文件，版本为1.10.2，这...
在云台控制器中，jQuery可以用来监听用户的鼠标事件，如`mouseenter`和`mouseleave`，以便在用户将鼠标悬停在按钮上时触发相应的CSS样式改变。同时，jQuery的`.animate()`方法可用于创建平滑的过渡效果，比如按钮在...
按钮的JS样式设置是指使用JavaScript语言来设置按钮的样式和行为。通过使用JavaScript，可以对按钮进行各种自定义，例如改变按钮的名称、颜色、大小、形状等。同时，JavaScript也可以用来控制按钮的行为，例如当用户...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制和创新功能，其中之一就是创建出各种视觉效果强烈的3D按钮。"纯CSS3超酷彩色3D按钮样式.zip"是一个资源包，它利用CSS3的特性，帮助开发者轻松地...
公共按钮样式插件化
CSS文件夹包含了所有按钮样式的样式表，fonts文件夹存放了可能用到的字体文件，img文件夹则存储了按钮可能需要的图像资源，而js文件夹则包含可能的JavaScript代码，用于增强交互效果。 5. **兼容性考虑**：尽管CSS3...
标题中的“一款不错的单选按钮样式”提示我们，这篇内容可能涉及前端开发，特别是关于用户界面（UI）设计中的单选按钮美化或自定义。单选按钮是网页表单中常见的交互元素，允许用户在一组互斥选项中选择一个。 在...
这个"css+js图片水平滚动带控制按钮"的资源正提供了这样的功能，它结合了CSS样式和JavaScript脚本，为网页开发初学者提供了一个实用的解决方案。 首先，我们来看CSS在其中的作用。CSS（Cascading Style Sheets）是...
2. **CSS样式控制**：为了实现文字滚动，可能需要调整CSS属性如`overflow`、`height`、`position`等，创建一个滚动区域。此外，`animation`或`transition`属性可以用来平滑滚动过程。 3. **事件监听**：要实现控制...
jQuery.iCheck.js库为了解决这一问题应运而生，它提供了丰富的自定义样式，让复选框和单选按钮变得更具吸引力。 jQuery.iCheck.js是一款强大的插件，由Alexey Kuznetsov开发，它能够使传统的HTML复选框和单选按钮...
"js特效按钮控制图片左右自动滚动"这个主题就是关于如何利用JavaScript实现一个交互式的图片展示功能，让用户可以通过按钮控制图片在水平方向上自动或手动滚动。这个功能常用于产品展示、相册浏览等场景，为用户提供...