最开始是在淘宝UED官方博客上看到的.觉得很不错,以为是flash. F12一下才知道是js实现的.当时没具体看,现在开始学javascript了,突然想到这个效果,决定挑战一下哈~开始吧~

Mockup

第一步:HTML&CSS

先不要着急写代码,先要考虑考虑实现这个效果对于代码结构上有什么特别的要求,我想到了两个方案:

1.一个小图容器,一个放大镜容器.原图做为放大镜容器的背景

2.一个小图容器,一个放大镜容器.原图做为放大镜子容器

这两个方案其实实现起来差别不大,但是考虑到将来图片有可能是动态读取出来的,而且大小不定,所以我们不推荐放在CSS背景中来实现,最后选择第二种方案.

HTML代码片段如下:

<div onMouseMove="imgZoomOut(event)" id="smallImgCon">
	<img src="img/airport_small_1.jpg" id="smallImg"/>
	<div id="magnifierCon" style="display:none">
		<img src="img/magnifier.png" id="magnifierBg"/>
		<img src="img/airport_large_1.jpg" id="largeImg"/>
	</div>
</div>

CSS代码片段如下:

#smallImgCon {position:relative;left:0;top:0;}
#magnifierCon {height:276px;width:276px;position:absolute;overflow:hidden;z-index:3}
	#magnifierCon img#magnifierBg {position:absolute;z-index:2}
	#magnifierCon img#largeImg {position:absolute;z-index:1}

第二步:准备好我们需要的信息

我们暂且不去考虑图片大小不定这样一种情况,我们目前可以只针对这其中一张图片.只是放大镜大小固定而已.这里我使用的大小是276*276.
大致思路是可以通过下图来了解:

Step1.得到小图所在位置,即坐标,并将其做为原点.
Step2.得到鼠标当前所在位置,这里是指相对于原点的,所以需要减去上一步得到的坐标值.
Step3.有了这个距离,再减去放大镜长宽的一半就得到了放大镜的坐标.即它相对于原点的距离.
Step4.关键一步大图如何定位呢?
这里需要注意的是这几个容器的层级关系:最外层容器是爷爷,放大镜与小图同是兄弟俩,大图是孙子(哈哈~~不是骂人哈)
说白了就是将光标与原点之间的距离*缩放比例=相对应的大图坐标
再减去放大镜宽高一半就得到了超出放大镜的那段距离 也就是大图相对于其父级容器(放大镜)的距离.将这两个值的赋给大图的left,top就基本搞定了~~
大家晕不?呵呵 我都有点儿晕了…思路及表达能力有待进一步提高

那么按照以上步骤写代码吧:
主要代码如下

	var smallImgCon = document.getElementById("smallImgCon");
	var smallImg = document.getElementById("smallImg");
	var magnifierCon = document.getElementById("magnifierCon");
	var magnifierBg = document.getElementById("magnifierBg");
	var largeImg = document.getElementById("largeImg");

	function imgZoomOut(event) {

		//Step 1得到小图位置,即原点.
		smallImgConLocationX = smallImgCon.offsetLeft;
		smallImgConLocationY = smallImgCon.offsetTop;

		//Step2.得到光标相对于原点的坐标值.
		x = event.clientX - smallImgConLocationX;
		y = event.clientY - smallImgConLocationY;

		//Step3.放大镜相对于原点的距离.
		magnifierCon.style.left = x - magnifierWidth/2 + "px";
		magnifierCon.style.top = y - magnifierHeight/2 + "px";

		//Step4.大图定位
		x = - x*(largeImgWidth/smallImgWidth) + magnifierWidth/2;
		y = - y*(largeImgWidth/smallImgWidth) + magnifierHeight/2;

		largeImg.style.left = x + "px";
		largeImg.style.top = y + "px";

	}

写到这里基本结构有了,但还有一些问题需要考虑:

1. 鼠标移到图像外面了怎么办?
2. 如何动态得到各个元素的大小,便于将来扩展呢?

于是我们要添加另外两个函数跟一个条件判断:

	function getImageSize(imageEl) {
		var i = new Image();
		i.src = imageEl.src;
		return new Array(i.width, i.height);
	}
	function dispear() {
		magnifierCon.style.display = "none";
	}
	if ( x < 0 || x > smallImgWidth || y < 0 || y > smallImgHeight) {
		dispear();
	}else {
		...
	}

