找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2495|回复: 9

[求助] 大神们过来看看...想增加个左右好难!!求教

[复制链接]
发表于 2015-7-31 13:54:52 | 显示全部楼层 |阅读模式
150体力
本帖最后由 liuyang7758 于 2015-7-31 13:58 编辑


想在这基础上增加左右切换...点右切换一屏...点左的时候同理....代码写的太高深了...不知道怎么下手...求教大神们  有时间的帮忙看看.....代码如下:


 提示:您可以先修改部分代码再运行

最佳答案

查看完整内容

第一次发现回复字数有限制!!! 截图在附件。 关键代码如下: 关键是记录translate3d的位置,然后根据位置确定点击左右切换的时候触发的是哪个导航栏的按钮 。 插入的代码都有注释,我也没有怎么看过源码,就酱~~~
发表于 2015-7-31 13:54:53 | 显示全部楼层
第一次发现回复字数有限制!!!
截图在附件。
关键代码如下:
  1. //left3d保存页面的位置
  2. var left3d = 0;
复制代码
  1. //记录位置
  2.                 if(i.attr('id') == 'parallax'){
  3.                     left3d = -t;
  4.                 }
复制代码
  1. //添加左右切换事件
  2. $('.left').click(function(){
  3.     //获取window宽度
  4.     var winWidth = window.innerWidth;
  5.     //这一步很重要,因为left3d保存的数值并不精准,所以需要做一个加法,确保数值在当前位置之上
  6.     left3d += 50;
  7.     //计算当前显示的窗口
  8.     var eq = Math.ceil(left3d / winWidth);
  9.     //前进一位
  10.         eq ++;
  11.     //触发对应的菜单导航栏点击事件
  12.     $("#d" + eq).click();
  13.     return false;
  14. });
  15. $('.right').click(function(){
  16.     //获取window宽度
  17.     var winWidth = window.innerWidth;
  18.     //这一步很重要,因为left3d保存的数值并不精准,所以需要做一个加法,确保数值在当前位置之上
  19.     left3d += 50;
  20.     //计算当前显示的窗口
  21.     var eq = Math.ceil(left3d / winWidth);
  22.     //前进一位
  23.         eq --;
  24.     //触发对应的菜单导航栏点击事件
  25.     $("#d" + eq).click();
  26.     return false;
  27. });
复制代码



关键是记录translate3d的位置,然后根据位置确定点击左右切换的时候触发的是哪个导航栏的按钮 。
插入的代码都有注释,我也没有怎么看过源码,就酱~~~
QQ截图20150731152128.png
QQ截图20150731152108.png
QQ截图20150731152141.png
回复

使用道具 举报

发表于 2015-7-31 15:32:19 | 显示全部楼层
PS:后来我想了想,有点必须说清楚,
  1. var eq = Math.ceil(left3d / winWidth);
复制代码

为什么使用Math.ceil,因为原文中的导航栏id命名是从1开始的,所以需要向上取整。
回复

使用道具 举报

 楼主| 发表于 2015-7-31 15:35:46 | 显示全部楼层
jianwang19 发表于 2015-7-31 15:23
第一次发现回复字数有限制!!!
截图在附件。
关键代码如下:

太酷了

这就是大神啊....自己还得多加锻炼..什么时候能到这地步..
回复

使用道具 举报

 楼主| 发表于 2015-7-31 15:49:32 | 显示全部楼层
jianwang19 发表于 2015-7-31 15:32
PS:后来我想了想,有点必须说清楚,

为什么使用Math.ceil,因为原文中的导航栏id命名是从1开始的,所以 ...

IE7、8点击左右没效果.. IE9 是好的...其它FF  谷歌也都是好的...唯独IE7、8...调试中...但还没报错 不知道因为什么..
回复

使用道具 举报

发表于 2015-7-31 16:13:32 | 显示全部楼层
因为IE7、8本身就不支持css3的3d转换啊,而且这个东西本身就没怎么搞兼容,也兼容不来,滚轮事件在IE8下面略有效果,但是我插入的功能是监听3d转化的位置,所以在IE8下面还是没有效果。
回复

使用道具 举报

发表于 2015-7-31 16:15:37 | 显示全部楼层
然后我的这个还有一些边界问题没有处理好,你可以自己调整下。
回复

使用道具 举报

 楼主| 发表于 2015-8-3 14:41:26 | 显示全部楼层
jianwang19 发表于 2015-7-31 16:15
然后我的这个还有一些边界问题没有处理好,你可以自己调整下。

难道 没别的办法了 兼容不了IE7 8?  我到时var winWidth = window.innerWidth;修改成 var winWidth = $(window).width(); IE8 下 到时能点击了 就是只能走一步..之后有不能点击了...window.innerWidth IE8直接为空..愁了..
回复

使用道具 举报

发表于 2015-8-3 17:56:03 | 显示全部楼层
应该是没办法的了吧...这种比较炫的页面用户群应该都是比较年轻的人,很少会使用低版本的浏览器,所以才能使用到项目上。
你浏览下苹果店的一些产品页面就知道,如果你使用的是Safari,那么页面比较炫,使用Firefox或者Chrome,有的效果就没有了,使用IE或者更低版本的浏览器就只剩下简单的切换了。
之前我给你的代码略复杂,现在我又仔细看了一下代码,可以这样改的:
  1. //New
  2. var Len = $('.bot_nav li').size();
  3. $('.left').click(function(){
  4.     var eq = $('.bot_nav a.on').parent().index();
  5.     if(eq >= Len){
  6.         return false;
  7.     }else{
  8.         eq ++;
  9.         $('.bot_nav a:eq('+eq+')').click();
  10.     }
  11.     return false;
  12. });

  13. $('.right').click(function(){
  14.     var eq = $('.bot_nav a.on').parent().index();
  15.     if(eq <= 0){
  16.         return false;
  17.     }else{
  18.         eq --;
  19.         $('.bot_nav a:eq('+eq+')').click();
  20.     }
  21.     return false;
  22. });
复制代码

直接放在底部就行,根本不需要监听什么的。

QQ截图20150803175545.png
回复

使用道具 举报

 楼主| 发表于 2015-8-4 10:06:48 | 显示全部楼层
jianwang19 发表于 2015-8-3 17:56
应该是没办法的了吧...这种比较炫的页面用户群应该都是比较年轻的人,很少会使用低版本的浏览器,所以 ...

嗯 咱俩 弄的意思差不多  昨天研究了一天 终于研究出来一种办法 我的是这种

$('.right').click(function(){
    //获取window宽度
    var li = $(".bot_nav ul li a.on").parent().next("li");
        if(li.length > 0)
        {
                li.click();
        }
    return false;
});

$('.left').click(function(){
    //获取window宽度
    var li = $(".bot_nav ul li a.on").parent().prev("li");
        if(li.length > 0)
        {
                li.click();
        }
    return false;
});

这个 也兼容....

非常感谢最后的旅途费心了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-12-6 05:23 , Processed in 0.072415 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表