文章/答案/技术大牛

发布

社区首页 >问答首页 >特定角度对角上的滑动单元

问特定角度对角上的滑动单元
EN

Stack Overflow用户

提问于 2019-05-20 05:42:01

回答 1查看 671关注 0票数 0

我的目标是从右到左在对角线上滑动一个元素，无论设备的宽度或高度如何。目前，我的代码只从一个特定的位置，右上到特定的位置左下角。我想要的是只给它初始的右上角值和角度，它应该用初始值加角度来计算左下角。这样，滑动效果的角度将等于我的元素的角度，使它在任何设备上都很好看，无论是视口的宽度还是高度。

html

<a id="flymeby" href="#">Fly me by</a>

$( "#flymeby" ).click(function(e) {
$('body').append('<div class="flyby"></div>');
var left = $('.flyby').offset().left;
  e.preventDefault();
                $(".flyby").css({left:left}).animate({"left":"-500px", "top":"300px"}, 6600, "swing", function() {

                    $('.flyby').remove();
                });
});

css

body {
  overflow-x:hidden;
}
.flyby {
  width:500px;
  background:#000;
  width: 500px;
  height: 69px;
  position: absolute;
  top: 50px;
  right: -500px;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: skewY(-15deg);
  -ms-transform: skewY(-15deg);
  transform: skewY(-15deg);
}
#flymeby {
  background:red;
  color:#fff;
  display:inline-block;
  padding:10px 20px;
}

我的工作到目前为止， http://jsfiddle.net/fbtv5kpz/4/

更新：，理想情况下，我希望幻灯片没有初始值，只给出角度，它应该从右到左自动在屏幕中间滑动。

javascript

jquery

html

css

回答 1

Stack Overflow用户

发布于 2019-05-20 05:52:39

你可以用animation和translate()来做

使用动画onclick添加类DOM a

工作小提琴

$("#flymeby").click(function(e) {
  $(".flyby").addClass('startFly');
});

body {
  overflow-x: hidden;
}

.flyby {
  width: 500px;
  background: #000;
  width: 500px;
  height: 69px;
  position: absolute;
  transform-origin: top right;
  transform: skewY(-15deg) translate(200%);
}

#flymeby {
  background: red;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
}

.startFly{
  animation: fly 6s linear;
}

@keyframes fly {
  100% {
 transform: skewY(-15deg) translate(-200%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="flymeby" href="#">Fly me by</a>
<div class="flyby"></div>

更新为附加的图像

  var w=$(window).width();
  var h=$(window).height();
  var g=h+w;
  $(".flyby").css('transform','skewY(-15deg) translateX(' + g + 'px) translateY(' + 0 + 'px)' );

$("#flymeby").click(function(e) {
  $(".flyby").addClass('startFly');
});

body {
  overflow-x: hidden;
  height: 100%;
}

html { height: 100%; }


.flyby {
  background: #000;
  width: 100px;
  height: 69px;
  position: absolute;
  transform-origin: top right;
}

#flymeby {
  background: red;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
}

.startFly{
  animation: fly 6s linear;
}

@keyframes fly {
  100% {
 transform: skewY(-15deg) translateY(80vh) translateX(0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="flymeby" href="#">Fly me by</a>
<div class="flyby"></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56214876

复制

相似问题

问特定角度对角上的滑动单元
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问特定角度对角上的滑动单元EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问特定角度对角上的滑动单元
EN