lizhenqiu blog

十种图片替换文本CSS方法

很多网站的logo都使用图片替换文本来实现，而且在一些情况下也有使用图片效果来替换难以实现的文本效果。这些制作我想大家在平时制作中都或多或少的碰到过，那么今天我老话重谈，整理了十种图片替换文本的制作方法。希望对大家有所帮助。

制作原理：

使用图片替换文本，其原理是相当的简单：就是在样式中使用背景图片来替换掉HTML模板中的文本内容，从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点，优点就是能实现一些特殊的页面效果，缺点就是需要加载图片，而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处，另外据说会对搜索引擎的搜索有影响，对于这一点没有考究过。那么我们也不去控寻这方面的问题，我们一起来看今天所要说的图片替换文本的制作方法。

方法一：
HTML Markup

<h1 id="technique-one">
  <a href="#">w3cplus</a>
</h1>

CSS Code:

#technique-one {
  width: 329px;
  height: 79px;
  background-image: url(images/w3cplus-logo.png);
}
#technique-one a {
  display: none;
}

这种方法被称为“FIR”方法， Joe Clark在《Facts and Opinion About Fahrner Image Replacement》一文中有做深入的介绍。使用这种方法需要注意两点：

结构性需要增加一个标签包裹文本；如上面的HTML Markup所示；
需要把背景图设置在外标签上，并且将文本外标签隐藏。
这种方法有一个不好的地方就是不利于阅读器浏览网页。

方法二：
HTML Markup

<h1 class="technique-two">w3cplus</h1>

CSS Code

.technique-two {
  width: 2329px;
  height: 79px;
  background: url(images/w3cplus-logo.png) no-repeat top right;
  margin: 0 0 0 -2000px;
}

这种方法是Radu Darvas创建的，使用负margin配合宽度来制作。如果运用在简单之处，此方法可行，但对于复杂的布局中，大家还需慎用。因为其有可能会影响你的页面布局。

方法三：
HTML Markup

<h1 class="technique-three">w3cplus</h1>

CSS Code

.technique-three {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  text-indent: -9999px;
}

这种方法是由Mike Rundle创建，并且简称为Phark方法，也是目前使用图片替换文本常和的方法。这种方法简单易懂而且支持阅读器之类浏览网页。其关键之处使用“text-indent属性，并且给其设置一个较大的负值，达到隐藏文本的效果，”如果你想了解的更深可以参考一下Malarkey Image Replacement (MIR)。

方法四：
HTML Markup

<h1 class="technique-four">
  <a href="#">
   <img src="images/w3cplus-logo.png" alt="w3cplus" />
 </a>
</h1>

CSS Code

.technique-four {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  text-indent: -9999px;
}

这种方法，我不知道来自源于何处，也不知道其有什么优势之处，可以说他和方法三没有多大的区别，只是上面的替换的是文本，下面是替换的图片而以。这样使用我至今没有整明白是为什么?不知道是不是和SEO方面有关系。无从考究，先放上来给大家参考一下。

方法五：
HTML Markup

<h1 class="technique-five">
  <img src="images/blank.gif" alt="w3cplus" />
  <span>w3cplus</span>
</h1>

CSS Code

