打印

Apple网站超靓的图片放大效果! 差一点研究?

dx1 [楼主]

初级会员

帖子: 48
体力: 128
威望: 0
当前: 广东广州
离线: 207 天

1^# 大中小发表于 2007-6-13 02:33

苹果网址: http://www.apple.com/macosx/leopard/features/desktop.html

请留意网页下方偏左一点有个"Gallery",点击小图片,将动态弹出大图,效果非常之棒!!!
研究了一个多小时也没搞明白是如何实现的,只知道是靠几个JS,但实在太复杂,越看越不明白
请高手抽空研究研究吧!

相关的JS文件:

[ 本帖最后由 dx1 于 2007-6-13 02:35 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

希望能够帮到你……

TOP

西部数码VPS主机1G内存仅266元

wuleying

银子

版主

认证
帖子: 12724
体力: 10920
威望: 19
当前: 北京朝阳区

专长 PHP,Perl,项目管理

2^# 大中小发表于 2007-6-13 07:41

类似这种

提示：您可以先修改部分代码再运行

博客又挂了
Never give up hope
经典站长联盟QQ群:16719484 PHPERQQ群:85363040

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

ycmspace

初级会员

帖子: 51
体力: 94
威望: 0
离线: 105 天

3^# 大中小发表于 2007-6-13 09:52

效果不错

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

yxljames

哲服千里

银牌会员

帖子: 1052
体力: 1834
威望: 0
当前: 上海浦东

专长 网页设计,PHP,AS

4^# 大中小发表于 2007-6-13 11:55

呵呵，没想到我写的也被银子拿出来讲了

大唐艺术设计

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

zcfg

中级会员

帖子: 169
体力: 327
威望: 4
离线: 33 天

5^# 大中小发表于 2007-6-14 02:30

很明显,apple的gallery效果在关闭时是有透明度的减小的

TOP

dx1 [楼主]

初级会员

帖子: 48
体力: 128
威望: 0
当前: 广东广州
离线: 207 天

6^# 大中小发表于 2007-6-18 17:20

还是想学习苹果的这种效果,不知哪位高手能抽空研究一下? 今天我自己又研究了一下但未果,郁闷得很啊.......

希望能够帮到你……

TOP

mozart0

匪徒田老大

荣誉管理团队

帖子: 2374
体力: 6368
威望: 180
当前: 上海长宁

7^# 大中小发表于 2007-6-19 07:57

从前做的类似的东西，不过没有它的那种半透明效果，也没有缩小的效果：

提示：您可以先修改部分代码再运行

[ 本帖最后由 mozart0 于 2007-6-19 07:59 编辑 ]

居处恭执事敬与人忠

TOP

dx1 [楼主]

初级会员

帖子: 48
体力: 128
威望: 0
当前: 广东广州
离线: 207 天

8^# 大中小发表于 2007-6-19 11:08

mozart0版主的这个已经很像了, 研究一下,谢谢!!!

希望能够帮到你……

TOP

kouyubo

扁扁

高级会员

帖子: 644
体力: 867
威望: 3
当前: 北京海淀区
离线: 4 天

专长 前端制作

9^# 大中小发表于 2007-6-19 11:54

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript" >
function hideLayer()
{	
	var layer = document.getElementById("popImageLayer");
	layer.style.visibility='hidden';
}
function dispear(){
	var layer = document.getElementById("popImageLayer");
	if ((layer.style.width>0)&& (layer.style.height>0)){
		layer.style.width-=1;
		layer.style.height-=1;
	}
	else {
		layer.style.visibility='hidden';
		if (window.interval)
		clearInterval(interval);
	}
}
function popImage(obj,img,href) 
{ 
	var layer = document.getElementById("popImageLayer");
	var t=obj.offsetTop;
	var l=obj.offsetLeft;
	while(obj=obj.offsetParent){
		t+=obj.offsetTop;
		l+=obj.offsetLeft;
	}
	var content = "<table border=0 width=180 height=180><tr><td align='center' valign='middle'>\n"+
	"<A href="+href+" target=_blank><IMG src='"+img+"' onload='DrawImage(this,180,180);'  onMouseOut='low(this);hideLayer();' onMouseOver=high(this) style='FILTER: alpha(opacity=10)'></A></td></tr></table>"; // onClick='hideLayer();'
			layer.innerHTML=content;
			layer.style.left =l + 35 -90;
			layer.style.top = t+35-90;
			layer.style.visibility='visible';
} 
function moveToMouseLoc(e) 
{ 
	var layer = document.getElementById("popImageLayer");
	var offsetX = -5; 
	var offsetY = -5;
	var	 x = event.x + document.body.scrollLeft;
	var	 y = event.y + document.body.scrollTop; 
	layer.style.left = x + offsetX;
	layer.style.top = y + offsetY;
	return true; 
} 
function DrawImage(img,width,height){ 
	if(DrawImage.arguments.length <= 1) 
		width=height=70;
	var image=new Image(); 
	image.src=img.src; 
	if(image.width>0 && image.height>0)
	{
	  if(image.width>width)
	  {
	  	rate=image.height/image.width;
	  	newHeight=rate*width;
	  	img.width=width;
	  	img.height=newHeight;
	  } 
	}
	if(img.height>height)
	{
		rate=image.width/image.height;
		newWidth=rate*height;
		img.height=height;
		img.width=newWidth;
	}
}
function DrawImage50(img){ 
	DrawImage(img,50,50);
}
function resetForm(){
	var f=document.frmsearch;
   f.Page.value = 1;
   f.ClassCode.value ='' ;
   f.SortType.value ='' ;		
   f.KeyWord.value='';
   f.Area.value='';
   f.MinPrice.value=f.MaxPrice.value='';
	return false;		
}		
function manualSearch(){
	var f=document.frmsearch;
   f.Page.value = 1;
  // f.ClassCode.value ='' ;
   f.SortType.value ='' ;		
   f.submit();
	return false;		
}
function checkCondition(obj) {
	return true;
}
function selectview(obj)
{
   var f=document.frmsearch;
   if ((obj.selectedIndex>0) && (obj.selectedIndex <7))
   		f.SortType.value = obj.options[obj.selectedIndex].value;
	else if ((obj.selectedIndex>6) && (obj.selectedIndex <10))
   		f.View.value = obj.options[obj.selectedIndex].value;
	else if ((obj.selectedIndex>9) && (obj.selectedIndex <13))
   		f.PageSize.value = obj.options[obj.selectedIndex].value;
   f.submit();
	return false;		
}
function changeLocation(obj){
	var f=document.frmsearch;
   f.Area.value = obj.options[obj.selectedIndex].value;
   f.submit();
	return false;		
}
function changeViewMode(mode){
	var f=document.frmsearch;
   f.View.value = mode;
   f.submit();
	return false;
}
function changePage(page){
	var f=document.frmsearch;
   f.Page.value = page;
   f.submit();
	return false;
}
function changePageSize(pagesize){
	var f=document.frmsearch;
   f.Page.value = 1;
   f.PageSize.value = pagesize;		
   f.submit();
	return false;
}
function changeSortType(type){
	var f=document.frmsearch;
   f.Page.value = 1;		
   f.SortType.value = type;
   f.submit();
	return false;
}
function changeClassCode(code){
	var f=document.frmsearch;
   f.ClassCode.value = code;
   f.Page.value=1;
   f.submit();
	return false;
}
function high(which2){
	theobject=which2;
	highlighting=setInterval("highlightit(theobject)",40);
}
function low(which2){
	clearInterval(highlighting);
	which2.filters.alpha.opacity=40;
}
function highlightit(cur2){
	if (cur2.filters.alpha.opacity<100)
		cur2.filters.alpha.opacity+=5
	else if (window.highlighting)
		clearInterval(highlighting)
}
function delightit(cur2){
	if (cur2.filters.alpha.opacity>5)
		cur2.filters.alpha.opacity-=5;
	else if (window.highlighting)
			clearInterval(highlighting);
}
</script>
<div id="popImageLayer" align="center"  name="popImageLayer"  style="position:absolute; visibility: hidden; width: 180; height: 180;cursor: hand;border-style:solid;border-width:1pt; border-color:orange" calss=""></div>
<center>
<br /><br /><br />
<div id="090" ><img src="http://admin.mall.dangdang.com/GoodsImage/S000000460/Small/200608090909231.png" onMouseOver="popImage(this,'http://admin.mall.dangdang.com/GoodsImage/S000000460/Middle/200608090909231.png','http://wangfenglitai.mall.dangdang.com/products/G00000072867.html');" border=0>hkjhgkhk</div></a>
</center>
</body>
</html>

提示：您可以先修改部分代码再运行

在路上，还要走多远

TOP

ripen

新手上路

帖子: 14
体力: 29
威望: 0
离线: 331 天

10^# 大中小发表于 2007-6-19 13:42

引用:

原帖由 mozart0 于 2007-6-19 07:57 发表
从前做的类似的东西，不过没有它的那种半透明效果，也没有缩小的效果：

[html]

.d{width:200px;position:relative;left:400px;top:200px}
.d img{marging:20px;cursorointer}

...

载入更新时候有点慢，甚至在本地测试的时候也会发现载入的图片有点缓慢～
不过效果还是很好的～

TOP

dx1 [楼主]

初级会员

帖子: 48
体力: 128
威望: 0
当前: 广东广州
离线: 207 天

11^# 大中小发表于 2007-6-19 13:53

引用:

原帖由 ripen 于 2007-6-19 13:42 发表
载入更新时候有点慢，甚至在本地测试的时候也会发现载入的图片有点缓慢～
不过效果还是很好的～

mozart0的代码已经很近似苹果的了,载入图片慢,是因为我们访问苹果网站的速度慢所导致,不关代码的问题!
不知能否将"鼠标移开图片消失" 变为 "鼠标在图片上单击图片消失" ?

希望能够帮到你……

TOP

mozart0

匪徒田老大

荣誉管理团队

帖子: 2374
体力: 6368
威望: 180
当前: 上海长宁

12^# 大中小发表于 2007-6-19 13:58

回复 #11 dx1 的帖子

你可以自己下载那个js文件，尝试改动。很简单

居处恭执事敬与人忠

TOP

at63

享受枯萎

初级会员

认证
帖子: 4290
体力: 17
威望: 0
当前: 广东深圳

专长 网站运营

13^# 大中小发表于 2007-6-19 14:17

不错

珍惜吧

TOP

ripen

新手上路

帖子: 14
体力: 29
威望: 0
离线: 331 天

14^# 大中小发表于 2007-6-19 16:24

的确是如此！

[ 本帖最后由 ripen 于 2007-6-19 17:13 编辑 ]

TOP

dx1 [楼主]

初级会员

帖子: 48
体力: 128
威望: 0
当前: 广东广州
离线: 207 天

15^# 大中小发表于 2007-6-21 13:00

引用:

原帖由 mozart0 于 2007-6-19 13:58 发表
你可以自己下载那个js文件，尝试改动。很简单

我试了,不行啊,能教一下到底如何将"鼠标移开图片消失" 变为 "鼠标在图片上单击图片消失" 吗? 谢谢!

希望能够帮到你……

TOP

dx1 [楼主]

初级会员

帖子: 48
体力: 128
威望: 0
当前: 广东广州
离线: 207 天

16^# 大中小发表于 2007-6-27 08:43

自己顶一下,请指导一下好吗?

希望能够帮到你……

TOP

rick903

初级会员

帖子: 39
体力: 83
威望: 0
离线: 240 天

17^# 大中小发表于 2007-6-27 16:30

在代码里把 onmouseout事件改成 onclick
当然得先把 zoomMask 函数里面的 mask.onclick 屏蔽

TOP

dx1 [楼主]

初级会员

帖子: 48
体力: 128
威望: 0
当前: 广东广州
离线: 207 天

18^# 大中小发表于 2007-6-27 17:46

谢谢rick903的解答,我马上去试试!
Thank you!!!

希望能够帮到你……

TOP

qlblue

中级会员

帖子: 114
体力: 256
威望: 0
当前: 北京海淀区

专长 网页设计,平面,ASP

19^# 大中小发表于 2007-7-1 12:53

kouyubo 不错

7tzone.com

TOP

sandman

新手上路

帖子: 44
体力: 4
威望: 0
离线: 321 天

20^# 大中小发表于 2007-7-17 16:45

效果演示

http://www.51page.cn/temp/Apple_popup/popup.htm

打包下载 http://www.51page.cn/temp/Apple_popup/Apple_popup.rar

急流设计工作室 Rush Studio
--------------------------------------
www.51page.cn

TOP

BillyChow

初级会员

帖子: 65
体力: 180
威望: 0
当前: 湖北武汉
离线: 172 天

21^# 大中小发表于 2007-7-17 16:57

前天接触jQuery, 玩了2天后, 感觉很爽.
这种效果用jQuery做, 肯定是小菜一蝶了.

Simple is Beauty...

TOP

haocat

绝世好猫

中级会员

帖子: 204
体力: 377
威望: 0
当前: 江西南昌
离线: 24 天

专长 网页设计,JS,PHP

22^# 大中小发表于 2007-8-29 20:08

引用:

原帖由 sandman 于 2007-7-17 16:45 发表
 http://www.51page.cn/temp/Apple_popup/popup.htm

打包下载 http://www.51page.cn/temp/Apple_popup/Apple_popup.rar

这才是对的不错谢谢啊！~~~

绝世※好猫

TOP

binghexijian

中级会员

帖子: 197
体力: 384
威望: 0
当前: 福建泉州
离线: 7 天

23^# 大中小发表于 2007-8-29 23:43

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML><HEAD><TITLE>Apple - Mac OS X Leopard - Features - Desktop</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META http-equiv=pics-label 
content='(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.apple.com" r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.apple.com" r (n 0 s 0 v 0 l 0))'>
<META http-equiv=Expires content="Fri, 26 Mar 1999 23:59:59 GMT">
<META content="Apple Computer, Inc." name=Author>
<META content=products,macs name=Category>
<META 
content="The new look of Mac OS X Leopard showcases your favorite desktop image and puts new file Stacks at your fingertips for a stunning, clutter-free workspace." 
name=Description>
<META content=width=1024 name=viewport>
<script src="http://images.apple.com/global/scripts/lib/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/lib/scriptaculous.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/apple_core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/browserdetect.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/search_decorator.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/global/scripts/ac_quicktime.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/macosx/leopard/scripts/pagenav.js" type="text/javascript" charset="utf-8"></script>
<script src="http://images.apple.com/macosx/leopard/scripts/gallery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://images.apple.com/global/styles/base.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="http://images.apple.com/macosx/leopard/styles/leopard.css" type="text/css" charset="utf-8">
</head>
<body class="macosx leopard features" id="desktop">
<script src="http://images.apple.com/global/nav/scripts/shortcuts.js" type="text/javascript" charset="utf-8"></script>

<DIV id=container>
<DIV id=main>
<DIV id=localnav></DIV>
<DIV class=grid2colc id=content>
  <DIV class="column last">
    <DIV class=grid2col>
<DIV class="column first">
  <DIV class="gallery callout">
  <UL>
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_clean20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_cleanthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_stacks20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Stacks" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_stacksthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_stackszoom20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Stacks" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_stackszoomthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_grid20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Grid" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_gridthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_menu20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Menu" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_menuthumb20070611.jpg" 
  width=80 border=0></A> 
  <LI class=galleryitem><A 
  href="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_hero20070611.jpg"><IMG 
  height=50 alt="Leopard Desktop Hero" 
  src="http://images.apple.com/macosx/leopard/features/images/desktop_gallery_herothumb20070611.jpg" 
  width=80 border=0></A> </LI></UL>
</BODY></HTML>

提示：您可以先修改部分代码再运行

TOP

风雨行

新手上路

帖子: 21
体力: 42
威望: 0
当前: 北京朝阳区

24^# 大中小发表于 2007-8-30 09:55

楼上的比较像

TOP

ycmj110

中级会员

帖子: 119
体力: 280
威望: 0
离线: 418 天

25^# 大中小发表于 2007-8-30 10:15

效果真强，学习了。

TOP