随身笔记

作者： admin

  • holder.js是什么缩略图占位插件

    Holder 可直接在客户端渲染图片的占位。支持在线和离线，提供一个链式 API 对图像占位进行样式处理，holder.js也是Bootstrap所使用的插件。

    这是一个比较有用的插件,可以是你的缩略图,以及不显示图片时占位图片,比较好看.当然他的用法不仅仅使这些.我还利用这个插件绘制了一些小图标,为网站增色不少,而且速度也比图片的好很多.好了直接看例子吧.

    holder
    案例源文件下载

  • 火狐无法访问带端口的网址

    火狐禁用了带端口的网址其实浏览器是为了安全考虑，很多后门程序都是通过网站挂马通过网站访问后偷偷在后台跳转带端口网站，但有时候我们需要火狐的fireBug功能来检测网站就不得不开启其他端口的访问了。

    打开火狐浏览器，直接在地址输入：about:config

    huohu_dk

     

    在“首选项名称”栏中鼠标右键创建一个字符串名称为：network.security.ports.banned.override

    huohu_dk_2

     

    点击确定后就输入你要开放的端口号，在点确认就可以直接访问带端口的网址了。

  • 用css让div只显示横向x轴滚动条

    学习CSS也有一段时间了，发现对一些不常用的样式属性来说真的很陌生，不常拿出来晒晒还真容易忘记，现在需要做一个效果是让指定div只显示横向滚动条也就是只有x轴滚动条出现，大家都知道网站内容过多一般都有纵轴也就是y轴滚动条出现，如果实现只显示横向x轴滚动条呢？

    [code]<div style=”width:360px;height:120px; overflow-x:scroll; border:1px solid red;”>

    <ul style=”width:400px;”>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    <li>你好1</li>
    </ul>

    </div>[/code]

    其实在一个div层中设置固定的宽度然后设置允许出现x轴滚动条overflow-x:scroll，这样只要在这设置好的div层中加入的内容要比这外层的内容宽度大就会出现x轴滚动条了。

  • 纯css2.1制作简易导航


    一般网站导航都使用jquery特效居多，但是利用纯css样式也可以打造一个简单的导航效果，不支持IE6这里可以用jquery弥补。

    [code]<style>
    *{ margin:0; padding:0;}
    li{ list-style-type:none; height:16px;}
    div li:hover,div:hover{ background:yellow; position:relative}
    div.a{position:relative}
    div.a ul{ position:absolute;top:100%;*top:16px; left:0; visibility:hidden}
    div.a:hover > ul{visibility:visible}
    div.a > ul li:hover > ul{visibility:visible}
    div.a > ul >li{ position:relative;}
    div.a ul ul{position:absolute;visibility:hidden; left:100%; top:0;}
    </style>[/code]

    [code]<div class=”a”>
    asdasdf
    <ul>
    <li><a href=”#”>12312312</a></li>
    <li><a href=”#”>12312312</a></li>
    <li><a href=”#”>12312312</a></li>
    <li><a href=”#”>12312312</a>
    <ul>
    <li><a href=”#”>12312312</a></li>
    <li><a href=”#”>12312312</a></li>
    <li><a href=”#”>12312312</a></li>
    <li><a href=”#”>12312312</a></li>
    </ul>
    </li>
    </ul>
    </div>[/code]

  • jquery 自动滚动新闻列表

    gundong_news
    [code]function domm(){
    $(‘ul’).children(‘li’).first().appendTo(‘ul’);
    }

    var nihao = setInterval(domm,2000);

    $(‘li’).hover(function(){
    clearInterval(nihao);
    },function(){
    nihao = setInterval(domm,2000);
    });[/code]

     

    [code]<ul>
    <li><a href=”#”>111</a></li>
    <li><a href=”#”>222</a></li>
    <li><a href=”#”>333</a></li>
    </ul>[/code]