将圆形图像划分为4个切片

Question

假设我有这张图片：

现在，我想要实现的是：当鼠标悬停在特定切片上时，该切片会变得更大，而圆圈的其余部分会模糊。

即使使用Javascript，JQuery和CSS，我也无法理解如何做到这一点！也许我可以映射图像，但我仍然怀疑如何实现我所需要的。

我的圆形图像的4种不同颜色将是4种不同的图像，所以我可以将它们合在一起或使用HTML使它们看起来像一个圆圈。我可以使用这两种解决方案。

谢谢你，抱歉我的英文不好＆gt; _＆gt;

Answer 1

这可以仅限CSS：D

你将制作一个包含四个季度的包装器。通过在每个季度的一个角上设置border-radius，您将创建圆。 在transform: scale();上，您可以使用opacity更改尺寸，并在.wrapper:hover .quarter时使用div.wrapper { position: relative; width: 100px; height: 100px; border-radius: 50px; } div.quarter { position: absolute; width: 50px; height: 50px; background-color: #333; transition: transform .5s, opacity .5s; } div.quarter.left-top { left: 0; top: 0; border-top-left-radius: 50px; } div.quarter.right-top { left: 50px; top: 0; border-top-right-radius: 50px; } div.quarter.left-bottom { left: 0; top: 50px; border-bottom-left-radius: 50px; } div.quarter.right-bottom { left: 50px; top: 50px; border-bottom-right-radius: 50px; } div.wrapper:hover div.quarter { opacity: .5; } div.quarter:hover { opacity: 1 !important; transform: scale(1.5) }更改尺寸。

<div class="wrapper">
  <div class="quarter left-top"></div>
  <div class="quarter right-top"></div>
  <div class="quarter left-bottom"></div>
  <div class="quarter right-bottom"></div>
</div>

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <VideoView
        android:id="@+id/videoSurface"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"/>

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/my_spinner"
        android:layout_gravity="center"/>

</FrameLayout>

Answer 2

在这里，你只能用css实现它。

将所有四个div包装在一个.container中，然后将它们分配给height和weigth 即：.scale{height: 150px; weight 150px}并且要制作四分之一圆，您需要添加border-radius属性。之后，您需要通过

处理hover事件

.scale:hover{
  transform: scale(1.1);
  z-index: 100;
    filter: blur(0) !important;
  -webkit-filter: blur(0) !important;
}
.container:hover .scale{
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

<强>演示

.container{
  position: relative;
  height: 300px;
  width: 300px;
}
.scale{
  height: 150px;
  width: 150px;
  background-size: cover;
  position: absolute;
  transition: 0.3s all;
}
div#one {
  background-image: url(http://dummyimage.com/150.png/09f/fff);
  -moz-border-radius: 150px 0 0 0;
  border-radius: 150px 0 0 0;
  left: 0;
  top: 0;
}
div#two{
   background-image: url(http://dummyimage.com/150.png/f00/fff);
  -moz-border-radius: 0 150px 0 0;
  border-radius: 0 150px 0 0;
  right: 0;
}
div#three{
  background-image: url(http://dummyimage.com/150.png/f60/fff);
  -moz-border-radius: 0 0 150px 0;
  border-radius: 0 0 150px 0;
  bottom: 0;
  right: 0;
}
div#four{
  background-image: url(http://dummyimage.com/150.png/000/fff);
  -moz-border-radius: 0 0 0 150px;
  border-radius: 0 0 0 150px;
  bottom: 0;
}
.scale:hover{
  transform: scale(1.1);
  z-index: 100;
    filter: blur(0) !important;
  -webkit-filter: blur(0) !important;
}
.container:hover .scale{
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

<div class="container">
  <div class="scale" id="one"></div>
  <div class="scale" id="two"></div>
  <div class="scale" id="three"></div>
  <div class="scale" id="four"></div>
</div>

Answer 3

您可以使用4张单独的图像来显示使用css定位的图像 然后在每个图像上添加一个onmouseover来改变它的宽度和高度

例如

<img src='grey_quadrant' id='grey' width=100 height=100 style='position: absolute; top: 0px; left:0px' onmousover='this.width=120; this.height=120'>

<img src='red_quadrant' id='red' width=100 height=100 style='position: absolute; top: 0px; left:100px' onmousover='this.width=120; this.height=120'>

<img src='blue_quadrant' id='blue' width=100 height=100 style='position: absolute; top: 100px; left:0px' onmousover='this.width=120; this.height=120'>

<img src='brown_quadrant' id='brown' width=100 height=100 style='position: absolute; top: 100px; left:100px' onmousover='this.width=120; this.height=120'>

或者你可以用svg做类似的事情

模糊其他3个象限的快速简便方法是将其包含在鼠标悬停中，比如说成为红色象限

onmousover='this.width=120; this.height=120; document.getElementById("blue").src="blurred_blue_quadrant.jpg"; document.getElementById("grey").src="blurred_grey_quadrant.jpg";document.getElementById("brown").src="blurred_brown_quadrant.jpg"'

为了恢复原始图像，请为每个img标记使用onmouseout 在红色象限的情况下添加像

这样的onmouseout

onmouseout='this.width=100; this.height=100; document.getElementById("blue").src="blue_quadrant.jpg"; document.getElementById("grey").src="grey_quadrant.jpg";document.getElementById("brown").src="brown_quadrant.jpg"'

要求每个象限都有模糊和不模糊的图像 如果你想做一些更模糊的东西你可以使用SVG或CSS