Jquery 效果集结号

一、部分效果集结 (此仅个人收集,有待于扩展)

1、导航栏下拉

2、树形菜单的伸展

3、图片横向切换

4、图片纵向切换

5、新闻滚动

6、选项卡切换

7、列表图片块横向滚动

8、插件的使用(放大镜的效果)

二、具体的代码实现(三步骤:第一步搭建HTML结构,第二步添加CSS样式,第三步创建js动态效果)

***********************1>导航栏下拉效果***************************************

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航栏下拉</title>
<style type="text/css">
ul{ list-style:none;}
#navigation {width:784px;padding:8px;margin:8px auto;background:#3B5998;height:18px;}
#navigation ul li {float:left;margin-right:14px;position: relative;z-index:100;}
#navigation ul li a {display:block;padding:0 8px;background:#EEEEEE;font-weight:700;}
#navigation ul li a:hover {background:none;color:#fff;}
#navigation ul li ul{background-color: #88C366;    position: absolute;    width: 80px;
overflow:hidden;display:none;}
#navigation ul li:hover ul{background-color: #88C366;position: absolute;width: 150px;display:block;}
#navigation ul li ul li{border-bottom: 1px solid #BBB;text-align: left;width: 200px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#navigation ul li:has(ul)').hover(function(){
            $(this).children('ul').slideDown('show');
        },function(){
            $(this).children('ul').slideUp('show');
        }).trigger('mouseleave');
    });
</script>
</head>

