当前位置:首页 > 网页特效 > jQuery特效 >

jQuery鼠标滑过图片散开显示文字

时间:2014-08-27 10:00 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

jQuery鼠标滑过图片散开显示文字jQuery鼠标滑过图片散开显示文字是一款基于jQuery实现的鼠标图文特效,酷似CSS3特效。jquery鼠标滑过文字特效图文切换

<script>$(document).ready(function() {


  //Custom settings
  var style_in = 'easeOutBounce';
  var style_out = 'jswing';
  var speed_in = 1000;
  var speed_out = 300;  


  //Calculation for corners
  var neg = Math.round($('.qitem').width() / 2) * (-1); 
  var pos = neg * (-1); 
  var out = pos * 2;
  
  $('.qitem').each(function () {
  
    url = $(this).find('a').attr('href');
    img = $(this).find('img').attr('src');
    alt = $(this).find('img').attr('img');
    
    $('img', this).remove();
    $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
    $(this).children('div').css('background-image','url('+ img + ')');


    $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos}); 
    $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});  
    $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos}); 
    $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});  


  }).hover(function () {
  
    $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out}); 
    $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});  
    $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out}); 
    $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});  
  },
  function () {


    $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in}); 
    $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});  
    $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in}); 
    $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});  
  
  }).click (function () {
window.open($(this).find('a').attr('href'));
    //window.location = $(this).find('a').attr('href'); 
  });
});
</script> 

本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

jQuery特效下载排行

最新文章