.technique-five {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
.technique-five span {
  display: none;
}

这种方法有一个特别之处我们此处使用一个透明的gif图片，通过在img标签中的“alt”属性来弥补display:none。这样阅读器之类的就能阅读到所替换的文本是什么。

方法六：
HTML Markup

<h1 class="technique-six">w3cplus</h1>

CSS Code

.technique-six {
  width: 329px;
  padding: 79px 0 0 0;
  height: 0px;
  font-size: 0;
  background: url(images/w3cplus-logo.png);
  overflow: hidden;
}

这种方法是由Seamus Leahy和Stuart Langridge发明。使用零高度来隐藏文本，但为了显示背景图片，需要设置一个与替换图片一样的大小的padding值。

方法七：
HTML Markup

<h1 class="technique-seven">
    <span>w3cplus</span>
</h1>

CSS Code

.technique-seven {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
.technique-seven span {
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}

Leon Dwyer想出的这种方法，通过把span的大小都设置为“0”，来达到隐藏文本效果，这样阅读器就能完全阅读到，而且又达到了图片替换文本的效果。真是好方法。

方法八：
HTML Markup

<h1 class="technique-eight">
  <span></span>w3cplus
</h1>

CSS Code

.technique-eight {
  width: 329px;
  height: 79px;
  position: relative;
}
.technique-eight span {
  background: url(images/w3cplus-logo.png);
  position: absolute;
  width: 100%;
  height: 100%;
}

Levin Alexander。这种方法在利用一个空白的span标签来放置背景图片，并对其进行绝对定位，使用覆盖文本，达到隐藏替换文本的效果。

方法九：
HTML Markup

<h1 class="technique-nine">w3cplus</h1>

CSS Code

.technique-nine {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  font-size: 1px;
  color: white;
}

Levin Alexander写的这种方法很独特，设置字体为微小值，但这里需要注意一点不能忘了设置字体色和替换图片色一样，不然会有一个小点显示出来。

方法十：
HTML Markup

<h1 class="technique-ten"><span>w3cplus</span></h1>

CSS Code

.technique-ten {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
			
.technique-ten span {
  border: 0 !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px,1px,1px,1px);
  height: 1px !important;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  width: 1px;
}

Jonathan Snook使用css的clip属性来实现图片替换文本的效果，详细可以参考Hiding Content for Accessibility。

方法十一
以前是通过text-indent的负值来隐藏文本，但其实还有一种类似的方法：

.hidden-text {
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
}

方法十二
今天在整理SASS的Mixin时，打算写一个图片替代文本的效果，让我意外发现一种新的图片替代文本方法，特意动手一试，还真心不错：

<a class="ir" id="logo" href="http://www.w3cplus.com">W3cplus</a>

上面的结构，大家都清楚，就是一个logo的居住地，接下来，我们来看实现代码

#logo {
  background-image: url(http://www.w3cplus.com/sites/all/themes/w3cplusResponsive/logo.png);
  width: 125px;
  height: 115px;
  display: block;
  /*下面是关键代码*/
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}
#logo:before {
 content: "";
 display: block;
 width: 0;
 height: 150%;
}

其中把起这个功能作用的代码抽出来，并定义为`ir`

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

最终效果，可以猛击：DEMO
转载 W3CPLUS

jquery click事件如何在移动端自动转换成touchstart事件。
因为移动端click事件会比touchstart事件慢几拍
移动设备某个元素上事件执行顺序是：

touchstart
touchmove
touchend
click｛mousedown->mousemove->mouseup｝

click事件在移动设备上虽然会识别但却是最后一个执行的，所以如果不把click事件换成touchstart事件的话，就可能造成延时导致交互上也慢了几拍
所以在移动端最好把click事件换成touchstart事件。
那么如何添加事件比较简单呢.
于是乎有了以下这种写法：

var handle = function (e) {
　　e.preventDefault(); // 阻止浏览器默认行为
　　alert('fuck world');
}
$('body').on(‘touchstart mousedown’,  handle );

这样在pc端浏览器上面alert只执行一次，触发的事件是mousedown
在ios设备safari浏览器上面alert也只执行一次，触发的事件是touchstart

为什么只执行一次？
秘密在于当执行的是touchstart后，preventDefault掉了后面的click就不执行了，“非常完美”.
^_^! 一如既往的android设备蛋疼是必须的，测试发现除qq浏览器外其它浏览器都会alert两次
也就是说touchstart和mousedown的handle函数都执行了， 似乎是e.preventDefault()没有起作用。具体原因不明...

因为要兼容，所以就没办法了只能通过判断是否支持touch事件来分别添加事件了..
那就扩展一个jquery方法插件吧仿一个on方法的插件方法比如名称为quickOn，

;(function(){
        var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
    　　if(!$.fn.quickOn){
            $.fn.quickOn= function(){
                arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];
                return $.fn.on.apply(this, arguments);    
            };
        }
　　})();

quickOn虽然名字尴尬了一点，但是能用，例如：

$('body').quickOn('click', function(){
    alert('fuck world') ;
})

额。。后来想想，为什么不直接重载jquery的on方法呢？？
来吧，试试

;(function(){
        var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', _on = $.fn.on;
            $.fn.on = function(){
                arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];
                return _on.apply(this, arguments); 
            };
    })();

这样暴力的来那么一下后，mmm....，on方法还是原来的用法，但如果你on的是click事件，那么在移动平台上会被替换成touchstart以迅速响应操作。

JS 如何获取和监听屏幕方向的改变？
大概写一下：
方法一：用触发手机的横屏和竖屏之间的切换的事件

window.addEventListener("orientationchange", function() { 
// 宣布新方向的数值 
alert(window.orientation); 
}, false); 

方法二：监听调整大小的改变

window.addEventListener("resize", function() { 
// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度) 
}, false); 

css判断横竖屏幕

@media screen and (orientation:portrait) { 
/* portrait-specific styles */ 
} 
/* landscape */ 
@media screen and (orientation:landscape) { 
/* landscape-specific styles */ 
}

本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

var mql = window.matchMedia("(orientation: portrait)"); 
// 如果有匹配，则我们处于垂直视角 
if(mql.matches) { 
// 直立方向 
alert("1") 
} else { 
//水平方向 
alert("2") 
} 
// 添加一个媒体查询改变监听者 
mql.addListener(function(m) { 
if(m.matches) { 
// 改变到直立方向 
document.getElementById("test").innerHTML="改变到直立方向"; 
} 
else { 
document.getElementById("test").innerHTML="改变到水平方向"; 
// 改变到水平方向 
} 
});

用JS或者jQuery可以监听浏览器窗口的变化吗 5
我要的效果是这样的：当浏览器窗口大小变化时（缩小或者放大浏览器窗口），能够实时获取当前浏览器窗口的宽度和高度。我说的实时指不用刷新当前页面，当浏览器窗口大小改变时就触发事件。
试试resize事件

