2019独角兽企业重金招聘Python工程师标准>>>

终于公司的新闻发布会弄好了,据说反响不错,70多家媒体,排场蛮大的。

现在又得重新回到开发中,新版的商城需要改版,已经实现各大版块的,样式结构,浏览器兼容已经搞定,虽然有纠结的IE6,可是依然拿下,没有办法,你懂的,过程很苦逼。

明天再整个图文结合的javascript效果就可以了,这让jquery博客想到上个版本上用到的类似凡客诚品图文切换效果来着。
$(function(){
    $(".recommend .info #tabnav li").each(function(index){
        $(this).hover(function(){
            $("#tabcon > li:visible").hide();
            $("#tabcon > li:eq(" + index + ")").show();
            $(this).addClass("on").siblings().removeClass("on");
        })
    })
    //goComment
    $("#goComment").click(function(){
        $("html,body").animate({scrollTop: $(".goods-comment").offset().top}, 10);
    })
    $("ul.list-shows em.ico:gt(8)").css({"text-indent":"3px","font-size":"10px","-webkit-text-size-adjust":"none"});
    //list-shows
    $(".list-shows li").hover(function(){
        $(this).addClass("on").siblings().removeClass("on");
    })
    $(".sift-goods-list ul.fix li").click(function(){
        $(this).addClass("on").siblings().removeClass("on");
    });
    var otherGoods = $(".sift-goods-con .other");
    $(".sift-goods-btn a").toggle(function(){
        otherGoods.slideUp(300);
        $(this).removeClass("up").text("更多")
    },function(){
        otherGoods.slideDown(300);
        $(this).addClass("up").text("收起")
    })
    //goods-property
    var m=$('.goods-property p img').is("img");
    if(m==true){
        $(".goods-property img").parent("p").css("padding","0")
    }
    //tag-tynn-con
    $(".tag-tynn-con dt.on").next("dd").find("ol").show();
    $(".tag-tynn-con dl dt").click(function(){
        $(this).toggleClass("on").next().find("ol").slideToggle(300)
    });
    $(".tag-tynn-con dl dt a").click(function(e){
        e.stopPropagation();
    });
    //goods-info
    $(".option-dl dt.option-dt.normal").addClass("on");
    $(".option-dl dt.option-dt:not(.normal)").click(function(){
        $(this).toggleClass("on");
        if( !$(this).next(".option-dd").is(":animated") ){
            $(this).next(".option-dd").slideToggle(300);
        }
    });
    var $cur = 1;
    var $i = 5;
    var $len = $('#img-list-con>ul.fix>li').length;
    var $pages = Math.ceil($len / $i);
    var $w = $('.goods-main #img-list-con').width();//取得展示区外围宽度
    var $showbox = $('#img-list-con>ul.fix');
    var $pre = $('#img-list .go-left');
    var $next = $('#img-list .go-right');
    $pre.click(function(){
        if (!$showbox.is(':animated')) {
            if ($cur == 1) {
            }
            else {
                $showbox.animate({
                    left: '+=' + $w
                }, 500);
                $cur--;
            }
        }
    });
    $next.click(function(){
        if (!$showbox.is(':animated')) { //判断展示区是否动画
            if ($cur == $pages) {
            }
            else {
                $showbox.animate({
                    left: '-=' + $w
                }, 500);//改变left值,切换显示版面
                $cur++; //版面数累加
            }
        }
    });
    //goods-main imgShow end
    $(".no-pinglun").click(function(){
        $("#pinglun").slideUp(300)
    });
    $(".want-ask").click(function(){
        $(".product_zixun").slideDown(300)
    })
    $(".no-zixun").click(function(){
        $(".product_zixun").slideUp(300)
    });
    $(".pay-append dd ").hide();
    $("table.data .a-share").click(function(){
        $(this).parents("tr").find(".bubble").toggle();
        $(this).parents("tr").siblings("tr").find(".bubble").hide();
        $("body").one('click', function() {
            $(".bubble").hide();
        });
        return false;
    });
    $(".bubble").click(function(){
        stopPropagation()
    });
    $(".comment-main .info .product_zonghe a.no-re").click(function(){
        $(this).parents(".product_zonghe").slideUp();
    });
    /* x-15 */
    function SaveClass()
    {
        var temClassArry = new Array()
        $("#UserStart > li").each(function(i){
        temClassArry[i] = $(this).attr("class");
    })
    return temClassArry;
    }
    $(document).ready(function(){
        var temparray = SaveClass();   
        $("#UserStart > li").mousemove(
            function(){
                var currentCount=0;
                currentCount = $("#UserStart > li").index($(this)[0])
            $("#UserStart > li").each(function(i){if(i<=currentCount)
        {
        $(this).removeClass();
        $(this).addClass("lv1");
            }
        else{
            $(this).removeClass();
            $(this).addClass("lv2");
        }})
    })
 
    .click(function(){
        temparray = SaveClass();
    })
 
    .mouseout(function(){
        $("#UserStart > li").each(function(i){
            $(this).removeClass();
            $(this).addClass(temparray[i]);
            })
        })
    });
});
function SelectPay(value)
{
    if(value==4)
    {
        $(".pay-way").slideDown(300);
    }
    else
    {
        $(".pay-way").slideUp(300); 
    }
}
function SelectOpenClosed(obj)
{
    var objName=$("#"+obj);
    if(obj=="one")
    {
        var openclass=objName.attr("class");
        if(openclass.indexOf("on")>-1)
        {
            objName.css("background-position","8px -1122px");
            objName.next("dd").slideUp(300);
            objName.removeClass("on");
        }
        else
        {
            objName.css("background-position","8px -1103px");
            objName.next("dd").slideDown(300);   
            objName.addClass("on");
        }
    }
    if(obj=="two")
    {
        var openclass=objName.attr("class");
        if(openclass.indexOf("on")>-1)
        {
            objName.css("background-position","8px -1122px");
            objName.next("dd").slideUp(300);
            objName.removeClass("on");
        }
        else
        {
            objName.css("background-position","8px -1103px");
            objName.next("dd").slideDown(300);   
            objName.addClass("on");
        }
    }
     if(obj=="three")
    {
        var openclass=objName.attr("class");
        if(openclass.indexOf("on")>-1)
        {
            objName.css("background-position","8px -1122px");
            objName.next("dd").slideUp(300);
            objName.removeClass("on");
        }
        else
        {
            objName.css("background-position","8px -1103px");
            objName.next("dd").slideDown(300);   
            objName.addClass("on");
        }
    }
}