最终效果演示
小提示:大小图最后比例差别大些 这样效果更好更明显~
再次强调,因为是初学,所以代码还有很多地方需要优化,再小的功能也要不断完善,倔倔会在学习中不断完善之前的练习~希望大家能多多帮助倔倔~~:)

知识点总结:

1. 函数之间的调用
2. 数组的定义
3. 鼠标事件的概念

下期预告:图片浏览+放大镜

最近各种刺激扑面而来,叫我怎能不好好学习?在坨坨同学的指导下 我开始了”又”一次的Javascript之旅~(之所以说”又”是因为07年自己买下了《Javascript高级程序设计》,现在想来真不知道当时自己怎么了….好在是本好书~银子没白花)

先做几个很简单的实例,把自己学习的兴趣提起来.这点很重要.

声明:本人可以说是0基础,所以初学JS的朋友也可以一起学习.高手们可以飘过,多多指导哈

实例一:图片浏览

实现效果:点击”Previous”和”Next” button实现连续几张图片的切换. 很简单吧~

第一步:HTML&CSS

这一步对各位来说应该并不难,不过既然元素少,又是做Demo用的,我们就对自己的要求放松些吧,我说的放松是对于浏览器兼容问题的放松.我们选择HTML5与CSS3.可以暂时不用过多管IE678.(但你可以下载IE9的preview版来看看,也无妨)

主要HTML代码如下:

	<input type="button" id="btn_previous" value="Previous"/>
	<input type="button"  id="btn_next" value="Next"/>
	<ul id="container">
		<li id="pic_1" class="current">
			<img src="../images/demo/pic_1.gif" title="NO.1" alt="NO.1"/>
			<p title="NO.1">NO.1</p>
		</li>
		<li id="pic_2">
			<img src="../images/demo/pic_2.gif" title="NO.2" alt="NO.2"/>
			<p title="NO.2">NO.2</p>
		</li>
		<li id="pic_3">
			<img src="../images/demo/pic_3.gif" title="NO.3" alt="NO.3"/>
			<p title="NO.3">NO.3</p>
		</li>
		<li id="pic_4">
			<img src="../images/demo/pic_4.gif" title="NO.4" alt="NO.4"/>
			<p title="NO.4">NO.4</p>
		</li>
		<li id="pic_5">
			<img src="../images/demo/pic_5.gif" title="NO.5" alt="NO.5"/>
			<p title="NO.5">NO.5</p>
		</li>
	</ul>

第二步:梳理思路

想想需要解决哪几个问题:

1. 怎么知道是显示当前图片的上一张还是下一张?
2. 如何替换当前图片?

好,先解决掉这两个问题事情就好办多了.

1. 我们需要将”向前”和”向后”分别用两个数值来代替,做为参数传给接下来我们要完成的函数,这里用(-1)和(1)来表示.
2. 知道了是向前还是向后之后 我们就要把当前图片隐藏起来,然后显示出它的上一张或者下一张图片.

Ok,那我们就开始吧~

第三步:编写代码

首先我们给函数起个名字,就叫 imgSlider.(也许并不贴切,但以后会改进功能).把要传给这个函数的值取名为n.所以简单写下来函数应该长这个样子:

function imgSlider(n) {

}

然后我们需要一个变量,这个变量用来存储当前显示的是第几张图片,我们先赋一个初始值给它,像这样.

var currentImg = 1;
function imgSlider(n) {

}

为什么要把这个赋值语句写在函数外面呢?(全局变量)因为函数要对这个值做处理,也就是说将来一旦触发了这个函数,currentImg这个值会改变,所以我们将它写在外面.

接下来我们需要得到网页中的几个对象,取得对象的方法是采用document.getElementById(“idname”):

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
}

哈哈,现在就到了最关键的步骤了,到目前为至我们还没有用到传进来的参数呢,想想假设现在传进来的是(1),即用户要显示下一张图片的话,我们要做何处理呢?很简单,就是在当前图片基础上+1 显示下一张呗~

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
	currentImg = currentImg + n;
	targetImgCon.setAttribute("class","current");
	targetImgCon.className = "current";
}

