分享滑动效果怎么实现?

lovebaby 2015-08-12 05:38:21
http://www.1zw.com/
1折网上的分享效果怎么实现的?分析了一下源代码没找到。
...全文
117 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
豪情 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
  • 打赏
  • 举报
回复
隐藏,展开的原理

87,902

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