首页 新闻 赞助 找找看

自己写的一个小插件有性能问题

0
[已解决问题] 解决于 2015-03-20 10:23

事情是这样子的:

      由于某些需要以及日后用着方便,我便写了一些小插件,先来说今天这个吧。

主要功能:鼠标滑过指定内容时显示隐藏内容。

实现方法:这里我用了两种方法,一种是直接使用jquery中的 fadeIn 等效果实现;另一种是改变宽高度来显示已隐藏的内容。

还是来看完整源码吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
*{margin:0;padding:0}
ul{list-style:none}
body{background-color:#ccc;}
.box{ position:relative;width:400px; height:400px;float:left;margin:20px;_display:inline;border:1px solid #f00;}
.zxzz_other{position:absolute;top:0;right:0;z-index:9999;width:300px;height:25px;line-height:25px;background:#fff;padding-left:3px; overflow:hidden}
.du-sjydw{position:absolute;right:209px;top:34px;width:180px;height:50px;border:1px solid #f00}
.du-sjyd-hover{}
.du-sjyd-pop{position:absolute;right:0;top:50px;z-index:100;display:none;width:277px;height:200px;border:5px solid #ff9600;background-color:#fff}
p.txt{margin-top:100px; line-height:28px; padding:0 10px;}
</style>
<script type="text/javascript" src="http://bodatrip.com/js/jquery.js"></script>
<script type="text/javascript">
;(function($){
    $.fn.Hovershow=function(options){
        var defaults={
        h_pop:"du-sjyd-pop",                  //要显示的内容class
        active:"du-sjyd-hover",                        //触发时新增class
        effect:"fadeIn",                //显示动画效果
        endeffect:"fadeOut",                //隐藏时动画效果
        showtime:250,                //显示时间
        hidetime:150,                //隐藏时间
        autowidth:300,                //默认宽度
        autoheight:25,                //默认高度
        showwidth:300,                //触发时的高度
        showheight:170                //触发时的宽度
        };
        var options=$.extend(defaults,options);/*传参并覆盖defaults*/          
        var h_pop=options.h_pop;             
        var active=options.active;           
        var effect=options.effect;     
        var endeffect=options.endeffect;               
        var showtime=options.showtime;                
        var hidetime=options.hidetime; 
        var autowidth=options.autowidth; 
        var autoheight=options.autoheight; 
        var showwidth=options.showwidth; 
        var showheight=options.showheight;              
        
        return this.each(function(){
          var $this=$(this);
          var $h_num=$this.attr("data-num");    //0表示宽高不发生变化,其它值表示发生变化;
          if($h_num=="0"){
             $this.mouseover(function(){
             $this.addClass(active);
             $this.children('.'+h_pop)[effect](showtime);
              }).mouseleave(function(){
             $this.removeClass(active);
             $this.children('.'+h_pop).stop().removeAttr('style');
              }); 
              }else{
                 $this.mouseover(function(){
                 $this.addClass(active).stop().animate({"width":+showwidth+"px","height":+showheight+"px"},showtime);
                  }).mouseout(function(){
                 $this.removeClass(active).stop().animate({"width":+autowidth+"px","height":+autoheight+"px"},hidetime);
                  });   
               };
              
        });

    };
})(jQuery);

</script>
<script>
$(function(){
    /*左侧*/
    $('.zxzz_other').Hovershow();
    /*右侧*/
    $('.du-sjydw').Hovershow();
});
</script>
</head>

<body>
<div class="box">
  <div class="zxzz_other " data-num="1" >
  <span class="c900">其它设置</span>→:<br />
  <div class="zxzz_other-main">图片:<select name="sctp" ><option value="0">关闭</option><option value="1">开启</option></select> 图片:<select name="sctp" ><option value="0">关闭</option><option value="1">开启</option></select> 
  </div>
  </div>
 <p class="txt"> 问题描述1.<br />
 鼠标滑过上面白色内容后,每次选择select选项时都会执行 【mouseout】,<br />
 正常情况下应该是: 当鼠标移开这块区域后再执行才对。<br />
 问题描述2.<br />
 总感觉性能上有问题,一打开这个页面电脑就会变得很卡。。。。。。
 </p>
</div>
<div class="box">
  <div class="du-sjydw" data-num="0">
    鼠标滑过试试
  <div class="du-sjyd-pop du-gyw" >
   
  </div>

</div>
</body>
</html>

 

每次打开的时候电脑都会很卡,不知道是不是性能问题,我想应该是的,因为我刚开始试着这样写,还请求路过的大神帮忙看下代码,指点下,谢谢

问题补充:

补充一下:在ie中现象比较明显,下拉菜单被选择时高度会复原

繁华已逝的主页 繁华已逝 | 菜鸟二级 | 园豆:353
提问于:2015-03-19 16:36
< >
分享
最佳答案
0

后在某群内求助时小伙伴发来一条链接解决了问题:

http://stackoverflow.com/questions/6212309/problem-with-jquery-mouseleave-firing-when-container-has-select-box 

繁华已逝 | 菜鸟二级 |园豆:353 | 2015-03-20 10:22
其他回答(1)
0

看看 mouseover / mouseenter 和  mouseout / mouseleave 的区别,

过于执著 | 园豆:339 (菜鸟二级) | 2015-03-20 09:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册