搜索文章

FBLOG 简约不简单

前端技术

JavaScript,jquery,css的文章都在这里了。

CSS3 自定义滚动条样式

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?

    webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。

滚动条组成
    ::-webkit-scrollbar 滚动条整体部分
    ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
    ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
    ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
    ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
    ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
    ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

阅读全文➸


HTML5的Video标签的属性,方法和事件汇总

前段时间写了一个基于html5 video的视频播放器,从起初的对其不了解,然后到能够写一个基本完善的自定义播放器。在这个过程中,对video标签的属性,方法,事件有了个全面的认识。下面分类列出来一下。


  • src :视频的属性
  • poster:视频封面,没有播放时显示的图片
  • preload:预加载
  • autoplay:自动播放
  • loop:循环播放
  • controls:浏览器自带的控制条
  • width:视频宽度
  • height:视频高度

阅读全文➸


Jquery单选多选attr设置成功却没有选中的处理办法

工作中遇到这个灵异的问题

  $('ul>li').click(function(event) {
      $('ul>li').removeClass('active');
   $('ul>li').find('input[name=radio]').attr('checked',false);
      $(this).addClass('active');
      $(this).find('input[name=radio]').attr('checked',true);
 });

上面的JS代码,就是一个点击ul下的li,将会选中li中的单选框,但是会出现,选择一遍之后,再次选择将会不生效,搜了好长时间才找到答案。


阅读全文➸


jquery插件ajaxfileupload异步上传

        工作中遇到需要使用ajax上传图片的功能,从网上查了下,发现ajaxfileupload很好用,使用也是很方便。

插入ajaxfileupload脚本,之前必须要引入过Jquery

<script src="js/ajaxfileupload.js"></script>


使用代码

$.ajaxFileUpload
    (
        {
            url: 'upload', //上传的路径 
            secureuri: false,
            fileElementId: 'img', 
            dataType: 'json', 
            success: function (data, status)
            {
                //data为返回的json数据
                $("#img1").attr("src", data.imgurl);
                if (data.result == 'ok') {
                    $('#top-img')[0].src=data.imgurl;  //上传成功后显示图片
                    $('#top-img').css('display','block'); //图片显示
                    $('.top-upload-img').css('display','none'); //上传按钮消失
                    $('#image').val(data.imgurl);  //给表单图片的路径
                } else {
                    alert(data.msg);  //上传错误信息
                }
            },
            error: function (data, status, e)
            {
                alert(e); //服务器错误信息
            }
        }
    );
});


阅读全文➸


CSS实现当大图片超过屏幕自动居中

        经常做页面的时候会遇到占满全屏的图片,然后在小屏幕上就显示的位置不正确了,在网上查了下还真有简单的办法去实现自动居中,并且不用使用js,只要写上CSS样式就可以了。

首先需要给图片外给上一个DIV,然后给DIV加上 样式。

div.banner{
    position:relative;
    width:100%;
    overflow:hidden; 
}



阅读全文➸


搜索文章