使用jquery缩放一些文本mousemove但不知道如何使右侧的单词（h2）从固定的右侧位置向左侧扩展。相反，它总是从单词的左边缘开始缩放。
我希望这两个单词组合起来始终填充窗口的宽度，当光标向左移动时，左侧单词（h1）缩小，右侧单词（h2）增大，反之亦然。
还有一个问题是，我使用一些脚本将每个单词缩放到 document.ready 上窗口宽度的 50%，但正确的单词 (h2) 又根据 css 字体大小从其原始位置缩放，因此缩小了这一页。
Using text-align: right没有影响。如何将正确的单词保留在窗口中并向左扩展？jsFiddle https://jsfiddle.net/MilkyTech/6195vcaw/4/
var originwidth = $('h1').width()
var originheight = $('h1').height()
var origh1scalex = $(window).width()/2 / $('h1').width()
var origh2scalex = $(window).width()/2 / $('h2').width()
$(function() {
$('h1').css('transform', 'scaleX(' + origh1scalex + ')');
$('h2').css('transform', 'scaleX(' + origh1scalex + ')');
});
$(document).on('mousemove', function(event) {
var scaleX = event.pageX / originwidth
var scaleY = event.pageY / originheight
$('h1').css('transform', 'scale(' + scaleX + ',' + scaleY + ')')
})
var originwidth = $('h2').width()
var originheight = $('h2').height()
$(document).on('mousemove', function(event) {
var scaleX = ($(window).width() - event.pageX) / originwidth
var scaleY = event.pageY / originheight
$('h2').css('transform', 'scale(' + scaleX + ',' + scaleY + ')')
})
h1,
h2 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
hgroup {
display: block;
}
body {
line-height: 1;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: Arial;
font-size: 32px;
line-height: 1.5;
background-color: #ffdc00;
color: #333333;
}
h1 {
font-size: 5vw;
font-weight: 700;
position: fixed;
top: 0;
left: 0;
transform-origin: 0 0;
}
h2 {
font-size: 5vw;
font-weight: 700;
position: fixed;
top: 0;
right: 0;
transform-origin: 0 0;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>LSNR.B</h1>
<h2>DESIGN</h2>
我做了一些改进，结果如下：https://codepen.io/adelriosantiago/pen/RwryoLj?editors=1010 https://codepen.io/adelriosantiago/pen/RwryoLj?editors=1010
问题是缺失的transform-origin: top right;关于H2的CSS。这将设置进行所有平移、缩放和旋转的原点。
Also originwidth需要在里面计算mousemove事件，因为每次计算变换时它都会发生变化。
其他一些改进包括：
- 只有一个
mousemove现在使用事件。
-
字符串模板文字 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals like
scale(${ scaleX }, ${ scaleY })使用它们是为了更容易辨别字符串是如何构建的。
这个进一步的版本允许在第一次加载页面时设置尺寸，并且不需要mousemove事件已经发生：https://codepen.io/adelriosantiago/pen/vYLjybR?editors=0111 https://codepen.io/adelriosantiago/pen/vYLjybR?editors=0111
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
