标签切换（下部内容区跟着切换）：　　2016-6-2

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

    $('.res-head .btn').click(function(){

        $(this).addClass('active').siblings().removeClass('active');

        var idx = $(this).index();

        $('.res-body .res-con').eq(idx).addClass('active').siblings().removeClass('active');

    });

});

</script>

<style type="text/css">

.clearfix:after{display:block;content:'';height:0;overflow:hidden;clear:both;}

.res-head{margin:0 auto;width:244px;}

.res-head .btn{display:block;float:left;width:120px;height:34px;line-height:34px;font-size:14px;text-align:center;color:#333;border:1px solid #ccc;cursor:pointer;}

.res-head .btn.active{background:#ff7200;color:#fff;border:1px solid #ff7200;}

.res-head .btn-base{border-right:none!important;}

.res-head .btn-fine{border-left:none!important;}

.res-body .res-con{display:none;}

.res-body .res-con.active{display:block;}

</style>

<div class="res-head clearfix">

    <a class="btn btn-base active">简装</a>

    <a class="btn btn-fine">精装</a>

</div>

<div class="res-body clearfix">

    <div class="res-con active">

        内容区域111111

    </div>

    <div class="res-con">

        内容区域22222

    </div>

</div>

http://www.cnblogs.com/aliyue/archive/2016/06/06/5563334.html　　刮刮卡效果　　2016-6-6

趣味标签色卡：　　2016-6-13

用js生成不重复随机数组，随机控制标签的颜色

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

    if ($('.colors-box').length>0){

        var tmpcolor_len = $('.colors-box .colors').length;

        var tmpcolor_ary = new Array(tmpcolor_len);

        for (var i=0;i<tmpcolor_len;i++){

            tmpcolor_ary[i]=i;

        }

        tmpcolor_ary.sort(function(){    //不重复的随机数组

            return 0.5-Math.random();

        });

        //alert(tmpcolor_ary);

        for (var i=0;i<tmpcolor_len;i++){

            $('.colors-box').find('.colors').eq(i).addClass('colors'+tmpcolor_ary[i]);

        }

    }

});

</script>

<style type="text/css">

