分类目录归档:悠哉博主的日常

主题【3】的背景坎坷

[2013年2月17日更新]:此CSS在我的iPhone的浏览器上(chrome和safari)表现不同于电脑上的浏览器,它会使背景图片撑满整个page层(整个网页的大小而不是显示区的大小)。所以针对移动设备也许也需要进行js级的背景调整

正文:
在昨天还是前天记不清了,我终于做好了新主题【3】,最后在弄背景图片的时候废了很长时间。
一开始我以为css里没有可以控制背景图片大小的样式【css2里确实没有,但我忘了伟大的css3..】
于是乎我就用一个img标签来充当背景【曾经也有想用img做背景而被blackglory喷过。。。】,然后再用javascript控制img标签自适应大小[这里我做了很长时间,在获取元素的时候出了些问题,后来还是解决了]。

后来发现了css3里又可以控制背景图大小的样式了,我表情如这个

先说说要用css3实现图片填充背景该怎么做

background-image: url(图片地址);  /*加载背景图*/
background-size: cover;/*设置尺寸,这里是第一个重点,可以让浏览器把背景图铺满整个显示区*/
background-attachment: fixed;/*这里不是必须,但一般要用上面那功能的话也都会需要这个功能:把图片固定住不随滚动条滚动*/
background-position: center;/*这里是两个样式[background-position-x和background-position-y]的集合版,设置为center可以让背景图完全居中*/

接下来还是说说img的做法吧,毕竟花了这么长的时间才弄好的QAQ[这个方法现在用来兼容不支持css3的浏览器{到底可不可以兼容还没有测试过}]

先是一个div包一个img标签

 
 

现在已被注释处理了,低于IE9的版本[我也不清楚IE从哪个版本开始支持css3的,于是就大概IE9好了]才会使用这个img标签的背景
这段代码放在了body内第一位
这个img的id被我定义成backgroundimg。。,外面包围的div设置了固定定位[fixed]样式,而且没有宽高,在显示区正中间。
接着把这个img放在div里,初始就这么定位在了50%,50%的地方。接下来的工作全交给js来完成了。

这一句放在head里,同样也被区别注释了。用来载入兼容模式背景图。

里面放了这些东西

 /*加载背景图*/

    bgimgjopj.ready(function(e) {     //背景图这个标签被解析时
        bgimg = document.getElementById('backgroundimg');//一个背景图的对象
        bgimg.style.display = 'none';//先让它隐藏
        bgimg.src = bgsrc;//bgsrc是config.js中的变量[配置]
        bgimgjopj.load(function() {//图片载入时
            bgimg.realwidth = bgwidth;
            bgimg.realheight = bgheight;//拿到宽高[宽高也是config.js中的变量]
            bgimg.w_h = bgimg.realwidth / bgimg.realheight;//计算宽高比
            bgimg.style.display = 'block';//这个其实不该放在这里的,应在最后才出现,但是由于那什么就懒得改了

            resetbgimg();//运行重设背景图函数
        });

        $(window).resize(function() {//窗口变动时
            windowwidth = window.innerWidth;
            windowheight = window.innerHeight;//得到窗口宽高
            resetbgimg();//运行重设背景图函数
        });

        function resetbgimg() {//重设背景图函数
            /*重设背景图*/
            var winw_h = windowwidth / windowheight;//计算窗口宽高比
            if (winw_h > bgimg.w_h) {//窗口宽高比大于图片宽高比时(这时情况是图片左右撑满,上下溢出窗口外)
                bgimgjopj.height('auto');
                bgimgjopj.width(windowwidth);

            } else {//窗口宽高比小于等于图片宽高比时(这时情况是图片上下撑满,左右溢出窗口外)
                bgimgjopj.width('auto');
                bgimgjopj.height(windowheight);
            }
            bgimgjopj.css({//让图片居中
                "margin-left": (bgimg.offsetWidth / -2),
                "margin-top": (bgimg.offsetHeight / -2)
            });
        }
    });

这样就可以让图片永远撑满窗口而且尽量显示全了。

实在不知该写什么了,这篇完结。

本站更换新域名啦

说到域名这个过程还是真心坎坷啊,主要原因就是家长不帮付钱,说什么好好学习,不要去搞其他东西【我可以说真是这样的人走出学校就是半个废物了么】
换个行。。
luojia.me这个域名也是我日思夜想想要换的了,这次得到这个域名还是我自己的努力。[本站被放在子域”blog.luojia.me上跑”,“www”始终是一个无法完成的工程]
付款这方面么,没有再去求他们【求了也没用】,于是我让同学转账进我的支付宝来付款(我怎么早没想到呢。。),然后开学以后再把钱还给她。
这次由于种种原因我只买了一年的luojia.me,不过也够了,一年里至少可以有机会续费的,共计$9.99【此时按汇率换算62.42冥币】(也没我想像中的那么贵嘛)。
结尾:好高兴吖!!!!!!!!!!
@好基友来庆祝
BlackGlory(顺便测试这里的@有没有用)
顺便道个歉,这次很早就回老家了又很晚回来,所以MC服里我只建了一只小黑,以后有空我还会去的喵!

