基于jquery鼠标移入图片展开特效代码

基于jquery鼠标移入图片展开特效代码

适用于鼠标移入产品详情展示,ie可以兼容到8,这个是我在项目中用的效果,给大家拿出来,希望可以帮到大家。

使用方法
在页面引入相关JS代码

1
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

Javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 var imagew = 150, imageh = 170, colc=5, rowc=2, seph=10, spanc=3, sepw=10, animationtime=0.5;
            // imagew  后面可直接写像素值  如:150   也可以写百分比  $("父元素").width()*0.XX 相当于百分之xx
            // colc: 每行5个,rowc: 2行,seph: 上下边距,sepw: 左右边距,spanc: 跨度
            var imageData = [{ path: 'images/huimei.png', name: 'name', title: '优秀设计师', desc: '生命承载设计,设计承载全部,只有这样才能找准一种元素、找对一种符号,组合得出' }
              , { path: 'images/a3.png', name: 'name2', title: '优秀设计师2', desc: 'jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。' }
              , { path: 'images/a2.png', name: 'name3', title: '优秀设计师2', desc: '222张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师' }
              , { path: 'images/a3.png', name: 'name4', title: '优秀设计师2', desc: '222张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师' }
              , { path: 'images/huimei.png', name: 'name5', title: '优秀设计师2', desc: '222张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师' }
              , { path: 'images/a2.png', name: 'name6', title: '优秀设计师2', desc: '222张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师' }
              , { path: 'images/huimei.png', name: 'name7', title: '优秀设计师2', desc: '222张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师' }
              , { path: 'images/a2.png', name: 'name8', title: '优秀设计师2', desc: '222张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师' }
              , { path: 'images/a3.png', name: 'name9', title: '优秀设计师2', desc: '222张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师' }
              , { path: 'images/a2.png', name: 'name10', title: '优秀设计师2', desc: '222张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师张惠妹优秀设计师' }]
     
     
              $(function ()
                {
        var $imagesCr = $("#imagesCr"), $currentImage = $("#currentImage"), $currentImage2 = $("#currentImage2");

        $imagesCr.width((imagew + sepw) * colc + sepw).height((imageh + seph) * rowc + seph);
        $.each(imageData, function (idx, ele)
        {
          var imageText = '<img src="' + ele.path + '"/>';
          var nameText = '<div class="imageName">' + ele.name + '</div>';
          var $imageCr = $('<div class="imageCr" style="width:' + imagew + 'px; height:' + imageh + 'px;margin-top:' + seph + 'px; margin-left:' + sepw + 'px;">' + imageText + nameText + '</div>');
          $imagesCr.append($imageCr); $imageCr.attr("idx", idx.toString());
        });
       
        var images = $imagesCr.find(".imageCr");
       
        $imagesCr.mouseout(function ()
        {
          setTimeout(function ()
          {
            // if (isMouseInsideElement($imagesCr)) { console.log("prevent"); return; }
            if (isMouseInsideElement($imagesCr)) {  return; }
            else { $currentImage.hide(); currentImageIndex = -1; }
          }, 100);
        });


        var currentImageIndex = -1;
        images.each(function (idx, ele)
        {
          var $imageCr = $(ele); $imageCr.mouseover(function (event)
          {
            var dataIndex = parseInt($imageCr.attr("idx"));
            if (currentImageIndex != -1 && dataIndex == currentImageIndex) return; currentImageIndex = dataIndex;
           
            var cindex = dataIndex % colc, data = imageData[dataIndex];

            $currentImage.find(".cimage").attr("src", data.path);
            $currentImage.find(".cname").html(data.name);
            $currentImage.find(".ctitle").html(data.title);
            $currentImage.find(".cdesc").html(data.desc);

            $currentImage.stop();

            var mtop = seph + parseInt(dataIndex / colc) * (imageh + seph);
            var mleft = sepw + cindex * (imagew + sepw);
            var diff = spanc - (colc - cindex), aleft = 0; if (diff > 0)
            {
              aleft = (spanc-1) * (imagew + sepw);
            }
            $currentImage.css("margin-left", mleft).css("margin-top", mtop);
           

            $currentImage.width(imagew); $currentImage.show();

            $currentImage.css("fontSize", 0); $currentImage.animate(
              { fontSize: 100 },
              {
                duration: animationtime *2* 500,/* 鼠标移入 图片变化的时间 */
                step: function (now, fx)
                {
                  var clipw = imagew*0.5 * now / 100, cliph=imageh*0.5*now/100;
                  $currentImage.css('clip', 'rect(' + (imageh * 0.5 - cliph) + 'px, ' + (imagew * 0.5 + clipw) + 'px, ' + (imageh * 0.5 + cliph) + 'px, ' + (imagew * 0.5 - clipw) + 'px)');
                //   console.log(now);
                  if (now >= 100)
                  {
                    $currentImage.stop();
                    setTimeout(function ()
                    {
                    //   $currentImage.css('clip', '').css('fontSize', 16); console.log("start size ani");
                    $currentImage.css('clip', '').css('fontSize', 16);
                      $currentImage.animate(
                        {
                          width: (imagew + sepw) * (spanc) - sepw,
                          marginLeft: "-=" + aleft,
                          specialEasing: { width: "easeOutBounce" }
                        }
                        , animationtime * 1000  /* 内容展开的时间*/
                        , function () { });
                    }, 100);
                  }
                }
              });

          });
        });
        $currentImage.width((imagew + sepw) * spanc - sepw).height(imageh).css("margin-left", sepw).css("margin-top", seph);
        $currentImage2.width($currentImage.width()).height($currentImage.height());
        $currentImage.find("img").width(imagew * 0.8).height(imageh * 0.8).css("margin-left", imagew * 0.1).css("margin-right", imagew * 0.1).css("margin-top", imageh * 0.1).css("margin-bottom", imageh * 0.1);
        $currentImage.find(".cright").width($currentImage.width() - imagew - 2);
       
        $currentImage.mouseout(function ()
        {
          setTimeout(function ()
          {
            // if (isMouseInsideElement($currentImage)) { console.log("prevent"); return; }
            // else { console.log("mouseout"); }
            if (isMouseInsideElement($currentImage)) {  return; }
            else {  }
          }, 100);
        })
       
      });

      var mousePostion = { x: -1, y: -1 };
      function isMouseInsideElement($rightElement)
      {
        var p = $rightElement.offset();
        return mousePostion.x >= p.left && mousePostion.x <= p.left + $rightElement.outerWidth() && mousePostion.y >= p.top && mousePostion.y <= p.top + $rightElement.outerHeight();
      }
      $(function ()
      {
        $(document).mousemove(function (event)
        {
          mousePostion.x = event.pageX;
          mousePostion.y = event.pageY;
        });
      });
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论