码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标悬浮标题切换显示出标题的文字和图片效果

时间:2014-11-19 20:05:25      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   sp   java   for   

第一种效果:

bubuko.com,布布扣

HTML结构:

<div class="vewinfor">
        <div class="leftin_hd">
            <h3>作者热文</h3>
         <a href="" target="_blank" class="in_more">...</a>
     </div>
     <div class="leftin_bd">
            <ul class="auth_infor clearfix" data-mouseevent="1">
              <li>
                  <em class="auth_num auth_red">1</em>
                  <div class="auth_txt" style="display:none;" data-mousehide="1"><a href="" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇</a></div>
                  <div class="auth_show" style="display:block;" data-mouseshow="1">
                       <a href="" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇 </a>
                       <span>镑进行引援,但是目前范加尔的球队仍然显得非得非得非常</span>
                  </div>
              </li>
              <li>
                  <em class="auth_num">2</em>
                  <div class="auth_txt" data-mousehide="1"><a href="" target="_blank">中国女排时隔16年进决赛夺银 后勤神医居功至伟</a></div>
                  <div class="auth_show" data-mouseshow="1">
                       <a href="" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇 </a>
                       <span>镑进行引援,但是目前范加尔的球队仍然显得非得非得非常</span>
                  </div>
              </li>
              <li>
                  <em class="auth_num">3</em>
                  <div class="auth_txt" data-mousehide="1"><a href="" target="_blank">美女为赢iPhone6深夜裸奔 三点全露被调侃女雷锋</a></div>
                  <div class="auth_show" data-mouseshow="1">
                       <a href="" target="_blank">张呈栋造乌龙 友谊赛中国3-0成功复仇 </a>
                       <span>镑进行引援,但是目前范加尔的球队仍然显得非得非得非常</span>
                  </div>
              </li>
          </ul>
     </div>
</div>

JS代码:

$(function(){
  $([data-mousehide]).on(mouseover,function(){
      $([data-mouseshow]).hide().siblings([data-mousehide]).show();
      $(this).siblings([data-mouseshow]).show().siblings([data-mousehide]).hide();
      return false;
    });
});

文件分享下载如下:baiduyunguanjia-javascript实例-20141119-鼠标悬浮标题切换显示出标题的文字和图片效果

 

第二种效果:

 用了动画setTimeout来控制来显示,还有slideUp(),fadeIn(),增加一些动画的效果,鼠标悬浮在上面的时候停顿一段时间再显示,不过功能也是一样的;

bubuko.com,布布扣

HTML结构与上面第一种效果的HTML结构一样,只是JS不一样:

JS代码:

$(function(){
  if ($([data-mouseevent]).length && $([data-mousehide]).length && $([data-mouseshow]).length) {
            var dataMouseTimeid = ‘‘; 
            $([data-mousehide]).on(mouseover, function(e) {
                if ($(this).siblings([data-mouseshow]).length) {
                    var $selft = $(this);
                    dataMouseTimeid = window.setTimeout(function(){
                        $selft.parents([data-mouseevent])
                            .find([data-mouseshow]).slideUp()
                            .siblings([data-mousehide]).show(fast, function() {
                                $selft.hide().siblings([data-mouseshow]).fadeIn();
                            });
                    },500);
                }
            }).on(mouseout, function(){
                if (dataMouseTimeid) clearTimeout(dataMouseTimeid);
            });
        }
});

文件分享下载:baiduyunguanjia-javascript实例-20141120-鼠标悬浮标题切换显示出标题的文字和图片效果

鼠标悬浮标题切换显示出标题的文字和图片效果

标签:style   blog   http   io   ar   color   sp   java   for   

原文地址:http://www.cnblogs.com/chenguiya/p/4108832.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!