.colors-box .colors{display:inline-block;padding:0 10px;color:#fff;height:32px;line-height:32px;margin-right:20px;margin-bottom:20px;font-family:'微软雅黑';font-size:14px;}

.colors-box .colors0{background:#5ca1f5;}

.colors-box .colors1{background:#32c29b;}

.colors-box .colors2{background:#ea5df3;}

.colors-box .colors3{background:#f76584;}

.colors-box .colors4{background:#f27f47;}

.colors-box .colors5{background:#e7bc10;}

.colors-box .colors6{background:#52bd2d;}

</style>

<div class="colors-box">

    <span class="colors">已阅！握爪！</span>

    <span class="colors">32个赞！</span>

    <span class="colors">膜拜</span>

    <span class="colors">阅后即醉</span>

    <span class="colors">任性！</span>

    <span class="colors">干货！</span>

    <span class="colors">高大上</span>

</div>

<ul><li>列表 （左侧糖葫芦串：绿色小圆点）　　2016-6-21

<style type="text/css">

ul,li{margin:0;padding:0;list-style:none;}

.chuan-list{width:150px;padding-left:10px;}

.chuan-list .chuan-item{position:relative;font-size:14px;line-height:24px;padding:0 0 20px 20px;border-left:1px solid #1bbc9b;font-family:'微软雅黑';}

.dot{position:absolute;width:20px;height:20px;left:-10px;top:2px;background:#1bbc9b;color:#fff;font-family:'Arial';text-align:center;line-height:20px;font-size:12px;border-radius:50%;}

</style>

</head>

<body>

<ul class="chuan-list">

    <li class="chuan-item"><span class="dot">1</span>啊啊啊啊</li>

    <li class="chuan-item"><span class="dot">2</span>啊啊啊啊</li>

    <li class="chuan-item"><span class="dot">3</span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>

    <li class="chuan-item"><span class="dot">4</span>啊啊啊啊</li>

    <li class="chuan-item"><span class="dot">5</span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>

</ul>

待补充...

代码： html 页面小效果 （集合，待补充）的更多相关文章

  1. 代码：jquery小效果—— 吸顶

    吸顶: 可以防止滚屏过程中,代码被多次调用 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"& ...

  2. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  3. JS小福利 —— 实时更新的页面小时钟

    今天小女刚学会了一个好玩的小玩意儿~~特来跟大家分享一下~~~ 这是一个有趣的时钟显示程序,可以进行实时的年月日.星期.时分秒更新,有了这组小代码,以后可以作为日期插件应用在大型的JS代码中哦~~ 积 ...

  4. JS-鼠标彩色拖尾小效果

    实现步骤解析: * 这原本就是一个鼠标后面跟随一串小方块的效果,     * 后来我就想,运用之前学的随机数的案例把小方块的颜色做成彩色的,     * 并且每一个小方块的色彩是随机分配而不是我自己手 ...

  5. Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

    Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...

  6. 【Android】纯代码创建页面布局（含异步加载图片）

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  7. 页面loading效果

    当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...

  8. iOS开发之各种动画各种页面切面效果

    因工作原因,有段时间没发表博客了,今天就发表篇博客给大家带来一些干货,切勿错过哦.今天所介绍的主题是关于动画的,在之前的博客中也有用到动画的地方,今天就好好的总结一下iOS开发中常用的动画.说道动画其 ...

  9. CSS3实现几个常用的网页小效果

    主题 由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享.今晚我挤出时间来制作这几个很常用的CSS3网页小效果.最近写JS的时间比例比较多,不过我还是比较钟情于CSS3.所以我还是坚持分享一 ...

随机推荐

  1. NPOI将DataGridView中的数据导出+导出Chart图表图片至Excel

    #region 导出Excel private HSSFWorkbook Workbook = null; private Sheet SheetOne = null; private DataFor ...

  2. 利用curl 模拟多线程

    所谓多线程就是多个 程序同时运行,单线程:执行一段逻辑,等待完成后 在执行另外一个. 多线程:几个逻辑同时进行处理,不需要相互等待,提高了总的执行时间 接下来就用curl实现多线程 实现逻辑 1. f ...

  3. 黄聪：php7配置php.ini使其支持<? ?>

    <? ?>这种写在php配置文件里php.ini法叫short_tags,默认是不打开的,也就是,在默认配置的php里,这样写法不被认为是php脚本的,除非设置 short_open_ta ...

  4. JAVA开源B2C系统

    前言 最近有人想面向境外销售商品,但是又不想依托于亚马逊这些平台,于是找我来帮忙想弄个B2C系统.因为刚开始只是打算试试水,也就不打算投入多少成本了.所以这边就考虑使用开源的B2C系统来直接使用了. ...

  5. C++进阶--解谜operator new/delete

    //############################################################################ // 解谜operator new/del ...

  6. 基于Kafka消息驱动最终一致事务（一）

    基本可用软状态最终一致事务 本用例分两个数据库分别是用户库和交易库,不使用分布式事务,使用基于消息驱动实现基本可用软状态最终一致事务(BASE).现在说明下事务逻辑演化步骤,尊从CAP原则,即分布式系 ...

  7. Ring0 - Lookaside结构

    由于频繁的申请,回收内存会导致在内存上产生大量的内存"空洞".这时使用Lookaside. 1.每次申请固定大小的内存. 2.申请和回收的操作十分频繁. 实现原理: 他先向wind ...

  8. [UE4]C++实现动态加载的问题：LoadClass<T>()和LoadObject<T>() 及 静态加载问题：ConstructorHelpers::FClassFinder()和FObjectFinder()

    转自:http://aigo.iteye.com/blog/2281558 动态加载UObject和动态加载UClass分别用LoadObject<T>(),和LoadClass<T ...

  9. linux驱动开发—基于Device tree机制的驱动编写

    前言Device Tree是一种用来描述硬件的数据结构,类似板级描述语言,起源于OpenFirmware(OF).在目前广泛使用的Linux kernel 2.6.x版本中,对于不同平台.不同硬件,往 ...

  10. C# DataGridView导出Excel

    using Microsoft.Office.Interop.Excel;                using Excel=Microsoft.Office.Interop.Excel; //这 ...