[PS:原tk地址都已转向对应的me地址,所以tk依然有效]
[更新PS:我发现openshift可以绑定多域名,所以我恢复了tk域名的访问方向,也就是tk仍然可以像以前一样用[除了blog里有些已经定死的链接会让访问调到me域名]]

佳佳Blog新年祭

不知不觉这个博客也已经开了快4个月了(从正常运作开始),日志什么的也零零碎碎的写了64条了(不算这条),我希望这个blog可以一生陪着我(只要wordpress不倒),万一wordpress哪天倒了,我会自己作个blog出来。感谢在这一年里一直都活在我概念里的blackglory、blackfantasy、自由还有等等友爱的大家。
今天我要表演的节目是:没有节目。。。
然后是今年的工作进程:
iTi***模版:没做完;已耗时约6个月
luojia.tk:没做完;已耗时约6个月(雏形做好以后根本就没接着做吖啊喂!)
in-school_work:喵。。。
其它:我到底干了什么!
然后〜今年的新年祭就这样吧。接着做事情去咯!

突然不知为什么就去给我的bilibili空间改了个css

也许是我太耐得住寂寞了,也或者是太爱分心了,【iTi】工程一直都排在了复线程制作[根本就没怎么动吖啊喂!]
回到主题,简单地说就是我给自己的bilibili空间换了个样式,虽然没人去也没有什么日志[bilibili的空间真有人用么。。],但我还是傻了吧唧的熬夜改了下css
先上地址[就当个广告吧~]:http://space.bilibili.tv/589803/list.html
就目前情况来看这个在某些浏览器上看就会是个渣滓..

主题更换日志

旧主题view

新主题view

图片已被充分压缩。。花絮~{之前因为使用高清view图,导致数据库读取崩掉了。。}

现在开始改用主题【3】,更新日志如下

页面的载入速度似乎稍微变快了
评论框修改
背景图片自适应窗口尺寸【把浏览器的窗口宽高调整试试就知道我做了什么了】
更改背景图片
改掉原本模版【2】(从twentyeleven草率改过来的)中之前修改时的bug
回到顶部按钮改用datauri
使用js存放一些常用小图标的datauri码,减小请求次数
提交按钮使用datauri做背景图
内容显示部分适应小屏幕
修改一些样式
加上临时修bug的js
加上内容配置js
把head中的大部分js移入function.js

持续更新…

QQ空间BGM的免费处理方式

众所周知TX的“特别”服务都是要(红黄蓝绿黑彩粉紫魔等)钻的,当然还有QQ会员。
这次在这里谈的是和QQ空间绿钻有关的BGM
大家([ke neng bu])知道,QQ空间有个叫背景音乐的东西,

这是添加音乐的三个方法,用复眼就可以看出来前两个是绿钻专用的,很明显普通用户只可以选第三个,但是我突然发现不管怎么样,我们都应该选第三个才是正确的,why?
因为一旦你绿钻到期或者不想再每月浪费10冥币,那么所谓的正版乐库和添加本地音乐都会翻脸不认人。
既然要选第三个,那就要有外链可以链接,这个可以去百度音乐等等地方找到,但是本文说的不是这么没含量的。
要自由上传音乐,就自己去找免费空间来外链吧骚年们,然后绑个域名。【为啥不用ip呢?因为这些免费空间不能保证永远都正常运作,假如用ip,一旦换了服务器就要换掉背景音乐里所有歌的链接,用域名只要更改域名的指向ip或dns服务就行了】
这就是所谓正版乐库和外链的区别

但是使用过程中没有任何区别,看起来好像所谓的连接率不怎么样,但是听是没有任何问题的。。。所以这是个很好的选择
进我的空间可以听效果【保护好猫耳】

我已经准备什么时候撤掉绿钻了,到时全部换成外链。
外链服务器至少要可以达到以下要求
稍微有点带宽
有很大的存储空间
有很多或者无限流量【不然浏览一多流量就没了】
文件大小最好不限制
不会有清除文件的行为[比如Free Web Hosting Area我一开始用的空间就一直会莫名其妙的删掉一些相对来说和网页无关的文件]
现在我用了一个tk域名绑定在外链空间上jiastorage.tk

自己创建外链服务器的好处是可以自由上传文件,也可以外链一些其他东西【虽说文件安全性不能保证】但是这比每月十元的钻划算多了

文章越来越大了= =

自从用datauri来存放图片,我的文章数据表就变得越来越大了。。
这是纯文章的时候

然后这是用了datauri以后。。

这么做唯一的好处就是博客搬家的时候用不着再去搬上传的文件,缺点就是这个数据库不知什么时候就会有几个G出来。。然后我要怎么备份- –

[更新:博主已洗心革面,不再用datauri了。。]

QQ新增人脸登录

QQ2013 beta1里新加了人脸识别登录的功能。
也就是说。。可能又增加了QQ的风险,别人只要有你的照片,就有可能登录你的QQ
所以不要乱发正脸的照片\(“▔□▔)/
看看这个常规的登录框~

(根据这个QQ自动框选截图的范围来看,窗口占有的面积似乎比实际可视大小还要大一些)

右下角注目

点一下就会出现一下的人脸识别窗口

然后点开始识别

我试了一下,确实是瞬间就识别了,但是我用照片倒是没识别出来,只出现了人脸框,但是无法识别出是我,看来我的脸变形了。。