标签切换（下部内容区跟着切换）：　　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. 关于linux中的system函数

    Linux下使用system()函数一定要谨慎 https://blog.csdn.net/senen_wakk/article/details/51496322 system()正确应用 https ...

  2. C++进阶--构造函数和析构函数中的虚函数

    //############################################################################ /* 任何时候都不要在构造函数或析构函数中 ...

  3. 【Properties】在Properties中配置List

    my.properties master.pool[0].id=poolId001 master.pool[0].endpoint=http://192.168.1.101:8080/v1 maste ...

  4. 1119.（重、错）Pre- and Post-order Traversals

    题目大意: 给定一棵树的结点个数n,以及它的前序遍历和后序遍历,输出它的中序遍历: 如果中序遍历不唯一就输出No,且输出其中一个中序即可,如果中序遍历唯一就输出Yes,并输出它的中序 思路:(转载) ...

  5. Dubbo(4)消费Dubbo服务

    消费就是一个远程调用服务的过程: 1.项目结构:     2.项目依赖pom.xml: <project xmlns="http://maven.apache.org/POM/4.0. ...

  6. 廖雪峰Java2面向对象编程-5包和classpath-1包package

    1.package的意义 如下,存在多个相同类名的文件.当引用Person类,将无法确定引用小红,还是小明的Person类,即同名类的冲突. 小明的Person类:Person 小红的Person类: ...

  7. 配置允许匿名用户登录访问vsftpd服务，进行文档的上传下载、文档的新建删除等操作

    centos7环境下 临时关闭防火墙 #systemctl stop firewalld 临时关闭selinux #setenforce 0 安装ftp服务 #yum install vsftpd - ...

  8. python之路——6

    王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 增dic['age'] = 21 dic.setfault()删popcleardel popitem ...

  9. xcode pod install 安装失败，提示缺少文件

    I had the same problem in Xcode 6.1.1. I did the following to solve it: Set the configuration file s ...

  10. mysql的DATE_FORMAT参数格式

    mysql有个字段是DATETIME类型,要实现可以按月统计,该怎么写sql语句?select month(f1) from tt group by month(f1)or select DATE_F ...