利用jQuery實現鼠標滑過圖片散開顯示文字代碼



34 133 45



特效描述:利用jQuery實現 鼠標滑過 圖片散開顯示文字,利用jQuery實現鼠標滑過圖片散開顯示文字代碼

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">

2. 引入JS

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

3. HTML代碼

?<!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>
</head>
<div class="infoCon">
  <div class="qitem"><a href="http://51qianduan.com/"><img width="233" height="211" title="" alt="1.5至3歲課程英語啟蒙早教課程" src="images/listpic01.jpg"></a> <span class="caption" id="teshu2">
    <p>雙語環境<br>
      多元社交互動<br>
      全方位啟蒙<br>
      非親子課程<br>
      緩釋分離焦慮<br>
      玩具與教具的世界</p>
    </span></div>
  <div class="qitem"><a href="http://51qianduan.com/"><img width="233" height="211" title="" alt="3至6歲勵步雙語啟蒙班" src="images/listpic02.jpg"></a> <span class="caption">
    <p> 國際獲獎教材,十門精彩學科<br>
      提前適應課堂,順利幼小銜接<br>
      關注每個孩子,寓教于樂<br>
      激發英語學習興趣,培養母語思維<br>
      CLIL融入式教學方法<br>
      全英文環境,多元智能培 </p>
    </span></div>
  <div class="qitem"><a href="http://51qianduan.com/"><img width="233" height="211" title="" alt="6-12歲勵步英文飛躍班" src="images/listpic03.jpg"></a> <span class="caption">
    <p> 自主探索,提高學習效率<br>
      科學領先的教案,公立小學成績領先<br>
      海量學科知識,擴展國際視野<br>
      培養地道語感,輕松掌握學科知識<br>
      加強合作分享、自信創造培養<br>
      國際認證、全美頂尖學習平臺<br>
    </p>
    </span></div>
  <div class="qitem"><a href="http://51qianduan.com/"><img width="233" height="211" title="" alt="寒/暑期奇趣自然拼讀營" src="images/listpic04.jpg"></a> <span class="caption" id="teshu">
    <p>1. 全英文母語式教學,高科技互動平臺,針對不同年齡段兒童設計,系統學習音位、音素、語音系統和自然拼讀;<br>
      2. 
      快樂趣味的課程設置,豐富多彩的活動環節,趣味科學及豐富的文娛活動<br>
      3. 
      全明星教師團隊,自然拼讀強化,科學練習及悉心專業輔導,促進孩子聽說讀寫全面提高,英文能力快速飛躍。</p>
    </span></div>
  <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> 
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 圖片疊加 圖片層疊 圖片淡出淡進 圖片淡出 圖片淡進 圖片延遲加載 圖片延遲 圖片加載 圖片翻轉 圖片旋轉 圖片放大鏡 頭像上傳 圖片上傳 圖片全屏 圖片拖動 圖片拖拽 二維碼 滾動切換 滾動條切換 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 滑動選項卡 滑動切換 圖片廣告 加載動畫 地圖 中國地圖 世界地圖 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片切換 圖片選項卡 圖標選項卡 圖片收縮展開 圖片收縮 圖片展開 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 純圖片輪播 圖片輪播 圖標導航 圖標菜單 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 背景切換 大圖切換 滑動手風琴 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 滑動星星打分 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 圖表 圖片 圖片插件 頭像截圖 其他 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 圖片切換 圖片選項卡 圖標選項卡 圖片切換 切換圖片 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子