jQuery 仿 Alibaba 搜索框

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

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

1
2
3
4
5
6
7
8
9
10
11
<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 代码,写的不好不要嘲笑,刚入门,见谅,并且指导,或者交流。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
	<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 代码,写的不好,见谅。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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,完成了。

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

页面布局 float position 哪个好

其实这个问题,我现在比较喜欢使用 float 毕竟对于很多东西,代码量明显减少,不用对很多元素都应用样式,但是各有各的好处,其实还是按个人习惯加上团队的开发习惯来比较好,这里转这篇文章,其实不是完整的一篇,而是来源于知乎中的“在 CSS 布局中,用 float 好还是用 position 好?分别有什么优势?”这个问题,虽然问的是两种布局的优缺点,但是在后面的回答中,会有很多其他的知识出现,所以这才是转载的目的。

呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同。

float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果。

float从字面上的意思就是浮动,这种在印刷排版之类中可能解释的更加贴切。float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要注意的地方。并且如果你要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。

而position顾名思义就是定位。他有以下这几种属性:static(默认),relative(相对定位),absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间,他们并不是脱离文档的。absolute和fixed是脱离文档流的,不会占据文档流空间。

比较可以发现,float和position最大的区别其实是是否占据文档流空间的问题。虽然position有absolute和fixed这两个同样不会占据文档流的属性,但是这两个并不适合被用来给整个网页做布局。为什么?因为这样你就得为页面上的每一个元素设置一个xy坐标来定位。

float布局就显得灵活多了。但是一些特殊的地方搭配relative和absolute布局可以实现更好的效果。因为absolute是基于父级元素的定位,当父级元素是relative的时候,absolute的元素就会是基于它的定位了。比如你可以让一个按钮始终显示在一个元素的右下角。

如果说到性能问题reflow问题,将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间。所以如果是制作js动画等,用absolute或者fixed定位会更好。

说得不好的地方请大家补充。总结一句就是不推荐用position来布局整个页面的大框架,而推荐用float或者文档流的默认方式。

PS:

补充一下float的问题。我们常说的文档流其实是指默认文档流。基本显示模型block和inline分别是块狀换行和连续多行模型,前者可以设定尺寸,后者不可以设定尺寸(根据内容决定尺寸和折行)。

不过我们总是遇到固定尺寸,或者固定部分尺寸且不折行的场景,这个时候我们马上会想到使用float来做布局,因为float会触发shrink to fit特性,实现根据内容决定尺寸,float还不会产生折行,我们通过clear来手工模拟折行。这个现状我觉得主要是因为对inline-block的兼容性顾忌产生的,在IE6的时候它没有被广泛支持。使用position实现这样的布局需要配合javascript修正,在某些场景它比float强,因为float模拟的流动布局不是多行连续布局,一些浮动元素经常因为意外的尺寸改变被卡在我们不希望它出现的位置。所以我们可以看到像pinterest这样的网站使用了javascript配合absolute position的方式,讲布局引擎的任务完全交给javascript来实现。从表现与行为分离的角度它不太合理,但是从结果上来说它很让人满意。

但是,我写这段的意思是说,很多时候我们希望控制的布局流问题不需要float和position实现,而应该通过显示模型定义来解决。比如现在的column layout、flex box等等,都是在这个角度解决我们遇到的问题,它们应该才是正解。而我们犯这个错误的最初原因也许就是对像inline-block这样的显示模型的不信任开始的。

希望CSS3的进化能够让我们重建这样的信任。

上面是两个人的回答,都比较有代表性,虽然有些内容是重复的,但是还是建议好好看完,并且最好理解了。

jQuery 之 图片分享和收藏

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

首先就是引入 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>

演示在这里: 点击这里

Apache 进程占用 50% CPU 网页无法打开

此问题表现的现象为在 Windows 平台下,使用 Apache、Mysql 以及 PHP 的时候打不开本地的程序,即使是最基本的 HTML 页面也无法打开,所以怀疑网络问题,而且 CPU 占用 在 50% 左右,并且有两个 Apache 进程。

解决方法为:

1. 重置本地的 Winsock ,打开 CMD ,然后输入 netsh winsock reset 回车即可。 我就是用这种方法解决的。

2.网上邻居 - 本地连接 - 属性 - Internet 协议(TCP/IP) - 属性 - 高级 - wins 标签,然后取消掉 “启用LMhosts 查询” 前的勾,即可。

如果本地有开防火墙的话,那么下来,Windows 防火墙 - 高级 - 本地连接设置,在服务的标签里面勾选“安全 WEB 服务器(HTTPS)”,确定保存即可。

然后重启 Apache 服务即可。