$(window).resize(function() {
    var width = $(this).width();
    var height = $(this).height();
});

不过resize事件好像对框架不起作用

$(document).ready()于$(window).load()的区别。
1.执行时间不同：
从字面的意思上理解，$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档，dom树已经建立起来了，这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了，但页面不一定加载完毕，如一些大的图片等，加载完成就需要一定的时间；但是页面加载完毕后，dom肯定也就建立起来了；但是有些文字或者图片链接等需要在文档加载完毕前，dom树建立后就进行的，这时就要用到$(document).ready()了。
2.可以被执行的次数不同：
$(document).ready()可以在JavaScript代码中出现多次，并且里面的函数或者代码都可以得到执行；而$(window).load()只能在JavaScript代码中出现一次，如果有多个$(window).load()，那么只有最后一个$(window).load()里面的函数或者代码才会执行，之前的$(window).load()都将被覆盖;

<script>
$(document).ready(function(){
alert("test1");//这段代码会被执行
});
$(document).ready(function(){
alert("test2");//这段代码会被执行
});
$(window).load(function(){
alert("test1");//这段代码不会被执行
});
$(window).load(function(){
alert("test2");//这段代码将被执行
});
</script>

3.执行的效率不同：
如要在dom的元素节点中添加onclick属性节点，这时用$(document).ready()就要比用$(window).load()的效率高；但是在某些时候还必须得用$(window).load()才行，如之前写的app下载，如果要关闭这个下载框，则必须要在整个下载框加载完毕后，才能点击关闭图标，对app下载框执行隐藏。

<script>
$(document).ready(function(){
$(".the_body a").attr("onclick","alert('test')");
});
$(window).load(function(){
$(".close_btn").click(function(){
$("#app_down").hide();
});
});
</script>

$(document) 是当前文档，就是你看到的整个网页
$(window) 如果没有框架则就是你浏览的当前浏览器的窗口

$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数，因为它可以极大地提高web应用程序的响应速度

首先我解释一下jQuery jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready… 他在页面加载完成之前执行。
为什么不用window.onload()，因为window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的。
但是 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数. $(document).ready(function(){ // 你的代码 });
$(document)意思是说，获取整个网页文档对象（类似的于window.document），

$(document).ready意思就是说，获取文档对象就绪的时候。上面这段代码的意思是检查文档对象直到它能够允许被操作

首先
$(document)这个是获取文档对象
$(window)这个是获取窗口对象，也就是浏览器客户区
给大家举个例子就非常直接明了了

$(document).height()
$(window).height()

注意，让网页有滚动条
然后输出一下这两个值得大小，你就知道什么区别了

(document).height()与$(window).height()

jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了

要获取底端 只要获取

scrollTop()>=$(document).height()-$(window).height()

就可以知道已经滚动到底端了

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

自己做个实验就知道了

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

Cannot use object of type stdClass as array
PHP“Cannot use object of type stdClass as array”
php再调用json_decode从字符串对象生成json对象时，如果使用[]操作符取数据，会得到下面的错误

错误：
Cannot use object of type stdClass as array
产生原因：

    $res = json_decode($res);
    $res['key']; //把 json_decode() 后的对象当作数组使用。

解决方法（2种）：
1、使用 json_decode($d, true)。就是使json_decode 的第二个变量设置为 true。
2、json_decode($res) 返回的是一个对象，

$res->key

参考手册：json_decode
Return Values：Returns an object or if the optional assoc parameter is TRUE, an associative array is instead returned.

<?php
error_reporting(-1);
ini_set('display_errors','on');

class A { 
    public $a = 'hello';

    public function add() {
        $this->b = 'world';
    }-  
    public static function p() {
        echo 'world',PHP_EOL;
    }-  
}

$a = new A;
$a->add();
$a->c = 'test';
$a->p();

var_dump($a);

world
object(A)#1 (3) {
  ["a"]=>
  string(5) "hello"
  ["b"]=>
  string(5) "world"
  ["c"]=>
  string(4) "test"
}

$a->p();

<?php
class A {
	public static $count = 1;


    public static function func() {
    	echo __METHOD__,' count: ',self::$count,PHP_EOL;
    }
}


class B extends A {
	public static $count = 2;
    
    // public static function func() {
    // 	echo __METHOD__,' count: ',self::$count,PHP_EOL;
    // }
}


B::func();
A::func();

A::func count: 1
A::func count: 1

php数组 按指定的KEY排序

function array_sort($arr,$keys,$orderby='asc'){ 

    $keysvalue = $new_array = array();

    foreach ($arr as $k=>$v){
        $keysvalue[$k] = $v[$keys];
    }

    //对key集合排序
    if($orderby== 'asc'){
        asort($keysvalue);
    }else{
        arsort($keysvalue);
    } 

    reset($keysvalue);

    //根据排序好的key按顺序从原数组中获取对应的值
    foreach ($keysvalue as $k=>$v){
        $new_array[] = $arr[$k];
    }
    return $new_array; 
}