分享滑动效果怎么实现？

2015-08-12 05:38:21 230 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

android 横向滑动分类效果实现对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。下面是部分资料截图，诚意满满：特别适合有开发经验的Android程序员们学习。不论遇到什么困难，都不应该成为我们放弃的理由！如果你看到了这里，觉得文章写得不错就给个赞呗？《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》阅读详情

http://www.1zw.com/
1折网上的分享效果怎么实现的？分析了一下源代码没找到。

...全文

联动滑动效果及不同Item效果的RecyclerView 这几天项目中做了一个页面滑动效果，今天总结了一个小demo来分享一下，支持滑动时联动效果的布局，以及支持不同Item效果的RecyclerView 阅读详情

lovebaby

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

豪情 2015-08-13

打赏
举报

http://www.1zw.com/themes/1zw/assets/js/front/homePage.js?v=HszbCp 28行，技巧就是：在效果的周边元素，肯定有一个ID，这个ID就是js绑定事件的入口元素，找这个，然后chrome,ctrl+shift+f查找，就能找到相关的代码


$("#seckillWrap").find('.shares').one('mouseover',function() {
        $(this).shareSet({
            callback:function(obj){
                var ajaxUrl='/front/share/product.html';
                ajaxUrl += '?goods_id='+obj.attr('id')+'&t='+ Date.parse(new Date());
                $.get(ajaxUrl,function(data) {});
            }
        });
    });

lovebaby 2015-08-13

打赏
举报

刚查了一下，这个transition只对IE10+有效，10以下都没有动画效果。

lovebaby 2015-08-13

打赏
举报

哦，谢啦，很有耐心，赞一个

豪情 2015-08-13

打赏
举报

引用 3 楼 xiaojie_cp 的回复:

[quote=引用 2 楼 jikeytang 的回复:] http://www.1zw.com/themes/1zw/assets/js/front/homePage.js?v=HszbCp 28行，技巧就是：在效果的周边元素，肯定有一个ID，这个ID就是js绑定事件的入口元素，找这个，然后chrome,ctrl+shift+f查找，就能找到相关的代码
$("#seckillWrap").find('.shares').one('mouseover',function() {
        $(this).shareSet({
            callback:function(obj){
                var ajaxUrl='/front/share/product.html';
                ajaxUrl += '?goods_id='+obj.attr('id')+'&t='+ Date.parse(new Date());
                $.get(ajaxUrl,function(data) {});
            }
        });
    });

这个我找到过，但这个是一个ajax的回调，我就是不明白它的隐藏展开的代码在哪里，好象普通的show/hide不能实现横向的滑动隐藏吧。[/quote] 动画是用css3来实现的。


.homepage .seckill>.seckill_con>.seckill_goods .shares:hover {
  width: 170px;
}
.homepage .seckill .shares{
  position: absolute;
  top:6px;
  left: 6px;
  padding-left: 26px;
  line-height: 28px;
  text-align: left;
  font-size: 12px;
  font-family: 'SimSun';
  width: 0;
  overflow: hidden;
  height: 26px;
  cursor: pointer;
  border-radius: 13px;
  -webkit-transition: all .35s ease-in-out;
  -o-transition: all .35s ease-in-out;
  -moz-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
  background-color: #fff;
  background-color: rgba(255,255,255,.8);
  background-repeat: no-repeat;
  background-position: 6px center;
  background-image: url(/themes/1zw/assets/images/base/share_icon.png);
}

百度一下：transition这个玩意。

lovebaby 2015-08-13

打赏
举报

引用 2 楼 jikeytang 的回复:

http://www.1zw.com/themes/1zw/assets/js/front/homePage.js?v=HszbCp 28行，技巧就是：在效果的周边元素，肯定有一个ID，这个ID就是js绑定事件的入口元素，找这个，然后chrome,ctrl+shift+f查找，就能找到相关的代码
$("#seckillWrap").find('.shares').one('mouseover',function() {
        $(this).shareSet({
            callback:function(obj){
                var ajaxUrl='/front/share/product.html';
                ajaxUrl += '?goods_id='+obj.attr('id')+'&t='+ Date.parse(new Date());
                $.get(ajaxUrl,function(data) {});
            }
        });
    });

这个我找到过，但这个是一个ajax的回调，我就是不明白它的隐藏展开的代码在哪里，好象普通的show/hide不能实现横向的滑动隐藏吧。

King钢 2015-08-12

打赏
举报

隐藏，展开的原理

分享滑动效果怎么实现？

相关推荐