大家看看这个怎么弄,设计思路是什么呢

webtimes
  • 251

一个上下布局的div,里面有7张图片,这7张图是一个叠着一个的,但当鼠标移到某张图片上时比如这里的第4张照片把周围图片撑开不叠放,js+css该怎么写比较好呢,请大侠指教

图片描述

回复
阅读 1.6k
3 个回答

1.布局绝对定位
2.当点击事件触发时,给需要运动的元素写一个计算高度的函数,比如点击4,用jQuery能够很简单获取到4后面的所有兄弟节点,然后给他们添加高度运动,当然你这图的意思是4也要运动,就重新写一个计算4的高度的方法就行了
计算高度的方法并不难,只要在不同场景下判断仔细一点,就应该没什么问题

直觉告诉我这题用before和after伪元素就能做,不需要js

我头两天刚做了一个类似的效果...


li{
  margin-top: -4px;
}

li:hover{
  margin-top: 5px;
  margin-bottom: 12px;
}

大致就是这样了 只是你要改改具体的值

clipboard.png

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