jquery – 将切换面板连接到圆形图片右侧的最佳方法是什么？

2023年4月30日 184次阅读

my codepen project from freecodecamp

HTML代码：

<div class="container container-fluid">
            <div class="picture">
              <img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
            </div><!--end of picture-->

          <div id="flip">
            <h3>Click to slide the panel right</h3>
          </div>

            <div class="title">
              <p class="lead">I'm a <a class="link" target='_blank' href='http://www.freecodecamp.com/map'>self taught</a> web designer, developer, co-founder and entrepreneur based in Finland.
                <br> I'm currently part of a small web development
                <br> team in an upcoming start-up, building web and
                <br> mobile applications.
                <br>My passion is to use technology based
                <br> solutions, to help solve real world challenges.
                <br> Competences:
                <br> Languages and Frameworks:
                <br> Javascript, HTML5, CSS3, jQuery, Bootstrap3,
                <br> Angular.js, Meteor.js.
                <br> Tools & expertise:
                <br> Git, Responsive Web Design, Agile
                <br> Methodologies.</p>
            </div>

  </div><!--end of container-->

CSS代码：

#flip>h3{
  border: 2px solid black;
 display:inline;
  
}
#flip{
position:absolute;
  transform:rotate(-90deg);
}

.title>p{
 border:2px solid green;
  background-color:#e5eecc;
}

问题出现在“关于”页面上.我想要做的是使用“单击以向右滑动面板”的切换面板并将其附加到图片的右侧.然而,图片是四舍五入的,所以我不确定这样做的最佳方法是什么.

请记住,我仍然是做这些事情的新手.

同样在那个笔记上,jquery事件是为了保持切换面板的内容隐藏在网页的负载上,这是我做的正确吗？

谢谢

最佳答案 你怎么看待这种技术？
http://codepen.io/wilman/pen/BjgRNo

它基于CSS Shapes,它只需要在h3(shapy)中添加一个新元素

#flip > h3 {
  border: 2px solid black;
  border-left-color: transparent; /* hides the left border */
  height: 270px;
  width: 210px;
  padding-right: 7px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 0 50% 50% 0; /* Apply radius only on top-right and bottom-right corners */
  line-height: 1.4; /* this spaces the words a bit */
  margin-left: 140px;
  background: rgba(128, 128, 128, 0.39);
}

#flip {
  position: absolute;
  margin-top: -290px;
  overflow: hidden;
  z-index: 0;  /* modify this value if you don't want this behind the image */
}

.shapy {
  float: left; /* float is required for shapes to work correctly */
  width: 280px;
  height: 270px;
  margin-left: -140px;
  margin-top: -30px;
  shape-outside: circle(68% at 7px 104px); /* this gives a round shape to the text */
}

/* Also some changes in the .picture element are neccesary */
.picture{        
  padding-top:150px;
  /* Made the picture container more compact to not interfere with the jquery click action */
  width: 270px;
  position: relative;
  z-index: 1;
}
<div id="flip">
  <h3>
    <!-- Apply a shape-outside property to this element -->
    <div class="shapy"></div>
    
    Click to slide the panel right
  </h3>
</div>
点赞