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

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

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

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


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

1.当事人(中间列)、

2.已被控制财产数、

3.未被控制财产数、

4.上下翻页箭头。


交互操作:

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

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

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

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


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

相关插件-图片展示

jQuery放大镜插件cloudzoom.js

jQuery放大镜插件cloudzoom.js,可以实现切换图片,支持滚轮控制放大比例
  图片展示
 43681  411

jQuery移动端图片查看插件photoswipe.js

实现了移动端图片查看缩放,左右切换效果
  图片展示
 81874  445

jQuery背景墙聚光灯效果代码

jQuery背景墙聚光灯效果代码
  图片展示
 31675  330

移动端图片缩放插件Pinchzoom.js

此插件功能包括手机轮播,图片点击放大再次点击缩小功能
  图片展示
 101334  398

讨论这个项目(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

        确实不错!

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