标签切换（下部内容区跟着切换）：　　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. ubuntu 阿里云 常出问题 运维工作日志

    一.2015-8.26(数据库 error—28) tmp文件临时数据写入不了----解决办法 1.查看临时文件 ls -l 找到了 2.由此可以查看得出来tmp文件有的权限是有的 3.查看tmp 存 ...

  2. 黄聪：wordpress如何获取访问的网站的cookie值

    $head = wp_get_http_headers( $word_url ); $cookie = $head['set-cookie']; $cookie = substr( $cookie, ...

  3. 51nod 1132 覆盖数字的数量 V2

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1132 题意是给定a,b,l,r求[l,r]内有几个整数可以表示成ax+b ...

  4. 廖雪峰Java3异常处理-1错误处理-2捕获异常

    1捕获异常 1.1 finally语句保证有无错误都会执行 try{...}catch (){...}finally{...} 使用try...catch捕获异常 可能发生异常的语句放在try{... ...

  5. 网站首页多URL可访问，如何集中首页网站权重？

    原文地址:http://ask.seowhy.com/question/8573 百度站长平台Lee在文章<建立符合搜索引擎抓取习惯>一文中提出:唯一性网站中同一内容页只与唯一一个url相 ...

  6. 一次cookie引起系统不断要求重新登录问题分析

    我们的产品里有一配置服务(tomcat),采用ajax来通信交互 但是最近频频发现登录后马上弹出要重新登录的情况,一开始以为是cookie没有带上导致session找不到,后来问题依旧,查看浏览器co ...

  7. Flume原理解析【转】

    一.Flume简介 flume 作为 cloudera 开发的实时日志收集系统,受到了业界的认可与广泛应用.Flume 初始的发行版本目前被统称为 Flume OG(original generati ...

  8. Linux下自制回收站

    Linux下自制回收站 相信熟悉linux系统的人都知道rm的厉害,也大都听说过有rm造成的生产事故,本文将详细介绍如何在linux环境下制作回收站以避免数据误删除,如何恢复回收站中的数据,如何查看回 ...

  9. HDOJ 2006 求奇数的乘积

    #include<iostream> #include<vector> using namespace std; int main() { int n; while (cin ...

  10. centos6.5最小化安装之后装图形化界面

    查看自己系统环境 # cat /etc/issue 先要安装KDE桌面环境,执行命令: # yum groupinstall "X Window System" "KDE ...