Html中复制信息会有空格删除,html – 缩放后删除空格[复制]

var scaleTo = 0.5,itemWidth = $('.scaleB').width(),itemHeight = $('.scaleB').height()

;

function scaleThis(meausure) {

var output = meausure * scaleTo;

return output;

}

$('.scaleB').on({

'mouSEOver': function(event) {

$(this).css({

'width' : scaleThis(itemWidth) + 'px','height' : scaleThis(itemHeight) + 'px'

});

},'mouSEOut': function(event) {

$(this).css({

'width' : itemWidth + 'px','height' : itemHeight + 'px'

});

}

});

.wrapper {

background-color: #cccccc;

}

.wrapper:after {

content: "normal";

}

.wrapperScale {

background-color: #dddddd;

}

.wrapperScale:after {

content: "wrapped";

}

.wrapper_jQuery:after {

content: "jQuery";

}

.wrapper div:nth-of-type(even),.wrapperScale div:nth-of-type(even) {

background: blue;

}

.wrapper div:nth-of-type(odd),.wrapperScale div:nth-of-type(odd) {

background: red;

}

.scale,.wrapperScale div,.scaleB {

width: 50px;

height: 50px;

}

.scale:hover,.wrapperScale:hover {

transform: scale(0.5);

transform-origin: top left;

}

这就是CSS转换实际上做的,它不会影响周围的元素,你可以尝试将DIV包装在另一个元素中并将缩放应用于该元素,但它不会影响外部的其他元素,只会影响内容,除此之外,您将不得不通过Java Script或js库(如jQuery)操纵DIV的实际大小.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的Vue组件,可以实现鼠标滚轮缩放元素和空格加鼠标左键长按拖动元素的功能。 ```vue <template> <div ref="container" @wheel="onWheel" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp" @mouseleave="onMouseLeave" style="position: relative; width: 500px; height: 500px; overflow: hidden;"> <div ref="content" :style="{transform: `scale(${scale})`, transformOrigin: 'top left', position: 'absolute', left: offsetX + 'px', top: offsetY + 'px'}"> <slot></slot> </div> </div> </template> <script> export default { data() { return { scale: 1, offsetX: 0, offsetY: 0, isDragging: false, startX: 0, startY: 0, lastX: 0, lastY: 0, }; }, methods: { onWheel(event) { const { deltaX, deltaY } = event; const scaleDelta = 0.05; const newScale = deltaY > 0 ? this.scale - scaleDelta : this.scale + scaleDelta; this.scale = Math.max(newScale, 0.1); // 限制最小缩放比例为0.1 }, onMouseDown(event) { if (event.button === 0 && event.shiftKey) { event.preventDefault(); this.isDragging = true; this.startX = this.lastX = event.pageX; this.startY = this.lastY = event.pageY; } }, onMouseMove(event) { if (this.isDragging) { const deltaX = event.pageX - this.lastX; const deltaY = event.pageY - this.lastY; this.offsetX += deltaX; this.offsetY += deltaY; this.lastX = event.pageX; this.lastY = event.pageY; } }, onMouseUp(event) { if (this.isDragging && event.button === 0) { event.preventDefault(); this.isDragging = false; } }, onMouseLeave() { if (this.isDragging) { this.isDragging = false; } }, }, }; </script> ``` 在该组件,我们使用一个`<div>`元素作为容器,它的`ref`属性为`container`。另外,我们还使用一个`<div>`元素作为内容,它的`ref`属性为`content`,并在其使用了`<slot>`元素,以便使用该组件时可以传入任意内容。 在组件的`data`,我们定义了一些状态变量,包括缩放比例`scale`、水平和垂直偏移量`offsetX`和`offsetY`,以及拖动状态`isDragging`、开始拖动时鼠标的位置`startX`和`startY`,以及上一次鼠标移动时的位置`lastX`和`lastY`。 在组件的`methods`,我们实现了`onWheel`、`onMouseDown`、`onMouseMove`、`onMouseUp`和`onMouseLeave`五个方法,分别对应鼠
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值