标签切换（下部内容区跟着切换）：　　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. C++和extern C

    http://blog.csdn.net/gongmin856/article/details/44228453 C语言中的可变参数:va_list ,va_start,va_arg,va_end h ...

  2. Delphi XE5的Android开发平台搭建[转]

    Delphi XE5支持Android ARM的开发,可以在Android虚拟机里运行,因此建议将XE5安装在64bit的Windows,内存可以大于3GB Delphi XE5安装光盘中包含了最基本 ...

  3. 【巷子】---react-redux---【react】

    一.Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件,conn ...

  4. JAVA常量与变量

    顺着箭头的转换为自动转换逆这箭头的转换为强制转换. 常量 关键字FINAL 命名为大写 标识符 1要以字母数字下划线和￥组成 2首字母不能为数字 3不能是JAVA的关键字和 保留字 4数据类型分为基本 ...

  5. jenkins 邮件配置 二 ***

    Jenkins 有两种邮件通知方式: 1.Jenkins自带的“E-mail Notification” 2.插件:Extended E-mail Notification,是可编辑的邮件配置方式. ...

  6. 启动bind失败

    systemctl start named 报错: control process exited, code=exited status=1 Failed to start Berkeley Inte ...

  7. 黄聪：TortoiseGit(乌龟git)保存用户名密码的方法

    1.在项目文件夹右键--tortoiseGit--设置 2.编辑全局.git/config 3.加上这行代码 里面会有你先前配好的name 和email,只需在下面加一行 [credential] h ...

  8. pandas的离散化，面元划分

    pd.cut pandas.cut(x, bins, right=True, labels=None, retbins=False, precision=, include_lowest=False) ...

  9. python3实现mysql导出excel

    Mysql中'employee'表内容如下: # __Desc__ = 从数据库中导出数据到excel数据表中 import xlwt import pymysql class MYSQL: def ...

  10. ApplicationDomain

    ApplicationDomain 类的用途是存储 ActionScript 3.0 定义表.SWF 文件中的所有代码被定义为存在于ApplicationDomain 中.在使用 Loader 类 A ...