jQurey的一点自己代码

最新推荐文章于 2019-07-18 01:02:26 发布

hubu2006

最新推荐文章于 2019-07-18 01:02:26 发布

阅读量601

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hubu2006/article/details/12646883

本文介绍了一个综合运用jQuery实现的前端交互案例，包括children方法获取子元素、背景焦点图切换、FLV视频播放控制及自定义弹窗等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、关于children

$(function(){
    varconbg=["images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg","images/about/IMG_03.jpg"];
    var tabl=jQuery(".content_r_yuan dl").children().length;
    var showtab=function(tab){
        for(i=0;i<tab1;i++){
            jQuery(".content_r_yuan dl").eq(i).hide();
            jQuery(".content_r_bj ul").eq(i).hide();
            jQuery(".p_desc").eq(i).hide();
        }
        jQuery(".content_r_yuan dl").eq(tab).show();
        jQuery(".content_r_bj ul").eq(tab).show();
        jQuery(".p_desc").eq(tab).show();
    }
    jQuery("#tabstabs dd").click(function(){
        varindex=$(this).index();showtab(index);
    })
    $(".content_r_yuan dl").eq(0).children().mouseover(
        function(){
            var index=$(this).index();
            $(this).children("a").addClass("hover1");
            $(this).siblings().children("a").removeClass("hover1");
            $(".p_desc").eq(0).children("p").eq(index).show().siblings().hide();
            $(".content_r_banner").css({"background":"url("+conbg[index]+")"});
        }
    );
    $(".content_r_bjul").eq(0).children("li").mouseover(
        function(){
            var index=$(this).index();
            $(".p_desc").eq(0).children("p").eq(index).show().siblings().hide();
            $(".content_r_banner").css({"background":"url("+conbg[index]+")"});
        }
    );
    $(".content_r_yuan dl").eq(1).children().mouseover(
        function(){
            var index=$(this).index();
            $(this).children("a").addClass("hover1");
            $(this).siblings().children("a").removeClass("hover1");
            $(".p_desc").eq(1).children("p").eq(index).show().siblings().hide();
            $(".content_r_banner").css({"background":"url("+conbg[index]+")"});
        }
    );
    $(".content_r_bjul").eq(1).children("li").mouseover(
        function(){
            var index=$(this).index();
            $(".p_desc").eq(1).children("p").eq(index).show().siblings().hide();
            $(".content_r_banner").css({"background":"url("+conbg[index]+")"});
        }
    );
    $(".content_r_yuan dl").eq(2).children().mouseover(
        function(){
            var index=$(this).index();
            $(this).children("a").addClass("hover1");
            $(this).siblings().children("a").removeClass("hover1");
            $(".p_desc").eq(2).children("p").eq(index).show().siblings().hide();
            $(".content_r_banner").css({"background":"url("+conbg[index]+")"});
        }
    );
    $(".content_r_bjul").eq(2).children("li").mouseover(
        function(){
            var index=$(this).index();
            $(".p_desc").eq(2).children("p").eq(index).show().siblings().hide();
            $(".content_r_banner").css({"background":"url("+conbg[index]+")"});
        });
});

2、关于背景焦点图，一个老外需要兼容所有浏览器宽度，因此只能使用背景焦点图，其实背景焦点图也是可以向左移动切换的。带会儿再发

3、FLV视频播放，我用的笑傲江湖的FLV播放器

$(function(){
      
      ajax("{'act':'is_rensheng'}");
      
      if (amsg != ''){
          $('#exam_video_r').html(amsg);
      }
      var fvideo = $("#fvideo").attr("value");
    addVideoPlayer('video-area', 480, 360, { playlist: fvideo, autoPlay: 'true', repeatMode: 0 });
      $(".exam_video_r_v li").click(function(){
              var videolink=$(this).children("img").attr("rel");
              var index=$(this).index();
              $(".exam_video_r_t").html($(this).children("p").html());
              $(".exam_video_r_n dl").eq(index).show().siblings().hide();
              addVideoPlayer('video-area', 480, 360, { playlist: videolink, autoPlay: 'true', repeatMode: 0 });
      })
});

4、腾讯弹窗，将腾讯弹窗改成了Jquery版本，简单，很简单的自定义样式，不用再用复杂的什么artdialog等等。

CSS样式

.layoutBg{width:100%;height:4250px;position:absolute;top:0;left:0;z-index:8888;display:none;background:url(http://mat1.gtimg.com/www/images/qq2012/alphabg.png);}

<script type="text/javascript">$(function(){
       $(".pro_text li").click(function(){
              var src=$(this).children("img").attr("rel");
              $("#layoutBg").show();
              $("#layoutBg").height(document.body.clientHeight);
              $("#login_frame").attr("src",src);
              $("#login_div").css({"left":"50%"});
              $("#login_div").show();
       });
});</script>

<div id="layoutBg" class="layoutBg"></div>
<div id="login_div" style="position:fixed;_position:absolute;width:865px;height:555px;padding:0;margin:0;top:50%;left:-9999px;margin:-268px 0 0 -420px;z-index:9999;">
      <iframe id="login_frame" height="100%" scrolling="auto" width="100%" frameborder="0" src=""></iframe>
</div>

子页面应该有个关闭按钮，如何访问父窗体元素呢？，下面是核心代码，兼容所有浏览器咯

$("#diaclose").click(function(){

$("#login_div",window.parent.document).css({"left":"-9999px"});

$("#layoutBg",window.parent.document).hide();

});

太囧笑话网