其实很简单的,代码是大神的代码,只是作为一个记录而已。那就上代码。

此函数的主要作用为:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload=func;
    }else {
        window.onload = function() {
        oldonload();
        func();
       }
     }
   }

1. 把现有的 window.onload 的事件处理函数的值存入变量 oldonload 。

2. 如果在这个处理函数上还没有绑定任何函数,则默认把新函数添加给它。

3. 如果在这个处理函数上已经绑定了一些函数,就把新的函数追加到现有指令的末尾。

使用的时候,就类似于这样。

addLoadEvent(函数名);
addLoadEvent(函数名);

例如:

addLoadEvent(a);
function a() {
//something here
}

升级了 WordPress 3.2 之后,主题有些许不兼容了,表现在我的 lazyload 插件不能用了,还有我的返回顶部插件,我的 ajax 评论插件也不能用了,怎么办呢,找问题呗,然后就发现是新版本的 WordPress 使用的 jQuery 库为 1.6.1 版本,和我某些插件的 1.4.2 版本不兼容,OK,问题找到了,那就解决问题。
其实很简单,就是一句代码,在你博客主题文件中的 function.php 文件中,添加一段代码即可。

<?php wp_deregister_script(‘jquery’);?>

作用就是反注册 jQuery 这个 js 库。从而使 WP 不加载 jQuery 这个库。所以 WP 就不加载 1.6.1 版本的这个 jQuery 库了,但是要手动在主题的 header.php 中引用兼容版本的 jQuery 库。

其实,还有一个重要的问题,就是 使用了这个代码之后,WP 后台很多需要 jQuery 的功能都不正常了,那就没办法了,不使用这个代码了。但是去掉之后,如果 jQuery 没有回去,那就用另外一句代码让它回去。

<?php wp_register_script(‘jquery’); >

嘿嘿嘿,重新注册。OK。
其实,还有一种方式可以解决 js 的冲突,那就是使用

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); >

函数。具体介绍请移步这里查看。
具体方法就是在你的主题文件的 function.php 里面,添加

<?php
function my_init_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    
add_action('init', 'my_init_method');
?>

然后将,里面的 js 的地址,换成你想使用的地址即可。当然了,那个 jquery 关键字,也是要替换的。

不过貌似后台必须使用1.6.1才可以,唉,我的lazyload要割爱了啊。

打完收工。

看到蓝色理想上有人问这个效果,而且刚好项目不是那么紧张,所以就简单的写了一个效果,也是基于 jQuery 的,关于具体的应用可以看下 Alibaba 中国站右上角的搜索框的效果即可,好了,废话少说,上代码,还是放到最后吧。坚持传统。什么是传统,我也不知道,额。

先是 HTML 的结构,其实这里完全不用 这么多 id 的,只是为了少输入字符,代码每个字都是键盘输入,不能怪我懒,还有,如果你有好的自动补全的文本编辑器,不妨推荐下,注意啊,是文本编辑器,言归正传,对于 id 和 class 的使用,还是适可而止,不要学我啊。当然,怎么个适可而止法,不是本文的重点,那就略过。

<div id="a">
	<div id="b">
		<span>O</span><span>P</span><span>Q</span><span style="display:none;" class="current new"></span>
	</div>
	<div id="c">
		<div class="relative">R</div>
		<div class="absolute">
			<span>S</span><span>T</span><span>U</span><span>V</span>
		</div>
	</div>
</div>

#a是大框架,里面包括 #b 和 #c ,#b 是已经显示在搜索框上部的,当然最后一个 span 让其先隐藏,是为了将来将点击的项目 替换 到这里。#c 除了 .relative 显示之外,其他的例如 .absolute 都叫它隐藏,为的是鼠标移上去他才可以显示。

