js折叠特效 鼠标触碰页面右上角收缩的折页图片，徐徐平滑展开全部折页图片

实现这个效果可以使用 CSS3 的动画和 jQuery 的事件绑定。

首先，需要在页面上添加一个触发折叠效果的按钮或图片。例如：

<div id="fold-btn"><img src="fold.png"></div>

接着，需要使用 CSS3 的 transition 属性来实现平滑的动画效果。例如：

.folded {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease-in-out;
}
.unfolded {
  height: 500px; /* 需要展开的高度 */
  transition: height 0.5s ease-in-out;
}

然后，在 jQuery 中绑定按钮的点击事件，根据当前状态添加或移除 folded 类，触发动画效果。例如：

$('#fold-btn').click(function() {
  if ($(this).hasClass('folded')) {
    $(this).removeClass('folded').addClass('unfolded');
  } else {
    $(this).removeClass('unfolded').addClass('folded');
  }
});

这样，当用户点击折叠按钮时，就会触发展开或收起的动画效果。

相关问题

css3鼠标悬停折叠图片展开

答案：

您可以使用CSS3的:hover伪类选择器来实现鼠标悬停折叠图片展开的效果。您需要设置该元素的初始状态，然后使用:hover选择器来设定鼠标悬停时的样式。以下是一个示例代码：

HTML代码：

<div class="image-container">
    <img src="image.jpg">
    <div class="overlay">
        <p>This is some text that appears over the image on hover</p>
    </div>
</div>

CSS代码：

.image-container {
    position: relative;
    width: 300px;
    height: 200px;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s;
}

.image-container:hover .overlay {
    opacity: 1;
}

.image-container img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

解释：这个示例中，我们使用了一个div元素来包含我们的图像，并添加了一个.overlay元素用于在悬停时显示文字。.overlay元素的初始状态设置为透明度为0，当鼠标悬停在.image-container元素上时，触发:hover选择器，将.overlay元素的透明度设置为1，从而实现文字显示的效果。

JavaScript折页特效

实现 JavaScript 折页特效可以使用 CSS3 动画和 jQuery 的事件绑定，同时需要用到 HTML 的 `<canvas>` 标签。

首先，在 HTML 中创建一个 `<canvas>` 标签并设置宽高：

<canvas id="fold-canvas" width="300" height="200"></canvas>

然后，在 JavaScript 中获取 canvas 对象，并创建一个用于绘制的 2D 上下文：

var canvas = document.getElementById('fold-canvas');
var ctx = canvas.getContext('2d');

接着，创建一个用于绘制折叠效果的函数：

function drawFold() {
  var width = canvas.width;
  var height = canvas.height;
  var halfWidth = width / 2;
  var halfHeight = height / 2;
  var foldWidth = 50; // 折叠宽度
  var foldHeight = 20; // 折叠高度
  var angle = Math.PI / 4; // 折叠角度
  var gradient = ctx.createLinearGradient(0, 0, width, 0); // 创建渐变

  // 设置渐变颜色
  gradient.addColorStop(0, 'rgba(0,0,0,0)');
  gradient.addColorStop(0.45, 'rgba(0,0,0,0)');
  gradient.addColorStop(0.5, 'rgba(0,0,0,0.5)');
  gradient.addColorStop(0.55, 'rgba(0,0,0,0)');
  gradient.addColorStop(1, 'rgba(0,0,0,0)');

  // 绘制左侧区域
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(halfWidth - foldWidth, 0);
  ctx.lineTo(halfWidth, halfHeight - foldHeight);
  ctx.lineTo(halfWidth, halfHeight + foldHeight);
  ctx.lineTo(halfWidth - foldWidth, height);
  ctx.lineTo(0, height);
  ctx.closePath();
  ctx.fillStyle = gradient;
  ctx.fill();

  // 绘制右侧区域
  ctx.beginPath();
  ctx.moveTo(halfWidth + foldWidth, 0);
  ctx.lineTo(width, 0);
  ctx.lineTo(width, height);
  ctx.lineTo(halfWidth + foldWidth, height);
  ctx.lineTo(halfWidth, halfHeight + foldHeight);
  ctx.lineTo(halfWidth, halfHeight - foldHeight);
  ctx.closePath();
  ctx.fillStyle = gradient;
  ctx.fill();
}

最后，在 jQuery 中绑定鼠标移动事件，根据鼠标位置计算折叠角度并重新绘制：

$(canvas).mousemove(function(e) {
  var x = e.pageX - $(this).offset().left;
  var y = e.pageY - $(this).offset().top;
  var width = canvas.width;
  var height = canvas.height;
  var angle = Math.atan2(height - y, x - width / 2);
  ctx.clearRect(0, 0, width, height);
  ctx.save();
  ctx.rotate(angle);
  drawFold();
  ctx.restore();
});

这样，当用户在 canvas 区域内移动鼠标时，就会触发折叠效果的动画。