文章/答案/技术大牛

发布

社区首页 >问答首页 >如何触发，基于鼠标位置，可变字体？

问如何触发，基于鼠标位置，可变字体？
EN

Stack Overflow用户

提问于 2020-02-14 19:53:15

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

我希望根据我的鼠标移动触发不同的部分，并使用可变字体。

对于第一部分，一切看起来都很好，但当我尝试触发第二部分时，它并没有像我预期的那样工作，因为它连接到了第一部分。

我需要让这个部分独立地以正确的方式工作(要有一个想法，请参阅第一部分如何在调试模式下反应)

我想知道我必须在我的Javascript代码中修改什么，才能使我的代码片段与我想要的所有部分一起工作，独立地使用它们各自的可变字体交互。有什么想法吗？

  var x = e.pageX - $(this).offset().left;
  var y = e.pageY;
  var $tlSquare = $('.division--top.division--left');
  var $trSquare = $('.division--top.division--right');
  var $blSquare = $('.division--bottom.division--left');
  var $brSquare = $('.division--bottom.division--right');
  var squareWidth = $(this).width(),
    squareHeight = $(this).height();

  $tlSquare.width(x).height(y);
  $trSquare.width(squareWidth - x).height(y);
  $blSquare.width(x).height(squareHeight - y);
  $brSquare.width(squareWidth - x).height(squareHeight - y);

  stretchLetter(false);
});


stretchLetter(false);

$('.square').on('mouseleave', function() {
  $('.division').width('50%').height('50%');
  $('.letter').css('transform', '');
  stretchLetter(false);
});

function stretchLetter(animation) {
  $('.letter').each(function() {
    var parentWidth = $(this).parent().width();
    var parentHeight = $(this).parent().height();
    var thisWidth = $(this).width();
    var thisHeight = $(this).height();
    var widthPercent = parentWidth / thisWidth;
    var heightPercent = parentHeight / thisHeight;
    var timing = animation == true ? .5 : 0;

    TweenMax.to($(this), timing, {
      scaleX: widthPercent,
      scaleY: heightPercent
    })
    //$(this).css('transform', 'scalex('+ widthPercent +') scaley('+ heightPercent +')');
  });
}

body,
html {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-family: helvetica;
}

section {
  height: 200px;
  background: blue;
  color: white;
  font-size: 28px;
}

.wrapper {
  display: flex;
  justify-content: center;
  /*justify-content: flex-end;*/
  width: 100%;
  height: 100vh;
  //background-color: blue;
  overflow: hidden;
}

.square {
  display: flex;
  flex-wrap: wrap;
  width: 100vh;
  height: 100vh;
  background-color: black;
}

.square-2 {
  display: flex;
  flex-wrap: wrap;
  width: 100vh;
  height: 100vh;
  background-color: yellow;
}

.division {
  //display: flex;
  //align-items: center;
  //justify-content: center;
  width: 50%;
  height: 50%;
  //background-color: red;
  //border: 1px solid white;
  box-sizing: border-box;
}

.letter {
  cursor: -webkit-grab;
  cursor: grab;
}

.letter {
  display: inline-block;
  font-size: 50vh;
  margin: 0;
  padding: 0;
  line-height: .8;
  transform-origin: top left;
  color: white;
}


/* .division:nth-child(1){
    background-color: blue;
}
.division:nth-child(2){
    background-color: red;
}
.division:nth-child(3){
    background-color: green;
}
.division:nth-child(4){
    background-color: orange;
} */

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid white;
  background-color: blue;
  box-sizing: border-box;
}

<section>SECTION-01</section>
<main>
  <div class="wrapper">
    <div class="square">
      <div class="division division--top division--left">
        <div class="letter">L</div>
      </div>
      <div class="division division--top division--right">
        <div class="letter">A</div>
      </div>
      <div class="division division--bottom division--left">
        <div class="letter">S</div>
      </div>
      <div class="division division--bottom division--right">
        <div class="letter">T</div>
      </div>
    </div>
</main>
  <section>SECTION-02</section>
  <div class="wrapper">
    <div class="square">
      <div class="division division--top division--left">
        <div class="letter">F</div>
      </div>
      <div class="division division--top division--right">
        <div class="letter">A</div>
      </div>
      <div class="division division--bottom division--left">
        <div class="letter">S</div>
      </div>
      <div class="division division--bottom division--right">
        <div class="letter">T</div>
      </div>
    </div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

https://jsfiddle.net/CAT999/ohaf61qp/5/

javascript

java

html

css

回答 1

Stack Overflow用户

发布于 2020-02-14 20:34:38

更新了代码段以在单个块上工作。我希望这能对你有所帮助

