小提示
  • Ctrl+/代码提示(需IE11)
  • F11键放大 ESC键缩小
  • PgUp上页 PgDn下页
推荐代码
运行代码 缩小
    • 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
    • 1.7.3 1.7.2 1.7.1.0 1.7.0.0
    • 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
    • 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
    • 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
    • core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
    • 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
    • 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6
    • 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
    • 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
    • 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2
十度
HTML代码
复制 格式化 注释 注释 清空
放大
​x
 
1
<!DOCTYPE HTML>
2
<html lang="en-US">
3
    <head>
4
        <meta charset="gb2312">
5
        <title>jQuery鼠标悬浮遮罩显示分享按钮
6
        </title>
7
        <script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.11.3.min.js">
8
        </script>
9
    </head>
10
    <body>
11
        <div class="container" style="text-align:center; font-family:arial">
12
            <h2>jQuery鼠标悬浮遮罩显示分享按钮
13
            </h2>
14
            <img src="//ku.shouce.ren/files/images/201601/569de71399d3d.jpg" alt="Steak" width="300"/>
15
            <img src="//ku.shouce.ren/files/images/201601/569de738241f4.jpg" alt="Fruit Cake" width="300" />
16
            <br/>
17
            <img src="//ku.shouce.ren/files/images/201601/569de749d58f1.jpg" alt="Hambuger" width="300" />
18
            <img src="//ku.shouce.ren/files/images/201601/569de75764a4f.jpg" alt="Drink" width="300" />
19
        </div>
20
        <div style="text-align:center;clear:both">
21
        </div>
22
    </body>
23
</html>
24
​
CSS代码
复制 格式化 注释 注释 颜色 清空
放大 
xxxxxxxxxx
33
 
1
.pinit {
2
  position:relative;
3
  display:inline-block;
4
}
5
.pinit .pinit-overlay {
6
  position:absolute;
7
  top:0;
8
  left:0;
9
  width:100%;
10
  height:100%;
11
  z-index:200;
12
  display:none;
13
  background:transparent url('//ku.shouce.ren/files/images/201601/569de64bda7e1.png') repeat 0 0;
14
  text-align:center;
15
}
16
.pinit .pinit-overlay a {
17
  position:relative;
18
  top:50%;
19
  left:50%;
20
  margin:-10px 0 0 -21px;
21
  display:block;
22
  width:43px;
23
  height:20px;
24
  background:transparent url('//ku.shouce.ren/files/images/201601/569de6a3c2072.png') no-repeat 0 0;
25
  text-indent:-9999em;
26
}
27
.pinit .pinit-overlay a:hover {
28
  background-positon: 0 -21px;
29
}
30
.pinit .pinit-overlay a:active {
31
  background-position: 0 -42px;
32
}
33
​
JS代码
复制 格式化 注释 注释 清空
放大 
xxxxxxxxxx
45
 
1
/*js插件*/
2
(function($){
3
  $.fn.extend({
4
    pinit: function(options) {
5
      var defaults = {
6
        wrap: '<span class="pinit"/>',
7
        pageURL: document.URL
8
      }
9
      var options = $.extend(defaults, options);
10
      var o = options;
11
      return this.each(function() {
12
        var e = $(this),
13
            pi_media = e.data('media') ? e.data('media') : e[0].src,
14
            pi_url = o.pageURL,
15
            pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
运行代码

简介

名称
jQuery鼠标悬浮遮罩显示分享按钮
分类
HTML5代码
描述
jQuery鼠标悬浮遮罩显示分享按钮，jquery类似Pinterest的鼠标悬停遮罩显示分享按钮，请注意，jquery的版本要在1.9以上，低版本可以导致效果无效。本悬浮遮罩效果在鼠标放在图片时可看到图片透明度有变化。
收藏