一种方法有时候并不能解决问题,所以可以两种都试试,第二种我没有试过,所以不确定。但是第一种解决了我的问题。

Godaddy 2011 5 $1.29 特价域名优惠码

Godaddy 2011年5月 1.29美元特价域名优惠码
Godaddy 2011年5月特价域名优惠码。和以前一样只支持信用卡。2011年5月19日8:20分注册测试有效。

优惠码:INDY129
支付方式:信用卡
优惠类型:注册COM, .US, .MOBI, .BIZ, .NET, .ORG, .CA, .CO.UK 以及 .IN
优惠幅度:新注册仅需1.29美元,当然要加0.18的费。
截止日期:2011.6.16或者前20000名客户可以使用。

同时,提供代购服务:

代购 GD 域名 4$    不可刀,主要是为了没有信用卡又想买域名的朋友。

或者25元 人民币。

就用你的账户,如果你放心我用你的账户的话。

给我留言即可。

LighterBlue

主题名称:LighterBlue

版本:0.8  才发布,大家测试下。

Theme URI: https://yimity.com/2011/05/15/lighterblue.html

Description: LighterBlue. It is very stylish, widget supported and does not require any plugin.

Version: 0.8

Author: 一米 & laycher

Author URI: https://yimity.com/ & http://laycher.com

重要的演示:http://yimi.at

支持 除 IE6 之外的浏览器。IE7 IE8 IE9 Firefox Chrome Opera 都支持。

发布计划:目前还没有最终确定是要免费发布还是收费出售。请等待。
安装:

1.将本文件解压,得到 lighterblue 文件夹及其内部文件,将此文件夹上传到 WordPress 程序中的 wp-content/themes 文件夹。

2.进入博客后台,外观-主题, 选择 LighterBlue 主题,并且激活即可。
使用:
1.上传成功,并激活成功即可使用。

2.在 外观-主题选项中,点击“主题选项”即可设置相关的选项,不要忘记点击“更新选项”哦。

3.后台所有输入框 HTML 都是可用的,但是建议该用的时候用,不该用的就不要用,比如 网站描述或者关键字。

4.统计代码 可以使用单选框选择是否可用,选中状态则起作用,否则统计代码即使在后台能看到,但不会起作用。

5.Twitter 输入用户名后,则会在页脚最右边显示 Twitter链接。否则不显示。

6.提示 为页脚底部,黑色状态栏,显示博主想要轮询显示的内容,目前不超过15条,请使用英文分号分割,支持HTML,如果HTML中有分号,请自己转义。有内容,则显示黑色页脚提示条,否则不显示。

7.描述及关键词 SEO内容,如果是首页,则显示后台设定内容,如果是单页则会使用当前文章的前200字符作为描述,此文章标签作为关键字。建议最好填写。如果不填写,则默认为站点标题和副标题。

8.评论框广告 为评论框右侧125 125广告,支持HTML代码,如果有代码则显示广告,此时评论框缩小,如果没有则不显示,评论框正常大小。

9.如果要在边栏显示但头像评论,请启用 neoease.com 的 wp_recentcomments 插件。翻页插件 pagenavi 样式已经内置。

10 多语言支持。目前只有中文简体及英语。

11.边栏是否显示管理员评论,在边栏模板中有说明。

12.其他任何问题,请联系 i@yimi.in。谢谢。

13.主题为0.8版,说明还没有全部完善,如有先关建议或 Bugs 也请发邮件,谢谢。

感谢 laycher.com 的设计 以及DIV+CSS初步实现,使用了www.neoease.com Inove 主题的评论 JS 代码,在此感谢,以及其他各位博主的某些实现方法或者函数,在此也一并感谢。

CSS 中的定位 Position static relative absolute fixed 是如何工作的

毋庸置疑,CSS 中的 定位 对于从事重构或者前端的人来说,其占用非常重要的地位,但是对于初学者来说,却又有几点不是很清楚,这里就向大家介绍下 CSS  中的 定位 是如何工作的。

首先,我们来看下,什么是 定位。

当浏览器下载页面内容的时候,按下载的 HTML 页面内容的顺序(例如,html、body、head、div、p等),同时就开始渲染页面,而 定位 则就是决定这些元素如何显示,例如相对位置、或者重叠等情况。其实也就是本体相对于上级的定位,这里一共有4种方式来定义 定位,其分别是:static, relative, absolute 和 fixed。其意思也即是 静态、相对、绝对、固定。

Static 定位

即静态定位,也就是在制作 HTML 页面时,元素如何排列,则定位就如何排列。从上往下的顺序。没什么可解释的。

Relative 定位

即相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TOP、RIGHT、BOTTOM、LEFT进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
更多...

最爱 1024高清 国语中字 迅雷下载