************************2>树形菜单的伸展*******************************************

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>树形节点的伸展</title>
<style type="text/css">
ul{ list-style:none;}
.global_module {position:relative;background:#EEEEEE;padding-bottom:8px;}
.module_up_down{position:absolute;top:9px;right:10px;cursor:pointer;}
.global_module h3 {height:26px;background:#3B5998;color:#FFF;line-height:26px;text-indent:6px;}
.procatalog ul {padding:5px 0 5px 15px;}
.procatalog .m-treeview{background:#FFFFFF;}
.procatalog .m-treeview li span {cursor: pointer;}
.procatalog .m-treeview li.m-expanded {padding-left:16px;background:url('images/treeview-expanded.gif') no-repeat 0 0;}
.procatalog .m-treeview li.m-expanded ul li {list-style-image: url('images/treeview-item.gif');}
.procatalog .m-treeview li.m-collapsed {padding-left:16px;background:url('images/treeview-collapsed.gif') no-repeat 0 0;}
.procatalog .m-treeview li.m-collapsed ul{display:none;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    /*Method I
    $('.m-expanded span').toggle(function(){
            $(this).next().show();
            $(this).parent().removeClass('m-expanded').addClass('m-collapsed');
        },function(){
            $(this).next().hide();
            $(this).parent().removeClass('m-collapsed').addClass('m-expanded');
        });

        $('.module_up_down img').toggle(function(){
            $(this).parent().prev('ul').slideUp('show');
            $(this).attr('src','images/up.gif');
        },function(){
           $(this).parent().prev('ul').slideDown('show');
           $(this).attr('src','images/down.gif');
        });
        */
        /*
        Method II
        */
        $('.m-treeview > li >span').click(function(){
                var $ul=$(this).siblings('ul');
                if($ul.is(':visible')){
                    $ul.hide();
                    $ul.parent().attr('class','m-collapsed');
                }else{
                    $ul.show();
                    $ul.parent().attr('class','m-expanded');
                }
        });
        $('.module_up_down').toggle(function(){
            var $self=$(this);
            $self.prev().slideToggle('fast',function(){
                //$('img',$self).attr('src','images/up.gif');
                $self.children('img').attr('src','images/up.gif');
            });
        },function(){
        var $self=$(this);
            $self.prev().slideToggle('fast',function(){
                //$('img',$self).attr('src','images/down.gif');
                $self.children('img').attr('src','images/down.gif');
            });
        });
    });
</script>
</head>

<body>
<div class="global_module procatalog">
            <h3>产品分类</h3>
            <ul class="m-treeview">
                <li class="m-expanded">
                    <span>衬衫</span>
                    <ul>
                        <li><span>短袖衬衫</span></li>
                        <li><span>长袖衬衫</span></li>
                    </ul>
                </li>
                <li class="m-expanded">
                    <span>卫衣</span>
                    <ul>
                        <li ><span>开襟卫衣</span></li>
                        <li ><span>套头卫衣</span></li>
                    </ul>
                </li>
                <li class="m-expanded">
                    <span>裤子</span>
                    <ul>
                        <li><span>休闲裤</span></li>
                        <li><span>免烫卡其裤</span></li>
                        <li><span>牛仔裤</span></li>
                        <li><span>短裤</span></li>
                    </ul>
                </li>
           </ul>
            <p class="module_up_down"><img src="data:images/down.gif" alt="" /></p>
        </div>
</body>
</html>

************************3>图片横向切换******************************************

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现图片横向切换</title>
<style type="text/css">
    /* 第二步添加CSS样式*/
    ul{ list-style:none;}
    .tr{text-align:right;}
    .tvShow{ width:600px;position:relative; overflow:hidden;}
           .tvShow_cont{ height:220px; width:6000px;}
           .tvShow_index{ position:absolute; left:450px; bottom:5px; font-weight:bold; line-height:16px; color:#fff;}
                        .tvShow_index li{ float:left; width:21px; height:16px; cursor:pointer; position:relative; text-align:center; background-color:#FF6633; margin-right:1px;}
                       .tvShow_index li.on{ background-color:#66FFCC;}
                       .tvShow_index li.on span{ display:block; width:5px; height:3px;background:url(images/tvshow_arrow.gif); position:absolute; left:8px; top:-8px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    /* 第三步创建js动态效果*/
    $(document).ready(function(){
       //alert('ok');
       var TV_INTTERVEL;
       $('#tvShow_index li').each(function(i){
             var tvShow_cont=$('#tvShow_cont');
             var tvShow_index=$('#tvShow_index li');
           var TV_index=1;
           function tv_srcoll(n){
              if(TV_INTTERVEL){
                   clearTimeout(TV_INTTERVEL);
               }
               tvShow_index.removeClass();
               tvShow_index.eq(n).addClass('on');
               TV_index=n+1>=tvShow_index.length?0:n+1;
               tvShow_cont.animate({marginLeft:-600*n+'px'},300);
               TV_INTTERVEL=setTimeout(function(){tv_srcoll(TV_index)},5000);
           };

           setTimeout(function(){tv_srcoll(TV_index)},5000);
       });
    });
</script>
</head>

************************4>图片纵向切换*****************************************

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现图片纵向切换</title>
<style type="text/css">
    /* 第二步添加CSS样式*/
    ul{ list-style:none;}
    .tr{text-align:right;}
    .tvShow{ width:600px; position:relative;}
           .tvShow_cont{ height:220px; overflow:hidden;}
           .tvShow_index{ position:absolute; right:4px; bottom:5px; font-weight:bold; line-height:16px; color:#fff;}
                        .tvShow_index li{ float:left; width:21px; height:16px; cursor:pointer; position:relative; text-align:center; background-color:#FF6633; margin-right:1px;}
                        .tvShow_index li.on{ background-color:#66FFCC;}
                        .tvShow_index li.on span{ display:block; width:5px; height:3px;background:url(images/tvshow_arrow.gif); position:absolute; left:8px; top:-8px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    /* 第三步创建js动态效果*/
    $(document).ready(function(){
        //alert('ok');
        var TV_INTTERVEL;
        $('#tvShow_index li').each(function(i){
             var tvShow_cont=$('#tvShow_cont');
             var tvShow_index=$('#tvShow_index li');
            var TV_index=1;
            function tv_srcoll(n){
                 if(TV_INTTERVEL){
                    clearTimeout(TV_INTTERVEL);
                }
                tvShow_index.removeClass();
                tvShow_index.eq(n).addClass('on');
                TV_index=n+1>=tvShow_index.length?0:n+1;
                tvShow_cont.animate({scrollTop:220*n+'px'},300);
                TV_INTTERVEL=setTimeout(function(){tv_srcoll(TV_index)},5000);
            };
            $(this).mouseover(function(){
                tvShow_cont.stop();
                tv_srcoll(i);
            })
            setTimeout(function(){tv_srcoll(TV_index)},5000);
        });
    });
</script>
</head>

************************5>新闻滚动********************************************

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻滚动</title>
<style type="text/css">
ul{ list-style:none;}
.global_module {position:relative;background:#EEEEEE;padding-bottom:8px;}
.module_up_down{position:absolute;top:9px;right:10px;cursor:pointer;}
.global_module h3 {height:26px;background:#3B5998;color:#FFF;line-height:26px;text-indent:6px;}
.news ul {padding:5px 0 5px 15px;}
.scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;}
.scrollNews li{height:20px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var $this=$('.scrollNews');
        var scrollTime;
        $this.hover(function(){
            clearInterval(scrollTime);
        },function(){
            scrollTime=setInterval(function(){
                newscroll($this);
            },3000);
        }).trigger('mouseleave');

    });
        function newscroll(obj){

            var $f_ul=obj.find('ul:first');
            var lineheight_li=$f_ul.find('li:first').height();

            $f_ul.animate({"marginTop":-lineheight_li+'px'},600,function(){
                $f_ul.css({marginTop:0}).find('li:first').appendTo($f_ul);
            });
        }
</script>
</head>
<body>
<div class="global_module news">
            <h3>最新动态</h3>
            <div class="scrollNews" >
                <ul>
                    <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
                    <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
                    <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
                    <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
                    <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
                    <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
                    <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
                </ul>
            </div>
            <p class="module_up_down"><img src="data:image/down.gif" alt="" /></p>
        </div>
</body>
</html>

**************************6>选项卡切换******************************************

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡效果</title>
<style type="text/css">
ul{ list-style:none;}
.tab {width:380px;}
.tab_menu {clear:both;}
.tab_menu li {float:left;text-align:center;cursor:pointer;list-style:none;padding:1px 6px;margin-right:4px;
background:#F1F1F1;border:1px solid #898989;border-bottom:none;}
.tab_menu li.hover {background:#DFDFDF;}
.tab_menu li.selected {color:#FFF;background:#6D84B4;}
.tab_box {clear:both;border:1px solid #898989;}
.tab2 {width:380px;}
.tab_menu2{clear:both;}
.tab_menu2 li {float:left;text-align:center;cursor:pointer;list-style:none;    padding:1px 6px;margin-right:4px;
background:#F1F1F1;border:1px solid #898989;border-bottom:none;}
.tab_menu2 li.hover {background:#DFDFDF;}
.tab_menu2 li.selected {color:#FFF;background:#6D84B4;}
.tab_box2 {clear:both;border:1px solid #898989;}
.hide{display:none}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    $(document).ready(function(){

        $('.tab_menu ul li').click(function(){
                $(this).addClass('selected').siblings().removeClass('selected');
                $('.tab_box div').eq($('.tab_menu ul li').index(this)).show().siblings().hide();
        }).hover(function(){
            $(this).addClass('hover');
        },function(){
            $(this).removeClass('hover');
        });


        $('.tab_menu2 ul li').each(function(i){
            $(this).mouseover(function(){
                $(this).addClass('selected').siblings('li').removeClass('selected');
                $('.tab_box2 div').eq(i).show().siblings().hide();
            });
        });
    });
</script>
</head>

<body>
<div class="tab">
                <div class="tab_menu">
                    <ul>
                        <li class="selected">产品属性</li>
                        <li>产品尺码表</li>
                        <li>产品介绍</li>
                    </ul>
                </div>
                <div class="tab_box">
                    <div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。
                    </div>
                    <div class="hide">
                    来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。
                    </div>
                    <div class="hide">
                    世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。
                    </div>
                </div>
            </div>
<div class="tab2">
                <div class="tab_menu2">
                    <ul>
                        <li class="selected">产品属性</li>
                        <li>产品尺码表</li>
                        <li>产品介绍</li>
                    </ul>
                </div>
                <div class="tab_box2">
                    <div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。
                    </div>
                    <div class="hide">
                    来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。
                    </div>
                    <div class="hide">
                    世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。
                    </div>
                </div>
            </div>
</body>
</html>

******************************8>列表图片块横向滚动*******************************************

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向图片列表</title>
<style type="text/css">
ul{ list-style:none;}
.prolist {position:relative;height: 220px;margin-bottom:10px;overflow:hidden;
border: 1px solid #AAAAAA;    background:#FFFFFF;    width:586px;}
.prolist .prolist_content{position:absolute;width:1800px;top:26px;left:0px;padding:20px 0 0 8px;}
.prolist ul{margin-bottom:10px;float:left;height: 220px;}
.prolist ul li {float:left;display:inline;text-align:center;margin-right:22px;}
.prolist ul li span {display:block;overflow:hidden;}
.prolist ul li img {display:block;width:124px;height:124px;background:#EEE; border:0;}
.module_left_right{position:absolute;top:5px;right:10px;cursor:pointer;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var page=1;
        var i=4;
        var len=$('.prolist_content ul li').length;
        var page_count=Math.ceil(len/i);
        var none_unit_width=$('.prolist').width();
        var $parent=$('.prolist_content');

        $('.goRight').click(function(){
            if(!$parent.is(':animated')){
                if(page==page_count){
                    $parent.animate({left:0+'px'},800);
                    page=1;
                }else{
                    $parent.animate({left:'-='+none_unit_width+'px'},800);
                    page++;
                }
            }
        });
        $('.goLeft').click(function(){
            if(!$parent.is(':animated')){
                if(page==1){
                    $parent.animate({left:'-='+none_unit_width*(page_count-1)+'px'},800);
                    page=page_count;
                }else{
                    $parent.animate({left:'+='+none_unit_width+'px'},800);
                    page--;
                }
            }
        });
    });
</script>
</head>

<body>
<div class="global_module prolist">
            <h3>新款上市</h3>
            <div class="prolist_content">
                <ul>
                    <li>
                        <a href="detail.html"><img src="data:image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="data:image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="data:image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="data:image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                    </li>
                        <li>
                        <a href="detail.html"><img src="data:image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="data:image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="data:image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="data:image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                    </li>
                        <li>
                        <a href="detail.html"><img src="data:image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="data:image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="data:image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="data:image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                    </li>
                </ul>
            </div>
            <p class="module_left_right"><img class="goLeft" src="data:image/left.gif" alt="" /><img class="goRight" src="data:image/right.gif" alt="" /></p>
        </div>
</body>
</html>

*******************************8>插件的使用(放大镜的效果)**************************

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向图片列表</title>

$(function(){
    $(".jqzoom").jqueryzoom({
                    xzoom: 300, //放大图的宽度(默认是 200)
                    yzoom: 300, //放大图的高度(默认是 200)
                    offset: 10, //离原图的距离(默认是 10)
                    position: "right", //放大图的定位(默认是 "right")
                    preload:1
    });
});

</script>

</head>

<body>

</body>

</html>

***********************************（

未

完

待

续

）***************************************

Jquery 效果集结号相关推荐

jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果隐藏.显示.切换.滑动.淡入淡出.以及动画1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示toggle()方法:可以使用它来切换hide ...
jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
jQuery 效果 - animate() 方法
实例改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({hei ...
从任意网页上摘取酷炫Jquery效果为自己使用的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 用的chrome 浏览器 2. 随意百度一个漂亮的jquery效果比如我找到一个可以旋转的 ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
jQuery 效果 - 淡入淡出
效果附上: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
jQuery效果（隐藏和显示）
jQuery效果解析隐藏和显示 hide()和show() jQuery toggle() 淡入淡出 jQuery fadeIn() 方法 jQuery fadeOut() 方法 jQuery fa ...
jQuery 效果- 隐藏和显示
jQuery 效果- 隐藏和显示实例 jQuery hide() 简单的jQuery hide()方法演示. <!DOCTYPE html> <html> <head& ...
jQuery效果-隐藏和显示
jQuery效果-隐藏和显示使用jQuery能够轻易地实现各种动画效果,包括隐藏.显示.切换.滑动等 hide()方法和show()方法通过jQuery,可以使用hide()和show()方法来隐 ...

Jquery 效果集结号

Jquery 效果集结号相关推荐

最新文章

热门文章