然后是 CSS 代码,写的不好不要嘲笑,刚入门,见谅,并且指导,或者交流。

	<style>
		body {
			width:400px;
			margin:100px auto 0 auto;
		}
		#a {
			width:400px;
		}
		#b,#c {
			float:left;
		}
		#b span, #c span,.relative {
			display:block;
			width:60px;
			height:30px;
			line-height:30px;
			background:#ccc;
			margin:0 5px;
			text-align:center;
			cursor:pointer;
		}
		#b span {
			float:left;
		}
		#c span,.relative {
			margin-bottom:2px;
		}
		.absolute {
			display:none;
		}
		.current {
			border-bottom:2px solid red;
		}
	</style>

这里就是让显示的显示,隐藏的隐藏,然后让两个.relative 和 .absolute 各就各位,也就是定好位子,这里叫布局,其实这个很简单,就是用了一个 float ,其他没有了。

然后是脚本,当然了,第一步还是引入 jQuery 库,这个不要我再写了吧,如果记不住,那就不用往下读了,直接到末尾拷贝代码吧,如果想记住,那就用手多输入几遍啊。

下面是 jQuery 代码,写的不好,见谅。

<script type="text/javascript">
$("#c").hover(function(){
	$(".absolute").show();
},function(){
	$(".absolute").hide();
});
$(".absolute>span").click(function(e){
	var $target = $(e.target);
	var text = $target.text();
	if ($(".new").text()) {
		var z = $(".new").text();
		$(".new").text("");
		$(".new").show().append(text);
		$target.text(z);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}else {
		$target.remove();
		$(".new").show().append(text);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}
});
$("#b>span").click(function(e){
	$("span").removeClass("current");
	var $target = $(e.target);
	$target.addClass("current");
})
</script>

主要是原理,代码没什么的。

先看前四行,就是数遍移上去之后,让隐藏的显示,然后鼠标移除后,让隐藏的继续隐藏,其实也就是让刚才显示的隐藏元素继续再隐他的藏。

.absolute>span, 找到 .absolute 下面的 span ,绑定单击事件 e 是参数,e.target 是 jQuery 中封装的被点击目标对象,text(); 获取被点击目标中的文字。

然后直接判断 .new 中是否有文字,有的话先把文字暂时存到 z 中,然后将这个 .new 中的文字清空,然后让他显示,并把刚才被点击对象的文字插入进去,然后再把被点击对象的文字用 z 替换下,最后将所有 span 的 current 样式删掉,再给 .new 添加 current 样式。

此处就是为什么要将那个隐藏的 span 付给 .new 和 .current 两个 class 呢,就是为了好找。最后那么样子删样式只是为了方便。

然后,又然后了,不要郁闷,我也不是很喜欢用这么多。

然后,如果 .new 中没有文字的话,那好办了,直接将被点击的对象的文字删掉,让后将其插入进 .new 中就好了,后面的删除,添加样式都一样。

最最然后,#b>span 也是找到 #b 中的 span ,当点击的时候,去掉所有 span 的 current 样式,然后再给被点击对象一个 current 样式。OK,完成了。

演示见了这里:点击看演示喽

不多说,先上代码。还是放在最后吧。

首先就是引入 jQuery 库.

<script type="text/javascript" src="js/jQuery.v1.4.2.js"></script>

然后就是使用 CSS 的定位,将要显示的子层,也就是鼠标移上去显示的 “分享” 和 “收藏” 等文字,定位到父层,也就是图片的某个位置,此处首先给父层一个相对定位的属性(相对定位不给 top 和 left 的话,是不会影响其在文档中的位置),然后给子层一个绝对定位,此时子层脱离文档流,就可以悬浮在文档之上了,此处只是形容,当然也可以这么理解,然后使用 top 和 left 属性,即可使 “分享” 和 “收藏” 等文字处在父层的某个位置。

<style>
/*reset*/
body,div,img,{margin:0;padding:0;}
/*content*/
body {
	margin:0 auto;
	background:#FFF;
}
.pro {
	width:75px;
	margin:100px auto 0 auto;
}