代码有点长 先放点js实现代码,还有的看下面吧。

在线效果DEMO

转自 jquery效果 http://www.jqueryba.com/355.html

转载于:https://my.oschina.net/jqueryba/blog/80985

jquery实现类似以前凡客诚品右侧图文切换结合效果相关推荐

  1. jQuery实现的向下推送图文信息滚动效果

    WEB页面需要展示网站最新信息,如微博动态.余票信息.路况监控等项目中常见的实时数据滚动效果,我们可以用jQuery来实现前端信息滚动效果.本文我们将结合实例为大家讲解如何使用jQuery来实现图文信 ...

  2. jQuery实现类似淘宝轮播图

    jQuery实现类似淘宝轮播图 本周的作业是写一个类似淘宝首页的jQuery轮播图,这里做出记录. 如有错误,欢迎批评指证. html实现静态的布局 静态布局分析 一个轮播图静态的部分分为三个 展示区 ...

  3. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)...

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  4. banner特效php,jQuery自适应通栏宽屏banner幻灯片切换特效

    jQuery自适应通栏宽屏banner幻灯片切换特效 这是一款代码简洁的jQuery自适应通栏宽屏banner幻灯片切换特效,jQuery自适应全屏BANNER焦点图代码. js代码 $(" ...

  5. html5内容切换特效,html5+jQuery图片和文字内容同时左右切换特效

    html5+jQuery图片和文字内容同时左右切换特效,点击图片或者点击左右按钮进行切换,图片转动以及文字内容动画效果切换. 查看演示 下载资源: 22 次 下载资源 下载积分: 20 积分 js代码 ...

  6. html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效

    这是一款效果非常酷的jQuery和CSS3圆形图片切换特效.该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画.可以任意设置多张图片进行来回翻转.旋转切换,效果堪称一流. 使用 ...

  7. html怎么做到滚动鼠标转换,js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)...

    本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: wheel var currentShowPageIndex = 0; v ...

  8. 探探php模板下载,C3+H5+jQuery仿探探APP手机滑动切换特效

    C3+H5+jQuery仿探探APP手机滑动切换特效 这是一款很不错的jQuery仿探探APP手机滑动切换特效,手机端网页滑动翻页上一页下一页切换代码 /*移动动画*/ animateMove:fun ...

  9. jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效

    原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效 源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm

  10. 创新实训-python爬虫多线程|解决中文乱码问题|卡片向上浮动效果|图文切换

    创新实训-python爬虫多线程|乱码问题|前端样式重新修改 考完毛概,把上周的工作总结一下.爬虫在第一周的时候只爬了一个就业指导这一个模块,这一次又加了招聘服务模块,所以就用了两个线程.前端首页一开 ...

最新文章

  1. max_connect_error的说明
  2. 学号20175313 《实现Linux下cp XXX1 XXX2的功能(一)》第九周
  3. Ubuntu安装VLC播放器
  4. 机械加工工艺师手册_机械加工工艺师——机床应用篇
  5. java fileupload 文件_java用Commons fileupload 文件的上传
  6. 如果在iTerm2中复制命令特别卡,就跟慢动作似的,怎么办?
  7. 关于sublime-text-2的Package Control组件安装方法,自动和手动
  8. 关于怎么获取jsp的web站点的目录问题
  9. git cherry-pick 复制其他分支内容到当前分支
  10. MCU_ZigBee协议栈相关函数总结
  11. Win7各正式版下载地址和SHA验证
  12. 手机计算机无法使用,用数据线把手机连接电脑,电脑无法识别,怎么回事?
  13. 微博html5版打不开,电脑新浪微博页面打不开怎么办|电脑微博无法打开的解决方法...
  14. VC中自定义打印调试信息函数,打印调试信息到DebugView上
  15. 虚拟机登录MySQL
  16. 6 怎么选公司?面试3大招,离职都有哪些事宜要注意--绝密,程序员大厂面试求职大揭秘!
  17. 计算机网络——以太网的信道利用率
  18. 正版方舟建服务器,《方块方舟》玩家自建服务器教程
  19. html微信怎么转发,微信朋友圈怎么转发
  20. 软考access机考什么_软考程序员考试是机考还是笔试

热门文章

  1. 发送速率(传输速率)和传播速率
  2. Eclipse创建maven工程后没有build path解决方案
  3. 域名和服务器IP地址有什么关系
  4. 内网端口映射软件之80端口映射全端口映射
  5. Pandas:分组级的运算和转换--transform和apply
  6. 岁月让人从批判走向了建设
  7. 关于不同局域网内经Internet的P2P通信技术
  8. 测试按键延迟软件,怎么测试键盘延迟-灵猫键盘DIY大师测试键盘响应速度的方法 - 河东软件园...
  9. 拳皇97c语言编码,拳皇97金手指代码
  10. 在Ubuntu20.04上安装ros