伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:其他-移动,杂项
 8979  64  查看评论 (4)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8

使用方法

在页面中引入jquery和TweenMax.min.js,以及ScrollToPlugin.min.js文件。<script src="js/jquery.min.js"></script> <script src="http://cdn.bootcss.com/gsap/1.19.0/TweenMax.min.js"></script> <script src="http://cdn.bootcss.com/gsap/1.19.0/plugins/ScrollToPlugin.min.js"></script>

HTML结构

返回顶部小火箭的HTML结构如下:<div id="shangxia2">   <span id="gotop">     <img src="img/huojian.svg" alt="返回顶部小火箭">   </span> </div>

CSS样式

为小火箭添加必要的CSS样式:定位方式为fixed,位置固定在页面的右下角。然后在鼠标滑过小火箭时,为小火箭添加rubberBand的animation动画,该动画通过transform函数来对小火箭进行3D缩放。/* 小火箭css */ #gotop1 {     width: 80px;     position: fixed;     bottom: 90px;     cursor: pointer;     z-index: 99998;     right: 50%;     margin-right: -620px; }   /* 小火箭悬停手机1946韦德最新网站 */   #gotop1:hover {     animation: rubberBand 1s; }   @keyframes rubberBand {   from {     transform: scale3d(1, 1, 1);   }     30% {     transform: scale3d(1.25, 0.75, 1);   }     40% {     transform: scale3d(0.75, 1.25, 1);   }     50% {     transform: scale3d(1.15, 0.85, 1);   }     65% {     transform: scale3d(.95, 1.05, 1);   }     75% {     transform: scale3d(1.05, .95, 1);   }     to {     transform: scale3d(1, 1, 1);   } }

初始化伟德BETVICTOR

在页面DOM元素加载完毕之后,通过下面的方法来初始化该返回顶部手机1946韦德最新网站。$("#gotop").click(function(e) {    TweenMax.to(window, 1.5, {scrollTo:0, ease: Expo.easeInOut});    var huojian = new TimelineLite();     huojian.to("#gotop1", 1, {rotationY:720, scale:0.6, y:"+=40", ease:  Power4.easeOut})     .to("#gotop1", 1, {y:-1000, opacity:0, ease:  Power4.easeOut}, 0.6)     .to("#gotop1", 1, {y:0, rotationY:0, opacity:1, scale:1, ease: Expo.easeOut, clearProps: "all"}, "1.4"); });
相关伟德BETVICTOR-移动,杂项

滚动顶部伟德BETVICTOR

滚动顶部伟德BETVICTOR,二维码,客服电话,移上去浮动显示
  移动
 22977  197

手机端多点触控图片旋转放大缩小移动

支持手机端的图片多点触控处理(放大,缩小,旋转)
  移动
 17846  37

讨论这个项目(4)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    眼睛怎么睁都睁不大的乐乐 0
    2017/5/17 11:33:19
    别的效果都好 不知道为什么火箭不能旋转 可能是chrome版本太低的缘故吧 回复
    目标 0
    2017/2/15 8:19:52
    指南针 0
    2016/12/27 13:12:53
    随遇あ安然 0
    2016/12/22 17:12:56
取消回复