通过用户交互来动态展示信息 代替列表

所属分类:媒体-图片展示

 38562  449  查看评论 (4)
分享到微信朋友圈
X
通过用户交互来动态展示信息 代替列表 ie兼容10

这个图很难命名,万剑穿心、排骨图


可以触发点击事件的控件:

1.当事人(中间列)、

2.已被控制财产数、

3.未被控制财产数、

4.上下翻页箭头。


交互操作:

1.点击中间列的当事人,则当事人处于被选中状态,当事人对应的[已被控制财产数]和[未被控制财产数]处于以选中状态,并展示出对应的[财产子项]信息;

2.点击以选中的[已被控制财产数],其对应的[财产子项]会收起,再次点击可展开;当[已被控制财产数]和[未被控制财产数]均被收起,则当事人状态变为未选中状态;

3.点击其他当事人的财产数,则这次被点击的当事人处于被选中状态,之前的展开信息会收起并展开当前当事人的相关信息;

4.翻页再返回来,当事人信息依然可以展示。


刚摸到jquery书写的小demo,效果达到了,但dom结构不好维护,jquery的templ可以尝试一下

相关插件-图片展示

HTML5-CSS3图片过滤归类应用

通过点击不同类型图片按钮,可以选择展示不同类型的图片,共有三种展现方式,可以对不同图片进行归类
  图片展示
 35181  346

360度全景展示效果

按下鼠标左键拖拽360度全景展示效果
  图片展示
 37810  435

javascript动感相册

javascript实现动感相册,放大缩小,不依赖其它库
  图片展示
 48770  393

JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER

fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片,接下来我就为大家讲解以下相关的用法。
  图片展示
 45045  421

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    予我心安° 0
    2018/7/9 9:39:05
    潘帅 0
    2017/9/1 14:51:13

    厉害,很不错

        isl80
        2017/9/1 15:18:01
        你好机器人
        fs_flyer0
        2018/1/26 18:23:39

        确实不错!

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复