《最爱》,5月10日上映,由章子怡、郭富城主演的,是我非常喜欢的两个演员,所以推荐给大家。这部电影的题材也是非常有意思,主要是反映艾滋病这个话题,然后就是在这样一个背景下讲述的爱情故事,记得看这部电影的宣传时,章子怡是以剧中女主角一身红色乡土风格衣服出现的,给人感觉非常的好,但章子怡这个角色,却怎么看,怎么不像是农村的女人,或许这也是一些败笔吧。

《最爱》的导演是顾长卫,也是国内非常的著名的导演,拍摄了不少文艺片。影片《最爱》讲述了在中国20世纪90年代中期之前的一个封闭的小村庄里,人血走私生意泛滥,这是个无尽收入来源的生意,但同时因为卖血组织者节约成本给大家共用针头造成了大量的绝症热病(HIV)传播……我特别喜欢这部电影的海报上的一句话“我们结婚吧,趁活着”,感觉特别的伤感,但是又特别的感动,不知道大家和我的感觉一样吗?不管怎么样,大家看了再说吧。

剧名:最爱
状态:高清国语中字 RMVB 975MB
更新时间:2011-5-12
地区:大陆
上映年代:2011
推荐:五星
类型:感人文艺
主演:郭富城 章子怡 蒋雯丽 濮存昕 王宝强

最爱 2011 迅雷 下载

2011最新电影《最爱》高清国语中字迅雷下载
下载方法:先下载文件,然后使用迅雷下载。
更多...

藏地密码10 神圣大结局

看藏地密码大概有大半年了吧,从一开始只是无聊偶尔看看,到后来逐渐的开始入迷,慢慢追着看从头看到第九部,然后就到现在,无奈自己有事囊中羞涩,所以只能在网上下载电子书来看(此处对作者表示歉意),还好,目前藏地密码10已经发布了,而且最近藏地密码十也开始慢慢的出现电子书了,这么给大家分享下,有钱人的话,还是建议去当当或者卓越购买下,支持下作者吧。

藏地密码10 神圣大结局 是 藏地密码 的第十部,在第一次大结局之后,这也是第二次大结局,也确实是期待已久的“神圣大结局”。主要讲述了卓木强巴一行人击退国外邪恶势力莫金一行人,摆脱第三层平台的狼的攻击,与他梦中的紫麒麟相遇 ,并通过众生之门和浮生之河,来到帕巴拉。在无数谜团和线索的指引下,他们抵达万佛阁,见到尘封的佛家珍宝,越来越接近藏传佛教的精神内核。一路走来的上百个匪夷所思的谜团也渐渐解开,而可怕的真相也将卓木强巴几乎击倒!千年前的故事呈现在他们面前,而紫麒麟带着王者的霸气率领众狼消失在地平线。

作者简介

何马,生于四川,在西.藏生活了十年。喜欢探险,曾一人独自穿越可可西里腹地、西双版纳原始森林。另一说,也说作者是医生,其实一直只是呆在青海还是四川来着,一直都没有去过西藏。2006年开始写作《藏地密码》,2008年发表后立即引发全球上百家出版商争夺版权,成为当下最炙手可热的畅销书作家。

目录

第七十章 万狼之王紫麒麟
第七十一章 狼之禁地
第七十二章 众生之门
第七十三章 浮生之河
第七十四章 欢迎来到帕巴拉!
第七十五章 西.藏众神
第七十六章 西.藏万佛阁
第七十七章 抵达神庙核心
第七十八章 尘封的佛家珍宝
第七十九章 太可怕的真相
第八十章 千年前的故事
第八十一章 以一张照片结束
更多...

纯 CSS3 动画导航菜单

此教程,完全使用CSS3 制作一个动态的导航菜单,不使用 JavaScript 等技术。

先来看 HTML

首先第一步是使用HTML完成网站的结构,此处 使用了很多 HTML5 方面的内容,但是对于IE6 7 8来说,必须使用另一种技术来使其支持 HTML5,这里使用 html5.js详细),需要放在 <Head> 标签之中,使用了条件判断,只对IE有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< !DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!-- Including the Lobster font from Google's Font Directory -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
        <!-- Enabling HTML5 support for Internet Explorer -->
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        < ![endif]-->
    </head>
   <body>
        <header>
            <h1>CSS3 Animated Navigation Menu</h1>
            <h2>&laquo; Read and download on Tutorialzine</h2>
        </header>
        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>
        <footer>Looks best in Firefox 4, usable everywhere.</footer>
    </body>
</html>

此处使用了Google  Web Font API,包括了100多种字体文件,可以随时使用在自己的项目上,当然都托管在 Google 的服务器上,不过几乎都是英文字体,对国内用处不是非常大。
更多...