currentImg加了1后,我们根据currentImg的最新值通过document.getElementById()这个方法找到了我们要显示的那个图片,并且将得到的对象命名为targetImgCon,然后将current这个class加到这个对象上,那么第二张图片就显示出来了.可不要忘记在这之前要先将之前的图片隐藏起来,所以还要对代码要做以下修改

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
	currentImgCon.setAttribute("class","");
	currentImgCon.className = "";
	currentImg = currentImg + n;
	var targetImgCon = document.getElementById("pic_"+ currentImg);
	targetImgCon.setAttribute("class","current");
	targetImgCon.className = "current";
}

到此为至主要功能实现了,但完整程度还差好多~.不信可以将事件加到两个button上,如下:

<input type="button" onclick="imgSlider(-1)" id="btn_previous" value="Previous" disabled="disabled"/>
<input type="button" onclick="imgSlider(1)" id="btn_next" value="Next"/>

那么我们还要做什么呢?目前页面中只有5张图片,我们不希望用户一直点击向前向后,那样currentImg数值会越来越大,而执行过程中又取不到数值大于5的图片,会报错.所以现在我们要对临界值做一个判断处理.我们希望只有在1-5这个范围内再做我们以上的那些事情.

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
	currentImgCon.setAttribute("class","");
	currentImgCon.className = "";
	currentImg = currentImg + n;
	if (currentImg > 1 || currentImg < 5 ) {
		var targetImgCon = document.getElementById("pic_"+ currentImg);
		targetImgCon.setAttribute("class","current");
		targetImgCon.className = "current";
	}
}

可运行一下,发现到第5张时候再点”Next”就什么都显示不出来了,再点”Previous”也没反应了,为什么呢?我们用input来跟踪下currentImg的数值变化:
在HTML中添加一个input:

<input type="text" value="" id="logger"/>

JavaScript做如下修改:

document.getElementById("logger").value = currentImg;

刷新下页面,点到最后发现currentImg的值是6,超出了1-5这个范围,自然执行不了我们if条件里的语句了.怎么解决这个问题呢,其实很简单,当页面当前显示的是第一张图片时我们就将”Previous”button 屏蔽掉,同理,当页面当前显示的是第5张,也就是最后一张的时候屏蔽掉”Next”button,事情就解决了.其它情况下两个button正常显示~~哈哈

初始的时候就要先将”Previous” button 置为disabled

<input type="button" onclick="imgSlider(-1)" id="btn_previous" value="Previous" disabled="disabled"/>

JavaScript添加如下代码:

if(currentImg == 1) {
	btn_previous.setAttribute("disabled","disabled");
}else {
	btn_previous.removeAttribute("disabled");
}

if(currentImg == 5) {
	btn_next.setAttribute("disabled","disabled");
}else {
	btn_next.removeAttribute("disabled");
}

大功告成~~最终效果

知识点:

1. CSS3 渐变http://www.qianduan.net/understand-the-css3-gradient.html
2. CSS Selector
3. CSS 缩写http://www.qianduan.net/css-font-shorthand-attribute-handbook.html
4. input disabled属性
5. function定义
6. 全局变量定义/初始化
7. document.getElementById(“idName”)
8. setAttribute(“attributeName”,”attributeValue”)
9. removeAttribute(“attributeName”)
10. if else

下期预告:放大镜~~~

嘉宾:张克军/月影/赵立元/管凌峰

讨论主题:页面重构合理化讨论后续

Javascript AJAX DOM

• 如何创建自己的js库或js框架,选择JS库或框架
• JS的管理
• JS的性能

HTML5+CSS3应用的时机

• 现阶段是否考虑应用HTML5和CSS3部分特性
• 如何应用HTML5
• 如何应用CSS3

具体会议记录如下:

(主):首先向大家说下针对此次会议场地的注意事项(略).Web标准化交流会办到现在已经是第四期了,今天从农历来说是2009年的最后一期,但从阳历来讲是2010年的第一期.代表交流会欢迎新老同学.首先感谢新浪为我们提供这么好的会议场地. 今天北京,上海,广州都同步进行交流会(主题同步).下面进入主要环节.先是环场介绍,请到场的嘉宾自我介绍下…(略)

(主):现在进行本期主题讨论:

Javascript AJAX DOM

先请嘉宾对此主题进行一些分享.然后可以由每位嘉宾带领一部分支持自己观点的同学进行分组讨论

(月影):对于团队开发所使用的JS类库,我个人比较喜欢jQuery.脚本的管理要根据项目需求与类型来,比如轻量级的项目,就更注重函数依赖等方面的研究,粒度可能会细化到一个function.然后再找到依赖的类.但如果是重量级的就会更加注重多人协作,基础类库和代码缓存等方面,不会特别在意依赖,而是会在意包的管理与代码的冲突.总之结论是:根据应用选择适合的框架

