当前位置 CSS模版园 >> 酷炫特效 >> 图片特效-类似词贴的遮罩

图片特效-类似词贴的遮罩

图片特效-类似词贴的遮罩

采用jquery框架,遮蔽层可上下左右滑动

$(function () {
  $(".items .img").hover(function (e) {
    var _this  = $(this), //闭包
        _desc  = _this.find(".desc").stop(true),
        width  = _this.width(), //取得元素宽
        height = _this.height(), //取得元素高
        left   = e.offsetX || e.originalEvent.layerX, //得到左边界
        top    = e.offsetY || e.originalEvent.layerY, //得到上边界
        right  = width - left, //计算出右边界
        bottom = height - top, //计算出下边界
        rect   = {}, //坐标对象,用于执行对应方法。
        _min   = Math.min(left, top, right, bottom), //得到最小值
        _out   = e.type == "mouseleave", //是否是离开事件
        spos   = {}; //起始位置

    rect[left] = function (epos) { //鼠从标左侧进入和离开事件
      spos = {"left": -width, "top": 0};
      if (_out) {
        _desc.animate(spos, "fast"); //从左侧离开
      } else {
        _desc.css(spos).animate(epos, "fast"); //从左侧进入
      }
    };

    rect[top] = function (epos) { //鼠从标上边界进入和离开事件
      spos = {"top": -height, "left": 0};
      if (_out) {
        _desc.animate(spos, "fast"); //从上面离开
      } else {
        _desc.css(spos).animate(epos, "fast"); //从上面进入
      }
    };

    rect[right] = function (epos) { //鼠从标右侧进入和离开事件
      spos = {"left": left,"top": 0};
      if (_out) {
        _desc.animate(spos, "fast"); //从右侧成离开
      } else {
         _desc.css(spos).animate(epos, "fast"); //从右侧进入
      }
    };
    
    rect[bottom] = function (epos) { //鼠从标下边界进入和离开事件
      spos = {"top": height, "left": 0};
      if (_out) {
        _desc.animate(spos, "fast"); //从底部离开
      } else {
        _desc.css(spos).animate(epos, "fast"); //从底部进入
      }
    };

    rect[_min]({"left":0, "top":0}); // 执行对应边界 进入/离开 的方法
  });
});

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-69.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)