Jquery 如何制作网站中的闪图（闪烁按钮）

说到制作网站中的闪图，大家第一会想到使用闪图制作工具制作一个GIF动图。这是一种常用的方法，软件可以制作出颜色丰富的闪图。但是这种方法存在着很大的弊端，就是修改起来特别麻烦，如果想修改一张闪图上文字，就需要再次用闪图工具编辑闪图中的每一帧图片才可以。

对于我们做网站的学员，如果想制作网站中的闪图或者闪烁按钮，除了闪图工具之外，还可以使用Jquery代码来实现，并且以后修改起来特别简便，直接在代码里修改即可。效果如下图

方法/步骤

1. 先用HTML和CSS3写出一个基本的按钮。控制为红色背景，白色文字。（如果不懂代码，请先学习一下HTML入门教程）

   
    <style>
   
   .morebtn{margin:20px auto 40px;text-align:center;}
   
   .morebtn a{display:block;width:200px;height:40px;line-height:40px;margin: 0 auto 10px;}
   
   .iblue a{background:#00AAEA;color:#fff;}
   
   #mazixun a{background:#f00;color:#fff;border:2px solid #f00;font-weight:600;}
   
   #mazixun{text-align:center;}
   
   </style>
   
   
   
   
   
   <div id="mazixun" class="morebtn">
   
       <a class="" href="#" target="_blank">免费送检测 立即咨询</a>
   
       <span class="jinxian">仅限每日前3名</span>
   
   </div>
   
   

2. 再写一个CSS样式，来控制变化后的样式。控制为透明背景，红色边框、红色文字。

   
   .ired{background:none !important;color:#f00 !important;}
   
   

3. 通过javascript 定时器代码来控制，每隔1秒添加一次样式，每隔1秒去除一次样式，达到每隔1少闪烁一次的效果。（可以修改代码里1000为自己想要的间隔时间）

   
   <script>
   
       setInterval(function(){ 
   
       $('#mazixun a').toggleClass('ired');
   
       }, 1000);
   
   </script>
   
   

通过以上的步骤，就可以在自己建网站时，制作出一个闪图或者闪烁按钮了。