零基础建站培训教程介绍

当前位置:

Jquery 如何制作网站中的闪图(闪烁按钮)

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

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

如何制作网站中的闪图

方法/步骤

  1. 先用HTML和CSS写出一个基本的按钮。控制为红色背景,白色文字。(如果不懂代码,请先学习一下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. 通过JQuery代码来控制,每隔1秒添加一次样式,每隔1秒去除一次样式,达到每隔1少闪烁一次的效果。(可以修改代码里1000为自己想要的间隔时间)
    
    
    <script>
        setInterval(function(){
        $('#mazixun a').toggleClass('ired');
        }, 1000);
    </script>

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

学习建网站请选择学做网站论坛零基础建站课程