喜欢jQuery的原因是简单.YUI在大的项目应用上比jQuery出色.目前在自己负责的项目中使用的脚本库会分为3层.以后有机会会将相关经验跟代码分享给大家.

(主):谢谢月影的分享,下面请克军分享下这方面的丰富经验,因为克军曾经在Yahoo做过很长时间.对于YUI应该更加了解.

(克军):Yahoo的开发方式是讲究团队合作,非常强调代码结构的一致性与模块的管理. 做的都是整体性很强的东西.注重文档化.但是缺点是不够灵活.YUI在前端开发的理念问题上也有一些变化.05年之后都是库的概念,共同功能的集合.YUI3出来后,变化为不是功能的聚焦而是注重模块的组织,依赖的管理的系统.思想更倾向于团队协作与可维护性.当然每个人的代码风格不同,但Yahoo会限制个人风格,为了让开发人员的风格尽可能的统一,”限制”是必须要有的,但是要有一定的灵活性.库与框架是两个级别的东西.做前端框架 的人要考虑库与框架的结构.

豆瓣的JS目前是不提供业务层的,有核心库可灵活的加各种库,目前使用的jQuery.关键是在核心的基础上如何组织.之前我们总在讨论JS库,其实不用过多的考虑,做为第三方它们在功能方面已经很成熟了.就拿网易的JS来说.它分大块的和inline两种.所以代码的管理就显得特别重要.个人主张统一风格,对开发有利.jQuery与YUI其实没有太大可比性.jQuery最新版本的变化很大,已经60多K.作者也在考虑它的结构.不过目前这种大小还是可以接受的.

(主):谢谢克军,下面请新浪产品负责人赵立元进行分享

(赵立元):我想先了解下在座各位目前哪些朋友在工作中经常使用JS或者框架(人数不多).我来介绍下新浪的方法吧.不讲技术上的细节.新浪有自己的开发JS库.新浪目前有13个产品,代码的可维护性是个很大的难题,新人在接手项目的时候也非常吃力.所以想统一.当时参照了几个开发框架，其中包括了YUI2.如果使用自己开发的类库一是灵活度高二是风险低.自己做框架可与底层更好的结合,升级可以自动化,有问题可以rollback. 之前我们有开发文档,但是效果不好,后来我们就改为在代码里写注释,然后通过工具把注释提取出来方便多人协作.关于JS性能方面参考Yahoo的优化条例其中的几条就差不多可以了.

(主):因为大多数朋友对于这个话题本身还没有过多过深的研究,所以现在我们就抓紧这个难得的机会可以就这个话题向各位嘉宾提问.

以下是截取的部分提问回答记录

Q:如何区分一个方法是核心级的还是应用级的?

A(张克军):核心层解决的是创建标准化的浏览层,API的风格不一样.应用级的是与产品业务如Movie,Music相关的是应用级.如果与UE实际结合得密切的话,如果注意体验的话会更多的关注这些统一UE的库,那么也算应用层.所以分下来就是核心/全站/产品三个级别.

Q:依赖的概念是什么?

A(月影):如果你是要包括所有基本库的话没问题.但是有时是会为了一个简单的功能而去加载大库,非常不合算.就是一种很极端的情况,访问量非常大但是功能却非常简单,比如它只用到了这个库里10个方法中的两个.依赖管理就是开发的时候加载整个库,但是产品在上线的时候却只加载真正用到的那2个方法.

Q:网站的脚本是否都进行压缩?

A:是的.产品差异大.这是由应用特征决定的.基础类库会拆分为基础与产品两种,然后定规范.

Q:前端的HTML,CSS也要压缩么?

A:是的,工具就使用YUI提供的压缩工具就行.

Q:网站公用的header里会加载多个JS.但是页面里却只用到其中一点,这时候要怎么处理?

A(张克军):对于这种情况下后端的处理方法很简单就是都引入都加载.但是如果当我们有一套依赖管理系统就可以解决.产品上线的时候自动找方法所依赖的东西.

今天先总结到这里,其实讨论到这里大家还对于前端工程师的价值,理想等问题发表了各自的一些见解,非常热烈,也相当精彩.我会在最后做简单总结.