Jquery 效果集结号

最新推荐文章于 2019-02-18 22:31:50 发布
最新推荐文章于 2019-02-18 22:31:50 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： Jquery 文章标签： jquery function class menu module div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jayfery/article/details/6331051
版权

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

      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>

<body>
<!--导航开始-->
<div id="navigation">
    <ul>
         <li><a href="#">首 页</a></li>
         <li><a href="#">衬 衫</a>
                <ul>
                     <li><a href="#">短袖衬衫</a></li>
                     <li><a href="#">长袖衬衫</a></li>
                     <li><a href="#">无袖衬衫</a></li>
                </ul>
        </li>
        <li><a href="#">卫 衣</a>
                <ul>
                     <li><a href="#">开襟卫衣</a></li>
                     <li><a href="#">套头卫衣</a></li>
                </ul>
         </li>
        <li><a href="#">裤 子</a>
                <ul>
                     <li><a href="#">休闲裤</a></li>
                     <li><a href="#">卡其裤</a></li>
                     <li><a href="#">牛仔裤</a></li>
                     <li><a href="#">短裤</a></li>
                </ul>
         </li>
         <li><a href="#">联系我们</a></li>
    </ul>
</div>
<!--导航结束-->
</body>
</html>

 

     ************************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="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>

<body>
<!--第一步 搭建HTML结构-->
 <div class="tvShow">
        <div class="tvShow_cont" id="tvShow_cont">
            <a href="#"><img src="images/tvshow/p1.jpg" width="600" height="220" /></a>
            <a href="#"><img src="images/tvshow/p2.jpg" width="600" height="220" /></a>
            <a href="#"><img src="images/tvshow/p3.jpg" width="600" height="220" /></a>
            <a href="#"><img src="images/tvshow/p4.jpg" width="600" height="220" /></a>    
        </div>
      <ul class="tvShow_index tr" id="tvShow_index">
        <li class="on"><span></span>1</li>
        <li><span></span>2</li>
        <li><span></span>3</li>
        <li><span></span>4</li>
       </ul>
</div>
</body>
</html>    

      ************************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>

<body>
<!--第一步 搭建HTML结构-->
 <div class="tvShow">
        <div class="tvShow_cont" id="tvShow_cont">
            <a href="#"><img src="images/tvshow/p1.jpg" width="600" height="220" /></a>
            <a href="#"><img src="images/tvshow/p2.jpg" width="600" height="220" /></a>
            <a href="#"><img src="images/tvshow/p3.jpg" width="600" height="220" /></a>
            <a href="#"><img src="images/tvshow/p4.jpg" width="600" height="220" /></a>
        </div>
      <ul class="tvShow_index tr" id="tvShow_index">
        <li class="on"><span></span>1</li>
        <li><span></span>2</li>
        <li><span></span>3</li>
        <li><span></span>4</li>
       </ul>
</div>
</body>
</html>

 

      ************************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="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="image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                    </li>
                        <li>
                        <a href="detail.html"><img src="image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                    </li>
                        <li>
                        <a href="detail.html"><img src="image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                    </li>
                    <li>
                        <a href="detail.html"><img src="image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                    </li>
                </ul>
            </div>
            <p class="module_left_right"><img class="goLeft" src="image/left.gif" alt="" /><img class="goRight" src="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>

      <script type="text/javascript" src="js/jquery.js"></script>

      <script src="scripts/jquery.jqzoom.js" type="text/javascript"></script>

      <script>

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

      </script>

</head>

<body>

    <div class="jqzoom"><img src="images/pro_img/blue_one_small.jpg" class="fs" alt=""  jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/></div>

</body>