var $ = jQuery
$('.square').on('mousemove', function(e) {
  var x = e.pageX - $(this).offset().left;
  var y = e.pageY;
  var $tlSquare = $(this).find('.division--top.division--left');
  var $trSquare = $(this).find('.division--top.division--right');
  var $blSquare = $(this).find('.division--bottom.division--left');
  var $brSquare = $(this).find('.division--bottom.division--right');

  var squareWidth = $(this).width(),
    squareHeight = $(this).height();

  $tlSquare.width(x).height(y);
  $trSquare.width(squareWidth - x).height(y);
  $blSquare.width(x).height(squareHeight - y);
  $brSquare.width(squareWidth - x).height(squareHeight - y);
  const childrens = $(this).children().children();
  stretchLetter(false, childrens);
});


/* stretchLetter(false); */

$('.square').on('mouseleave', function() {
  const child = $(this).children();
  child.each(function() {
    $(this).width('50%').height('50%');
  })
  child.children().each(function() {

    $(this).css('transform', '');
  })
  const childrens = $(this).children().children();
  stretchLetter(false, childrens);
});

function stretchLetter(animation, el) {
  el.each(function() {
    var parentWidth = $(this).parent().width();
    var parentHeight = $(this).parent().height();
    var thisWidth = $(this).width();
    var thisHeight = $(this).height();

    var widthPercent = parentWidth / thisWidth;
    var heightPercent = parentHeight / thisHeight;

    var timing = animation == true ? .5 : 0;

    TweenMax.to($(this), timing, {
      scaleX: widthPercent,
      scaleY: heightPercent
    })
    //$(this).css('transform', 'scalex('+ widthPercent +') scaley('+ heightPercent +')');
  });
}
$(document).ready(function() {
  const el = $(".square")
    .children()
    .children();
  stretchLetter(false, el);
});

body,
html {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-family: helvetica;
}

section {
  height: 200px;
  background: blue;
  color: white;
  font-size: 28px;
}

.wrapper {
  display: flex;
  justify-content: center;
  /*justify-content: flex-end;*/
  width: 100%;
  height: 100vh;
  //background-color: blue;
  overflow: hidden;
}

.square {
  display: flex;
  flex-wrap: wrap;
  width: 100vh;
  height: 100vh;
  background-color: black;

}

.square-2 {
  display: flex;
  flex-wrap: wrap;
  width: 100vh;
  height: 100vh;
  background-color: yellow;

}

.division {
  //display: flex;
  //align-items: center;
  //justify-content: center;
  width: 50%;
  height: 50%;
  //background-color: red;
  //border: 1px solid white;
  box-sizing: border-box;
}

.letter {
  cursor: -webkit-grab;
  cursor: grab;
}

.letter {
  display: inline-block;
  font-size: 50vh;
  margin: 0;
  padding: 0;
  line-height: .8;
  transform-origin: top left;
  color: white;
}


/* .division:nth-child(1){
	background-color: blue;
}
.division:nth-child(2){
	background-color: red;
}
.division:nth-child(3){
	background-color: green;
}
.division:nth-child(4){
	background-color: orange;
} */

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid white;
  background-color: blue;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>SECTION-01</section>
<main>
  <div class="wrapper">
    <div class="square">
      <div class="division division--top division--left">
        <div class="letter">L</div>
      </div>
      <div class="division division--top division--right">
        <div class="letter">A</div>
      </div>

      <div class="division division--bottom division--left">
        <div class="letter">S</div>
      </div>
      <div class="division division--bottom division--right">
        <div class="letter">T</div>
      </div>
    </div>
</main>
<section>SECTION-02</section>



<!--FOR SINGLE USE THIS ONE <div class="wrapper">
	<div class="square">
		<div class="division division--top division--left">
			<div class="letter">M</div>
		</div>
		<div class="division division--top division--right">
			<div class="letter">A</div>
		</div>
		<div class="division division--bottom division--left">
			<div class="letter">T</div>
		</div>
		<div class="division division--bottom division--right">
			<div class="letter">T</div>
		</div>
	</div>
</div-->




<div class="wrapper">
  <div class="square">
    <div class="division division--top division--left">
      <div class="letter">F</div>
    </div>
    <div class="division division--top division--right">
      <div class="letter">A</div>
    </div>

    <div class="division division--bottom division--left">
      <div class="letter">S</div>
    </div>
    <div class="division division--bottom division--right">
      <div class="letter">T</div>
    </div>
  </div>
  </main>






  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

票数 2

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

原文链接：

https://stackoverflow.com/questions/60225940

复制

相似问题

问如何触发，基于鼠标位置，可变字体？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何触发，基于鼠标位置，可变字体？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何触发，基于鼠标位置，可变字体？
EN