紧急求助-麻烦帮看看这个js效果，是怎么实现的

edgesun 2015-05-30 10:40:07

http://www.cuiyouguang.com/
打开这个网站后，点左侧的新闻，原窗口缩小，新内容放大后打开。
遇到个客户要这种效果，看了半天实在不知道怎么实现的，下载这个网站打本地打开一直提示y6U未定义。如果有了解的帮忙指导下，能有demo的话就更好了。

...全文

264 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

edgesun 2015-05-31

打赏
举报

引用 4 楼 showbo 的回复:

[quote=引用 3 楼 edgesun 的回复:] [quote=引用 1 楼 showbo 的回复:] css3动画而已，帮你提取出来了

太棒了，非常感谢版主。还有一个问题，问下原理，为什么 http://www.cuiyouguang.com/ 点击左侧新闻，执行我前面问的效果的同时，地址栏的网址也变了？看起来没有刷新过程啊。感觉是两个页面啊，如果是用的ajax地址栏不应该变啊[/quote] html5的pushstate[/quote] 收到，再次感谢

Go 旅城通票 2015-05-31

打赏
举报

引用 3 楼 edgesun 的回复:

[quote=引用 1 楼 showbo 的回复:] css3动画而已，帮你提取出来了

太棒了，非常感谢版主。还有一个问题，问下原理，为什么 http://www.cuiyouguang.com/ 点击左侧新闻，执行我前面问的效果的同时，地址栏的网址也变了？看起来没有刷新过程啊。感觉是两个页面啊，如果是用的ajax地址栏不应该变啊[/quote] html5的pushstate

edgesun 2015-05-31

打赏
举报

引用 1 楼 showbo 的回复:

css3动画而已，帮你提取出来了

太棒了，非常感谢版主。还有一个问题，问下原理，为什么 http://www.cuiyouguang.com/ 点击左侧新闻，执行我前面问的效果的同时，地址栏的网址也变了？看起来没有刷新过程啊。感觉是两个页面啊，如果是用的ajax地址栏不应该变啊

Go 旅城通票 2015-05-31

打赏
举报

css3动画而已，帮你提取出来了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
html, body,#wrapper{height:100%;width:100%;overflow:hidden;margin:0;padding:0;background:#eee}
#wrapper #content{width:100%;height:100%;background:#fff}
#wrapper #content{
	-moz-transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
#wrapper.on #content{
	-webkit-transform:scale(.7,.7);
	-moz-transform:scale(.7,.7);
	transform:scale(.7,.7);backgound:#
 }
#open{
	position:absolute; top:0; left:0; visibility:hidden;
	-webkit-transform:translateY(100%) scale(.5,.5);
	-moz-transform:translateY(100%) scale(.5,.5);
	-ms-transform:translateY(100%) scale(.5,.5);
	transform:translateY(100%) scale(.5,.5);
	-moz-transition:all 1.6s cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: all 1.6s cubic-bezier(0.23, 1, 0.32, 1);
	transition:all 1.6s cubic-bezier(0.23, 1, 0.32, 1);
	background:#fff;width:100%;height:100%;z-index:1100
 }
#open.on{ visibility:visible;
	-webkit-transform:translateY(0%) scale(.5,.5);
	-moz-transform:translateY(0%) scale(.5,.5);
	-ms-transform:translateY(0%) scale(.5,.5);
	transform:translateY(0%) scale(.5,.5);
	-moz-transition:all .5s cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: all .5s cubic-bezier(0.23, 1, 0.32, 1);
	transition:all .5s cubic-bezier(0.23, 1, 0.32, 1);
 }
#open.s{
	-moz-transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	transition:all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-transform:translateY(0%) scale(1,1);
	-moz-transform:translateY(0%) scale(1,1);
	-ms-transform:translateY(0%) scale(1,1);
	transform:translateY(0%) scale(1,1);
}
#open a.close{position:absolute;top:10px;right:10px;border:solid 1px #eee;width:20px;height:20px;text-align:center;line-height:20px}
#mask{ width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,.4); visibility:hidden; opacity:0; }
#mask.on{
	visibility:visible; opacity:1;
}
</style>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<div id="wrapper">
<div id="content"><a href="#">新闻标题</a></div>
</div>

<div id="open">新闻内容<a href="#" class="close">X</a></div>
<div id="mask"></div>
<script>
$('#content a').click(function(){
$('#open,#wrapper,#mask').addClass('on')
setTimeout(function(){$('#open').addClass('s');},500);
return false;
})
$('#open a.close').click(function(){
$('#open').removeClass('s')
setTimeout(function(){$('#open,#wrapper,#mask').removeClass('on')},500)
return false
})
</script>