.floatTop {
	position:relative;
	width:75px;
	height:75px;
	background:#ccc;
}

.fa {
	display:block;
	width:75px;
	height:75px;
}

.tips {
	display:none;
	position:absolute;
	padding:6px 2px 2px 6px;
	top:0;
	left:0;
	font-size:13px;
	background:rgba(230,230,230,0.6);
}

a {
	text-decoration:none;
}
</style>

当然了,在使效果出来之前,应该先使子层可见,等将其定位之后,再给子层 display:none; 的属性,使子层隐藏。然后对其应用 jQuery 即可。

下来就是 jQuery 代码,此处使用了 hover() 方法,其实和 CSS 中的 hover 伪类类似,即当鼠标悬停时出现的效果。此处给两个函数,即当鼠标悬浮时,执行第一个函数,即找到当前的 jQuery 对象($(this),也就是 .floatTop)的子对象 tips (children(“.tips”)),然后应用 fadeIn() 动画,即 500 毫秒内显示。

当鼠标离开时,再执行另一个函数,前面都一样,后面的 fadeOut() 即 500 毫秒内隐藏。

<script type="text/javascript">
$(function(){
$(".floatTop").hover(function(){
	$(this).children(".tips").fadeIn(500);
},function(){
	$(this).children(".tips").fadeOut(500);
});
});
</script>

这里是全部的代码,高手指教,低手学习。

<html>
<head>
<script type="text/javascript" src="js/jQuery.v1.4.2.js"></script>
<style>
/*reset*/
body,div,form,input,textarea,p,{margin:0;padding:0;}
/*content*/
body {
	margin:0 auto;
	background:#FFF;
}
.pro {
	width:75px;
	margin:100px auto 0 auto;
}
.floatTop {
	position:relative;
	width:75px;
	height:75px;
	background:#ccc;
}
.fa {
	display:block;
	width:75px;
	height:75px;
}
.tips {
	display:none;
	position:absolute;
	padding:6px 2px 2px 6px;
	top:0;
	left:0;
	font-size:13px;
	background:rgba(230,230,230,0.6);
}
a {
	text-decoration:none;
}
</style>
</head>
<body>
<div class="pro">
	<div class="floatTop">
		<a class="fa" href="images/gs1.gif"><img src="images/gs1.gif" /></a>
		<div class="tips">
			<a class="fx" href="#fx">分享</a>|<a class="sc" href="#sc">收藏</a>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
$(".floatTop").hover(function(){
	$(this).children(".tips").fadeIn(500);
},function(){
	$(this).children(".tips").fadeOut(500);
});
});
</script>
<body>
</html>

演示在这里: 点击这里

自从爱上前端开始,一直在专注于CSS和HTML,但是由于本人天生愚钝,所以对于这些个已经十分简单的语言还是难以拿下,所以,耗费时间不说,起了个大早,赶了个晚集,什么都没留给我,在将这几个最简单的语言学个入门之后,这不是JavaScript也要开始进入日程了,无奈,还是天生愚钝,学了这么好几天了,才会写这么个小程序,记个笔记,为以后查阅方便,老鸟请不吝赐教啊。
在这个挨踢之路上,还望你们指教呢。
好了,上代码吧。粗糙,再次望指教。

<html>
<head>
<script type="text/javascript"> 
var ts=0;
function ShowTimes()
{ 
document.getElementById("times").value=ts; 
ts++; 
t=setTimeout(ShowTimes,1000); 
} 
function PauseTimes() 
{ 
clearTimeout(t); 
} 
function ResetTimes() 
{ 
document.getElementById("times").value=0;
ts=0;
} 
</script> 
</head>
<body> 
<button id="startcount" onclick="ShowTimes();">Starting</button>
<input type="text" id="times" />
<button id="stopcount" onclick="PauseTimes();">Pause</button>
<button id="clearcount" onclick="ResetTimes();">Reset</button>
</body> 
</html>

演示在这里: 点击这里