分享滑动效果怎么实现？

[lovebaby]

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

[King钢]

隐藏，展开的原理

[lovebaby]

引用 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不能实现横向的滑动隐藏吧。

[豪情]

引用 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]

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

[lovebaby]

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

[豪情]

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) {});
            }
        });
    });