CINXE.COM
云校园-世纪中大 山高水长
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>云校园-世纪中大 山高水长</title><meta name="pageType" content="2"> <meta name="pageTitle" content="云校园"> <META Name="keywords" Content="世纪中大 山高水长,云校园" /> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no,email=no,adress=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="x5-fullscreen" content="true"> <meta name="full-screen" content="yes"> <meta name="description" content="" /> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="" /> <meta name="msapplication-TileImage" content="images/favicon.png"> <meta name="msapplication-TileColor" content=""> <meta name="renderer" content="webkit"> <link rel="icon" sizes="72*72" href="../images/favicon.png"> <link rel="apple-touch-icon-precomposed" href="../images/favicon.png"> <link rel="stylesheet" href="../css/reset.css"> <link rel="stylesheet" href="../css/style.css"> <script type="text/javascript" src="../js/jq.js"></script> <script type="text/javascript" src="../js/slide.js"></script> <!--Announced by Visual SiteBuilder 9--> <link rel="stylesheet" type="text/css" href="../_sitegray/_sitegray_d.css" /> <script language="javascript" src="../_sitegray/_sitegray.js"></script> <!-- CustomerNO:77656262657232307c7846545354574200010005435c --> <link rel="stylesheet" type="text/css" href="../yszd-yxy.vsb.css" /> <script type="text/javascript" src="/system/resource/js/counter.js"></script> <script type="text/javascript">_jsq_(1271,'/yszd-yxy.jsp',-1,1996655435)</script> </head> <body class="ibg1 guide"> <div id="miso_loading"></div> <main id="container" class="page-wrapper"> <!--============================头部 开始=============================--> <section class="pc_hb"> <section class="pc_h"> <header id="header"> <div class="wp flex"> <div class="logo flex"> <a href="../index.htm" class="a"> <img src="../images/logo.png" alt=""> <img src="../images/guide1.png" class="guide_img guide1"> </a> <div class="djs flex"> <div class="bg1s flex"> <div class="bg1s1"> <div class="s1"><img src="../images/bg1s_1.png" alt=""></div> <div class="s1"><img src="../images/bg1s_2.png" alt=""></div> <div class="s1"><img src="../images/bg1s_3.png" alt=""></div> <div class="s1"><img src="../images/bg1s_4.png" alt=""></div> <div class="s1"><img src="../images/bg1s_5.png" alt=""></div> <div class="s1"><img src="../images/bg1s_6.png" alt=""></div> <div class="s1"><img src="../images/bg1s_7.png" alt=""></div> </div> <div class="bg1s1"> <div class="s1"><img src="../images/bg1s_1.png" alt=""></div> <div class="s1"><img src="../images/bg1s_2.png" alt=""></div> <div class="s1"><img src="../images/bg1s_3.png" alt=""></div> <div class="s1"><img src="../images/bg1s_4.png" alt=""></div> <div class="s1"><img src="../images/bg1s_5.png" alt=""></div> <div class="s1"><img src="../images/bg1s_6.png" alt=""></div> <div class="s1"><img src="../images/bg1s_7.png" alt=""></div> </div> </div> <div class="top flex"> <h6>倒计时</h6> <h3 class="days"></h3> <h5>天</h5> </div> <script src="../js/downCount.js"></script> <script> $('.djs .top').downCount({ date: '11/12/2024 00:00:00', offset: +10 }, function () { $('.djs h3').html("000") }); </script> </div> </div> <div class="right flex"> <nav id="nav" class="pc_nav"><ul class="flex"> <li> <a href="../xqdt/tzgg.htm"> <div class="h3"><div class="ico"><img src="../images/nav_i1.png" alt="" class="i1"><img src="../images/nav_i1_on.png" alt="" class="i2"></div>校庆动态</div> </a> <div class="sub"> <div class="box"> <a href="../xqdt/tzgg.htm">通知公告</a> <a href="../xqdt/xqhd.htm">校庆活动</a> <a href="../xqdt/xqxw.htm">校庆新闻</a> <a href="../xqdt/xqsp.htm">校庆视频</a> <a href="../xqdt/mtbd.htm">媒体报道</a> </div> </div> </li> <li> <a href="../bnzr/zssc.htm"> <div class="h3"><div class="ico"><img src="../images/nav_i2.png" alt="" class="i1"><img src="../images/nav_i2_on.png" alt="" class="i2"></div>百年峥嵘</div> </a> <div class="sub"> <div class="box"> <a href="../bnzr/zssc.htm">中山手创</a> <a href="../bnzr/sjzd.htm">世纪中大</a> <a href="https://www.sysu.edu.cn/news/">今日中大</a> </div> </div> </li> <li> <a href="../bnsr/bkjxgk.htm"> <div class="h3"><div class="ico"><img src="../images/nav_i3.png" alt="" class="i1"><img src="../images/nav_i3_on.png" alt="" class="i2"></div>百年树人</div> </a> <div class="sub"> <div class="box"> <a href="../bnsr/bkjxgk.htm">本科教学概况</a> <a href="../bnsr/yjsjygk.htm">研究生教育概况</a> <a href="../bnsr/zyjxtx.htm">卓越教学体系</a> <a href="https://jwb.sysu.edu.cn/cat/244">国际化办学</a> </div> </div> </li> <li> <a href="../xsyd/xzda.htm"> <div class="h3"><div class="ico"><img src="../images/nav_i4.png" alt="" class="i1"><img src="../images/nav_i4_on.png" alt="" class="i2"></div>学术沿革</div> </a> <div class="sub"> <div class="box"> <a href="../xsyd/xzda.htm">学者档案</a> <a href="../xsyd/xkda.htm">学科档案</a> <a href="../xsyd/kyda/zrkx.htm">科研档案</a> </div> </div> </li> <li> <a href="../jzzf/zf/szf.htm"> <div class="h3"><div class="ico"><img src="../images/nav_i5.png" alt="" class="i1"><img src="../images/nav_i5_on.png" alt="" class="i2"></div>捐赠祝福</div> </a> <div class="sub"> <div class="box"> <a href="../jzzf/zf/szf.htm">祝福</a> <a href="../jzzf/jz/jz.htm">捐赠</a> </div> </div> </li> <li class=""> <a href="yxy.htm"> <div class="h3"><div class="ico"><img src="../images/nav_i6.png" alt="" class="i1"><img src="../images/nav_i6_on.png" alt="" class="i2"></div>云上中大</div> </a> <div class="sub"> <div class="box"> <a href="yxy.htm">云校园</a> <a href="ykz.htm">云看展</a> </div> </div> </li> <li> <a href="../xqfw/xqbs.htm"> <div class="h3"><div class="ico"><img src="../images/nav_i7.png" alt="" class="i1"><img src="../images/nav_i7_on.png" alt="" class="i2"></div>校庆服务</div> </a> <div class="sub"> <div class="box"> <a href="../xqfw/xqbs.htm">校庆标识及主题</a> <a href="../xqfw/wccp.htm">文创产品</a> <a href="../xqfw/xyfw.htm">校友服务</a> <a href="../xqfw/lxwm.htm">联系我们</a> </div> </div> </li> </ul> <img src="../images/guide2.png" class="guide_img guide2"></nav> <div class="lang"><script language="javascript" src="/system/resource/js/dynclicks.js"></script><script language="javascript" src="/system/resource/js/openlink.js"></script> <a href="https://sysu100.sysu.edu.cn/en/" title="" onclick="_addDynClicks("wburl", 1996655435, 92606)" class="a">EN</a> </div> <div class="miso_btn1"> <div id="openBtn" class="btn rd-navbar-toggle"> <div class="lcbody"> <div class="lcitem top"> <div class="rect top"></div> </div> <div class="lcitem center hide"> <div class="rect bottom"></div> </div> <div class="lcitem bottom"> <div class="rect bottom"></div> </div> </div> </div> <img src="../images/guide3.png" class="guide_img guide3"> </div> </div> </div> </header> </section> </section> <section class="slide_down_nav"> <div class="slide_down_nav_content"> <div class="wp"><ul class="miso_wzmap"> <li> <h3><a href="../xqdt/tzgg.htm">校庆动态</a></h3> <dl> <dd><a href="../xqdt/tzgg.htm">通知公告</a></dd> <dd><a href="../xqdt/xqhd.htm">校庆活动</a></dd> <dd><a href="../xqdt/xqxw.htm">校庆新闻</a></dd> <dd><a href="../xqdt/xqsp.htm">校庆视频</a></dd> <dd><a href="../xqdt/mtbd.htm">媒体报道</a></dd> </dl> </li> <li> <h3><a href="../bnzr/zssc.htm">百年峥嵘</a></h3> <dl> <dd><a href="../bnzr/zssc.htm">中山手创</a></dd> <dd><a href="../bnzr/sjzd.htm">世纪中大</a></dd> <dd><a href="https://www.sysu.edu.cn/news/" target="_blank">今日中大</a></dd> </dl> </li> <li> <h3><a href="../bnsr/bkjxgk.htm">百年树人</a></h3> <dl> <dd><a href="../bnsr/bkjxgk.htm">本科教学概况</a></dd> <dd><a href="../bnsr/yjsjygk.htm">研究生教育概况</a></dd> <dd><a href="../bnsr/zyjxtx.htm">卓越教学体系</a></dd> <dd><a href="https://jwb.sysu.edu.cn/cat/244" target="_blank">国际化办学</a></dd> </dl> </li> <li> <h3><a href="../xsyd/xzda.htm">学术沿革</a></h3> <dl> <dd><a href="../xsyd/xzda.htm">学者档案</a></dd> <dd><a href="../xsyd/xkda.htm">学科档案</a></dd> <dd><a href="../xsyd/kyda/zrkx.htm">科研档案</a></dd> </dl> </li> <li> <h3><a href="../jzzf/zf/szf.htm">捐赠祝福</a></h3> <dl> <dd><a href="../jzzf/zf/szf.htm">祝福</a></dd> <dd><a href="../jzzf/jz/jz.htm">捐赠</a></dd> </dl> </li> <li> <h3><a href="yxy.htm">云上中大</a></h3> <dl> <dd><a href="yxy.htm">云校园</a></dd> <dd><a href="ykz.htm">云看展</a></dd> </dl> </li> <li> <h3><a href="../xqfw/xqbs.htm">校庆服务</a></h3> <dl> <dd><a href="../xqfw/xqbs.htm">校庆标识及主题</a></dd> <dd><a href="../xqfw/wccp.htm">文创产品</a></dd> <dd><a href="../xqfw/xyfw.htm">校友服务</a></dd> <dd><a href="../xqfw/lxwm.htm">联系我们</a></dd> </dl> </li> </ul></div> </div> <div class="slide_down_nav_bg"></div> <div class="slide_down_nav_line_shuxian"></div> <div class="close">关<br>闭</div> </section> <div class="m_header flex"> <div class="bg"></div> <div class="tit flex"> <a href="../index.htm" class="a"> <img src="../images/s_logo.png" alt=""> </a> <h3> 云校园</h3> <div class="miso_btn2"> <div id="openBtn" class="btn rd-navbar-toggle"> <div class="lcbody"> <div class="lcitem top"> <div class="rect top"></div> </div> <div class="lcitem center hide"> <div class="rect bottom"></div> </div> <div class="lcitem bottom"> <div class="rect bottom"></div> </div> </div> </div> </div> </div> <div class="box"><ul> <li> <h3><a href="../xqdt/tzgg.htm">校庆动态</a></h3> <dl> <dd><a href="../xqdt/tzgg.htm">通知公告</a> </dd> <dd><a href="../xqdt/xqhd.htm">校庆活动</a> </dd> <dd><a href="../xqdt/xqxw.htm">校庆新闻</a> </dd> <dd><a href="../xqdt/xqsp.htm">校庆视频</a> </dd> <dd><a href="../xqdt/mtbd.htm">媒体报道</a> </dd> </dl> </li> <li> <h3><a href="../bnzr/zssc.htm">百年峥嵘</a></h3> <dl> <dd><a href="../bnzr/zssc.htm">中山手创</a> </dd> <dd><a href="../bnzr/sjzd.htm">世纪中大</a> </dd> <dd><a href="https://www.sysu.edu.cn/news/" target="_blank">今日中大</a> </dd> </dl> </li> <li> <h3><a href="../bnsr/bkjxgk.htm">百年树人</a></h3> <dl> <dd><a href="../bnsr/bkjxgk.htm">本科教学概况</a> <div class="con"> <a href="https://admission.sysu.edu.cn/" class="a2" target="_blank">本科招生</a> </div> </dd> <dd><a href="../bnsr/yjsjygk.htm">研究生教育概况</a> </dd> <dd><a href="../bnsr/zyjxtx.htm">卓越教学体系</a> <div class="con"> <a href="https://jwb.sysu.edu.cn/newscenter/course" class="a2" target="_blank">名师名课</a> <a href="https://jwb.sysu.edu.cn/newscenter/teaching-material" class="a2" target="_blank">教材建设</a> <a href="https://jwb.sysu.edu.cn/newscenter/jxyj" class="a2" target="_blank">教学研究</a> </div> </dd> <dd><a href="https://jwb.sysu.edu.cn/cat/244" target="_blank">国际化办学</a> </dd> </dl> </li> <li> <h3><a href="../xsyd/xzda.htm">学术沿革</a></h3> <dl> <dd><a href="../xsyd/xzda.htm">学者档案</a> </dd> <dd><a href="../xsyd/xkda.htm">学科档案</a> </dd> <dd><a href="../xsyd/kyda/zrkx.htm">科研档案</a> <div class="con"> <a href="../xsyd/kyda/zrkx.htm" class="a2">自然科学</a> <a href="../xsyd/kyda/rwsk.htm" class="a2">人文社科</a> </div> </dd> </dl> </li> <li> <h3><a href="../jzzf/zf/szf.htm">捐赠祝福</a></h3> <dl> <dd><a href="../jzzf/zf/szf.htm">祝福</a> <div class="con"> <a href="../jzzf/zf/szf.htm" class="a2">送祝福</a> <a href="../jzzf/zf/spzf.htm" class="a2">视频祝福</a> </div> </dd> <dd><a href="../jzzf/jz/jz.htm">捐赠</a> <div class="con"> <a href="../jzzf/jz/jz.htm" class="a2">捐赠</a> <a href="../jzzf/jz/jjgz.htm" class="a2">基金工作</a> <a href="../jzzf/jz/gmxc.htm" class="a2">广募宣传</a> </div> </dd> </dl> </li> <li> <h3><a href="yxy.htm">云上中大</a></h3> <dl> <dd><a href="yxy.htm">云校园</a> </dd> <dd><a href="ykz.htm">云看展</a> </dd> </dl> </li> <li> <h3><a href="../xqfw/xqbs.htm">校庆服务</a></h3> <dl> <dd><a href="../xqfw/xqbs.htm">校庆标识及主题</a> </dd> <dd><a href="../xqfw/wccp.htm">文创产品</a> </dd> <dd><a href="../xqfw/xyfw.htm">校友服务</a> </dd> <dd><a href="../xqfw/lxwm.htm">联系我们</a> </dd> </dl> </li> </ul></div> </div> <!--============================头部 结束=============================--> <!--============================主体 开始=============================--> <div class="yxy" id="scene"> <div class="zoom"> <div class="image image-1"> <img src="../images/fj1.jpg" alt="" class="i2 img1"> <img src="../images/fj1s.png" alt="" class="i1 img1"> <div class="fcsBox" id="fcsBox"> <img src="../images/fc1.png" alt="" class="fcs"> <img src="../images/fc2.png" alt="" class="fcs"> </div> <div class="yunBoxs" id="cloud5"> <img src="../images/yun1s.png" alt="" class="yun"> <img src="../images/yun2s.png" alt="" class="yun"> <img src="../images/yun3s.png" alt="" class="yun"> <img src="../images/yun4s.png" alt="" class="yun"> <img src="../images/yun5s.png" alt="" class="yun"> <img src="../images/yun6s.png" alt="" class="yun"> <img src="../images/yun7s.png" alt="" class="yun"> </div> </div> <div class="image image-3 layerMove" data-depth="-.6" id="image-3"> <img src="../images/fj3.png" alt="" class="img1"> <div class="yunBox" id="cloud4"> <img src="../images/yun4.png" alt="" class="yun"> </div> </div> <div class="image image-4 layerMove" data-depth="-.5" id="image-4"> <img src="../images/fj4.png" alt="" class="img1"> <div class="yunBox" id="cloud3"> <img src="../images/yun3.png" alt="" class="yun"> </div> </div> <div class="image image-5 layerMove" data-depth=".3" id="image-5"> <img src="../images/fj5.png" alt="" class="img1"> <div class="yunBox" id="cloud2"> <img src="../images/yun2.png" alt="" class="yun"> </div> <div class="yunBox" id="cloud1"> <img src="../images/yun1.png" alt="" class="yun"> </div> </div> <div class="image image-2"> <ul class="xiaoqu flex" id="image-2"> <li> <a href="https://www.720yun.com/t/05vktqp9rdl?scene_id=74100127#scene_id=74100127" class="a" onclick="_addDynClicks("wburl", 1996655435, 92599)" target="_blank">广州校区南校园 <img src="../images/xiaoqu_i.png" alt=""></a> </li> <li> <a href="#" class="a" onclick="_addDynClicks("wburl", 1996655435, 92600)" target="_blank">广州校区北校园 <img src="../images/xiaoqu_i.png" alt=""></a> </li> <li> <a href="#" class="a" onclick="_addDynClicks("wburl", 1996655435, 92601)" target="_blank">广州校区东校园 <img src="../images/xiaoqu_i.png" alt=""></a> </li> <li> <a href="#" class="a" onclick="_addDynClicks("wburl", 1996655435, 92602)" target="_blank">深圳校区 <img src="../images/xiaoqu_i.png" alt=""></a> </li> <li> <a href="#" class="a" onclick="_addDynClicks("wburl", 1996655435, 92603)" target="_blank">珠海校区 <img src="../images/xiaoqu_i.png" alt=""></a> </li> </ul> </div> <div class="image image-6 layerMove" data-depth="-.1" id="image-6"> <a href="#" class="a"><img src="../images/fj6.png" alt="" class="img1"></a> </div> <div class="image image-7 layerMove" data-depth=".2" id="image-7"> <img src="../images/fj7.png" alt="" class="img1"> </div> <video src="../images/videoxy.mp4" class="video1" controls id="video_01"></video> </div> </div> <!--============================主体 结束=============================--> <!--============================底部 开始=============================--> <footer> <div class="fl1"> <div class="wp flex"> <div class="tit1"> 云上中大</div> <ul class="er_j flex"> <li class="on on1"> <a href="yxy.htm" class="a"><i></i>云校园</a> </li> <li> <a href="ykz.htm" class="a"><i></i>云看展</a> </li> <img src="../images/guide4.png" class="guide_img guide4"></ul> <div class="gw"> <a href="https://www.sysu.edu.cn/" class="a flex" onclick="_addDynClicks("wburl", 1996655435, 92581)"><img src="../images/gw_i1.png" alt="">中大主页</a> <img src="../images/guide5.png" class="guide_img guide5"> </div> </div> </div> </footer> <div class="zdl"> <img src="../images/guide6.png" class="guide_img1 guide6"> </div> </main> <div class="hide" id="gotop">TOP</div> <!--============================底部 结束=============================--> <!--============================动画 开始=============================--> <script src="../js/cookie.js"></script> <script src="../js/miso_dh.js"></script> <script src="../js/style.js"></script> <style> .pc_h #header:before{background: url(../images/header1.png) center top no-repeat; background-size: 100% 99%; height: 2.5rem;} </style> <script> gsap.registerPlugin(ScrollTrigger); var scene1 = gsap.timeline({ scrollTrigger: { id: "ZOOM", // Custom label to the marker trigger: ".yxy", // What element triggers the scroll scrub: 5, // Add a small delay of scrolling and animation. `true` is direct start: "top top", // Start at top of Trigger and at the top of the viewport end: "+=300% 0", // The element is 500px hight and end 50px from the top of the viewport pin: true // Pin the element true or false } }); scene1.to(".image-7", {scale: 10,x: 300,y: 15000,ease: "power1.in"},0) scene1.to(".image-6", {scale: 5,x: 10000,y: 8000,ease: "power1.in"},0) scene1.to(".image-5 .img1", {scale: 3,x: 0,y: 4000,ease: "power1.in"},0) scene1.to(".image-4 .img1", {scale: 1,x: 300,y: 1500,ease: "power1.in"},0) scene1.to(".image-3 .img1", {scale: 1.5,x: 300,y: 1000,ease: "power1.in"},0) scene1.to(".image-1 .img1", {x: 0,y: 160,ease: "power1.in"},0) scene1.fromTo(".image-1 .i1", { x: -1000,y: 0,opacity: 0,ease: "power1.in"}, { x: 0,y: 160,opacity: 1,ease: "power1.in"},0); scene1.to(".fcsBox", {opacity: 1,ease: "power1.in",duration: .5},'>') scene1.to(".yunBoxs", {opacity: 1,ease: "power1.in",duration: .5},'>') scene1.to(".xiaoqu", {opacity: 1,ease: "power1.in",duration: .5},'>') /* shatan */ // var shatan = gsap.timeline(); // ScrollTrigger.create({ // animation: shatan, // start: "25% top", // end: "45% 0", // scrub: 1, // }); // shatan.to(".image-1 .i2", {opacity: 0,ease: "power1.in"}, 0); /* Clouds */ var clouds = gsap.timeline(); ScrollTrigger.create({ animation: clouds, start: "0 top", end: "25% 0", scrub: 1, }); clouds.fromTo("#cloud1", { x: 1000}, { x: -1000}, 0) clouds.fromTo("#cloud2", { x: -3000}, { x: 2000}, 0) clouds.fromTo("#cloud3", { x: -2500}, { x: 1500}, 0) clouds.fromTo("#cloud4", { x: 1000}, { x: -2000}, 0); var _video=document.getElementById("video_01"); var div2=document.getElementById("image-2"); var div3=document.getElementById("image-3"); var div4=document.getElementById("image-4"); var div5=document.getElementById("image-5"); var div6=document.getElementById("image-6"); var div7=document.getElementById("image-7"); _video.addEventListener('ended', function () { _video.remove(); div3.remove(); div4.remove(); div5.remove(); div6.remove(); div7.remove(); div2.classList.add("on"); }); (function () { var updateOrientation = function () { var orientation = (window.innerWidth > window.innerHeight)? 'landscape' : 'portrait'; if(orientation === 'landscape'){ //横屏 $("body").append('<div class="tishi1"><div class="ico"><img src="../images/tishi1_i1.png"></div><h6>上下滚动鼠标滚轮查看更多内容</h6></div>'); setTimeout(function(){ $(".tishi1").remove(); },3000); } else if(orientation === 'portrait'){ //竖屏 $(".tishi1").remove(); } } var init = function () { updateOrientation(); window.addEventListener('resize',updateOrientation,false); } window.addEventListener('DOMContentLoaded',init,false) })() </script> <!-- <script src="js/parallax.js"></script> <script> $(function(){ $('#scene').parallax({calibrateX: true,calibrateY: false,invertX: true,invertY: false,scalarX: 2,scalarY: 2,frictionX: .2,frictionY:.2}); }); </script> --> <!--============================动画 结束=============================--> </body> </html>