你的位置:首页 > 软件开发 > 网页设计 > 鼠标悬浮图片时弹出透明提示图层的jQuery特效

鼠标悬浮图片时弹出透明提示图层的jQuery特效

发布时间:2015-05-22 12:00:05
源码:<!doctype html><html lang="en"><head><meta charset="utf-8"><title>CollagePlus for jQuer ...

鼠标悬浮图片时弹出透明提示图层的jQuery特效

源码:

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>CollagePlus for jQuery Example</title><link rel="stylesheet" type="text/css" href="../support/examples.css" media="all" /><link rel="stylesheet" type="text/css" href="../css/transitions.css" media="all" /><!--[if lt IE 9]>  <script src='/images/loading.gif' data-original="http://www.cnblogs.com///ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <![endif]--><!--[if (gte IE 9) | (!IE)]><!--><script src='/images/loading.gif' data-original="jquery.js"></script><!--<![endif]--><!--[if IE]>  <script src='/images/loading.gif' data-original="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <![endif]--><script src='/images/loading.gif' data-original="../jquery.collagePlus.js"></script><script src='/images/loading.gif' data-original="../jquery.removeWhitespace.js"></script><script src='/images/loading.gif' data-original="../jquery.collageCaption.js"></script><script type="text/javascript">  // All images need to be loaded for this plugin to work so  // we end up waiting for the whole window to load in this example  $(window).load(function () {    $(document).ready(function(){      collage();      $('.Collage').collageCaption();    });  });  // Here we apply the actual CollagePlus plugin  function collage() {    $('.Collage').removeWhitespace().collagePlus(      {        'fadeSpeed'   : 2000,        'targetHeight' : 200      }    );  };  // This is just for the case that the browser window is resized  var resizeTimer = null;  $(window).bind('resize', function() {    // hide all the images until we resize them    $('.Collage .Image_Wrapper').css("opacity", 0);    // set a timer to re-apply the plugin    if (resizeTimer) clearTimeout(resizeTimer);    resizeTimer = setTimeout(collage, 200);  });  </script></head><body><div ><a href="http://www.100sucai.com">100sucai.com</a></div><section > <div data-caption="This is some data <u>with</u>html in it"><a href="http://www.100sucai.com"><img src='/images/loading.gif' data-original="01.gif"></a></div> <div data-caption="This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it"><a href="http://www.100sucai.com"><img src='/images/loading.gif' data-original="02.gif"></a></div> <div data-caption="This is some data <u>with</u>html in it This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it"><a href="http://www.100sucai.com"><img src='/images/loading.gif' data-original="03.gif"></a></div> <div data-caption="This is some data <u>with</u>html in it This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it"><a href="http://www.100sucai.com"><img src='/images/loading.gif' data-original="04.gif"></a></div> <div data-caption="This is some data <u>with</u>html in it"><a href="http://www.100sucai.com"><img src='/images/loading.gif' data-original="05.gif"></a></div> <div data-caption="This is some data <u>with</u>html in it This is some data <u>with</u>html in it. Also a really long sentence with a <a href="http://www.100sucai.com">link</a> in it"><a href="http://www.100sucai.com"><img src='/images/loading.gif' data-original="06.gif"></a></div></section></body></html>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:鼠标悬浮图片时弹出透明提示图层的jQuery特效

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录