JS打造抖动的按钮特效(鼠标放上去开始抖动)

<HTML><HEAD>
<TITLE>JS打造抖动的按钮特效(鼠标放上去开始抖动)_石家庄水泵厂|草坪销售</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9><BR><BR>
<CENTER>鼠标抖动的按钮</span>
</CENTER><BR>
<CENTER>
<TABLE borderColor=#FFCC00 border=5 borderlight="green">
  <TBODY>
  <TR>
    <TD align=left>
      <SCRIPT language=JavaScript>
<!-- Begin
pos = 15;
TO = null;
function shake_funct2(object,speed)
{
  obj = eval(object)
  txt = clear_space(obj.value);
  if (pos == 15)
  {
   txt = txt + "   ";
   pos = -15;
  }
  else
  {
   txt = "   " + txt;
   pos = 15;
  }
  obj.value = txt;
  obj.style.width = parseInt(obj.style.width) + pos;
  obj = object
  sp = speed
  TO = setTimeout("shake_funct2(obj,sp)",speed);
}

function clear_space(text)
{
 while (text.substring(0,1) == " ")
 {
  text = text.substring(1,text.length);
 }
 while(text.substring(text.length-1,text.length) == " ")
 {
  text = text.substring(0,text.length-1);
 }
 return text;
}

function end_shake_funct2(object)
{
  clearTimeout(TO);
  obj = eval(object);
  txt = clear_space(obj.value);
  obj.value = txt;
  //alert(pos);
  if (pos == -15)
  {
   obj.style.width = parseInt(obj.style.width) +15;
  }
  pos = 15
}
//  End -->
</SCRIPT>
      <FORM name=myform2>
      <TABLE border=0>
        <TBODY>
        <TR>
          <TD>一般抖动的按钮</TD>
          <TD align=middle width=160><INPUT onmouseover=shake_funct2(this,100) style="FONT-SIZE: 12px; WIDTH: 150px" onmouseout=end_shake_funct2(this) type=button value="一般速度">
          </TD></TR>
        <TR>
          <TD>快速抖动的按钮</TD>
          <TD align=middle width=160><INPUT onmouseover=shake_funct2(this,50) style="FONT-SIZE: 12px; WIDTH: 150px" onmouseout=end_shake_funct2(this) type=button value="更快速度">
  </TD></TR></TBODY></TABLE></FORM></TD></TR></TBODY></TABLE></CENTER>
<br>

</BODY>
</HTML>
时间: 2024-10-17 01:00:20

JS打造抖动的按钮特效(鼠标放上去开始抖动)的相关文章

不用js实现鼠标放上去改变文字内容

css样式 .remind span {display:block;margin-top:-22px;} .remind a:hover {padding-top:22px;}.remind a {float:left;overflow:hidden;}.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;} html代码 <div class="remind"><a href=&

一款纯css3实现的鼠标经过按钮特效

今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div align="center"> <div class="contener"> <div class="txt_button"> WIFEO</div> <div class="circle">

css特效,鼠标放上显示标题说明

鼠标放上去,出现屏蔽层.标题.说明,第一个有3D上下滑动效果,第二个有渐变效果 两个css实现的效果图如下: 1. CSS样式特效 1 <style type="text/css"> 2 3 *{ 4 margin:0; 5 padding:0 6 } 7 8 body{font:400 14px/150% 'Microsoft YaHei',Tahoma, Helvetica, Arial, sans-serif; color:#424242; background:#f

JS打造的弹性跳跃的图片效果且感应鼠标放大

<html> <title>JS打造的弹性跳跃的图片效果且感应鼠标放大丨行车记录仪官网|大疆官网</title> <body> <script> var brOK=false; var mie=false; var aver=parseInt(navigator.appVersion.substring(0,1)); var aname=navigator.appName; var mystop=0; var step=0.2; function

ybutton 高端大气上档次华丽的按钮特效

小菜偶然在某网站中看到一款非常华丽的按钮特效,感觉十分有必要抄袭下来,以备日后使用. 简单描述一下按钮的效果:鼠标移到按钮上的时候,会出现灯光闪过的效果,非常的高端. 但遗憾的,这么牛逼的效果,仅仅兼容谷歌浏览器,连火狐都识别不了. 因为这个效果没有用图片,更没有用js,纯css打造,因此涉及一些高级css技术,造成只有谷歌能识别.但即便是这样,在其他浏览器下的效果也还可以,不至于不堪入目. 先来张效果图(其实,图上看不出什么): ybutton在线演示 ybutton GitHub项目地址 y

基于jQuery点击加载动画按钮特效

分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <p> <button c

CSS+JS打造的黑白风格网页计算器

JavaScript版网页计算器,仿Vista风格,计算器中的按钮做的想当漂亮,由此也增加了对此计算器的专业好感.鼠标移在计算器上,有响应效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

JavaScript基础 通过id查找节点 通过节点的style属性添加鼠标放上出现小手的效果 getElementById style

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

JavaScript基础 鼠标放上触发事件onmouseover 鼠标移开触发事件onmouseout

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"