</html>

 

 

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

                                                                        未

                                                                        完

                                                                        待

                                                                        续

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Jeffery-Lee
关注
专栏目录
Jquery 效果综合案例效果
qq_56248592的博客
11-10 1022
我要实现上面的效果思考代码如何编译 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--导入jquery文件--> <script src="jquery-3.6.js"></script> <title&gt...
使用jQuery制作选项卡功能
谷伊阳的编程技术博客
07-03 581
先来图片展示一、二、三，从图片中可以看到，点击上边的产品属性等内容，该选项卡颜色会变深，下面会出现对应内容。点击产品尺码表会隐藏掉产品属性的内容。这是怎么做的呢？下面来看代码&lt;script type =“text / javascript”&gt; //选项卡变换 $（document）.ready（function（）{ var $ D...
juqery 以滑动显示与隐藏
kstg5208197的博客
03-18 337
效果： 点击按钮，如果ul是显示，则把它隐藏 如果ul是隐藏，则把它显示 $("ul").hide(); //以下滑 显示与隐藏 $("#list").click(function(){ //如果Ul处于显示 if($("ul").is(':visible')){ $(this).next("ul").slideUp(); }else{ $(th
easyui相关问题
a7401123的博客
05-11 138
1、解决easyui的输入框有些属性不起效果的问题 $(".easyui-combobox").each(function(i){ var span = $(this).siblings("span")[0]; var targetInput = $(span).find("input:first"); if(targetInput){ $(targetInput).attr("pla...
解决slideDown()和slideUp()反复执行的问题
骆小胖~
09-04 2918
（1）初始代码： jQuery(document).ready(function($) { $(".main&gt;li").hover(function() { $(this).children("ul").slideToggle(400); });
小白读《锋利的jQuery》第8章（打造个性网站）
canxuezhang的博客
02-18 1622
用jQuery打造个性网站 哦耶
实训 jQuery开发交互效果页面--手机号抽奖.pptx
03-10
jQuery开发交互效果页面--手机号抽奖 jQuery是目前最流行的JavaScript库之一，广泛应用于Web前端开发中。通过本次实训，我们将学习如何使用jQuery开发一个交互效果页面--手机号抽奖。 知识点1： jQuery下载和引入...
jQuery空间相册梦幻效果.rar
06-23
jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间...
jquery手风琴效果
01-03
jquery手风琴效果jquery手风琴效果jquery手风琴效果jquery手风琴效果jquery手风琴效果jquery手风琴效果jquery手风琴效果jquery手风琴效果jquery手风琴效果
jquery图片列表按顺序分类排列图片组效果.rar
最新发布
06-23
jquery图片列表按顺序分类排列图片组效果.rar jquery图片列表按顺序分类排列图片组效果.rar jquery图片列表按顺序分类排列图片组效果.rar jquery图片列表按顺序分类排列图片组效果.rar jquery图片列表按顺序分类排列...
【js与jquery】产品详情页面常用的js特效
weixin_34072857的博客
10-28 170
2019独角兽企业重金招聘Python工程师标准>>> ...
显示/隐藏菜单【知识点】if( $('#id').is(':visible') == false){}
Naughty_Fairy的博客
11-01 1380
效果描述：点击隐藏菜单按钮隐藏左侧导航栏同时按钮文字变为显示菜单，再点击显示左侧导航同时文字变为隐藏菜单； 效果图：   //显示隐藏左侧导航栏 $('#link_1').click(function() { if( $('#leftmenu').is(':visible') == false){ $('#leftmenu').css('display','block...
Bootstrap-Tree
热门推荐
陌上花开，可缓缓归矣
02-25 1万+
这里的Tree指的是树形菜单，这篇博客通过一个实例来讲解一下，在Bootstrap框架下怎么去建立一个树形菜单。前提：先添加Bootstrap和JQ的引用<link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css"> <script src="bootstrap-3.3.0
Bootstrap树形菜单，就这么简单
weixin_30500105的博客
06-15 2644
一、CSS部分： .tree { min-height:20px; padding:19px; margin-bottom:20px; background-color:#fbfbfb; border:1px solid #999; -webkit-border-radius:4px; -moz-border-radius:4px; ...
jquery滚动效果-无间隙向上滚动
不吃鱼的猫
05-27 3290
第一：html页面 最新动态 数据向上滚动 第二：css样式 .global_module h3{ background:#3b5998; color:#FFFFFF; paddi
动态增加树形分类
weixin_30794851的博客
06-27 148
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分类列表</title...
锋利的JQuery实例-用JQuery打造个性网站-详细页面
luckyjaky的专栏
03-18 686
&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="details.aspx.cs" Inherits="details" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
jquery的扩展编写
一只小萌兔
03-11 133
jQuery.extend 对jQuery对象的扩展，可以理解为静态方法，不需要实例jQuery就可以使用 ；我们使用的是$.fn.extend，需要实例化jQuery对象才可以使用。 1.下面是单独的js文件，调用页面只需引入，并传入指定的参数，可以实现调用： [code="javascript"] //获取cookie对象 var userInfo = getUserInfo(); ...
jQuery动画效果详解与示例
"这篇文章主要介绍了如何使用jQuery来创建动画效果，包括显示和隐藏元素，以及控制动画速度和回调函数的应用。" 在jQuery中，动画效果是通过一系列的方法来实现的，使得网页元素能够平滑地改变其样式属性，如大小、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值