零基础学做网站培训介绍

当前位置:

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>

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

发表评论

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

相关教程

  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中
  • 说到制作网站中的闪图,大家第一会想到使用闪图制作工具制作一个GIF动图。这是一种常用的方法,软件可以制作出颜色丰富的闪图。但是这种方法存在着很
  • 作者: 小学霰Email: xiaoxueba@sina.com详细内容:张老师,您好,看了您的学做网站教程视频,我在论坛上下载了一个DW软件,但是我看到视频课
  • 很多人在使用DZ程序做论坛网站后,会发现在论坛发贴时,上传附件在IE浏览器下不显示任意图标,呈现空白状态。如下图:究其原因是由于DISCUZ程序
  • 使用DZ程序做论坛网站建设时,它的贴子编辑器是不带发布视频按钮的,需要我们通过论坛网站后台去开启这个功能。DZ论坛编辑器开启视频按钮功能的