标签切换（下部内容区跟着切换）：　　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. CI 数据库操作总结

    最简单示例 $query = $this->db->query("YOUR QUERY"); foreach ($query->result() as $row) ...

  2. 黄聪：AngularJS中的$resource使用与Restful资源交互（转）

    原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...

  3. IIS - 自动申请、部署Let's Encrypt的免费SSL证书（让网站实现HTTPS协议）

    IIS - 自动申请.部署Let's Encrypt的免费SSL证书(让网站实现HTTPS协议) 2017-12-19发布:hangge阅读:161   一.HTTPS 协议介绍 1,什么是 HTTP ...

  4. 数据类型---列表，for循环

    定义:列表是一个数据的集合,集合内可以放任何数据类型,可对集合进行方便的增删改查操作. L1=[]   #定义空列表 L2=[1,2,3,4]   #存4个值,索引为0-3 L3= ["ab ...

  5. DB2日志清理

    1.在windows系统中,DB2 日志db2diag.log 在什么地方? 以下是IBM网站上的解答 Question Where is db2diag.log for DB2 V9.5 locat ...

  6. 【ZZ】Linux常用指令

    linux常用指令 - 个人文章 - SegmentFault 思否 https://segmentfault.com/a/1190000011068772 查看目录下有什么文件信息 ls //lis ...

  7. 模拟远程SSH执行命令的编解码说明

    模拟一个SSH“远程”执行命令并获取命令结果的一个程序: 1.在C/S架构下,当客户端与服务器建立连接(这里以TCP为例)后,二者可以不断的进行数据交互.SSH远程可以实现的效果是客户端输入命令可以在 ...

  8. [UE4]区分队友

    一.就算角色死亡也应该是能区分属于哪个队伍,因此在ShooterPlayerState中添加一个变量Side(并设置为可复制),用来记录所属队伍. 并且在Begin Play事件中随机分配队伍 二.在 ...

  9. 阿里云直播服务 sdk demo php

    [php] <?php /** * Created by PhpStorm. * User: Administrator * Date: 2016/12/8 0008 * Time: 11:05 ...

  10. Replicating a 2D dynamic array

    转自:https://forums.unrealengine.com/community/community-content-tools-and-tutorials/105-saxonrahs-tut ...