利用jquery css3实现滑动头像



39 152 51



特效描述:利用jquery css3实现 滑动头像,利用jquery css3实现滑动头像

代码结构

1. 引入JS

<script src="js/jquery-latest.js"></script>
<script src="js/jquery.transit.min.js"></script>

2. HTML代码

<ul class="grid">
	<li>
		<a href="http://51qianduan.com">
			<img src="images/1.jpg" alt="" />
			<div class="info">
				<p>1</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/2.jpg" alt="" />
			<div class="info">
				<p>2</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/3.jpg" alt="" />
			<div class="info">
				<p>3</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/4.jpg" alt="" />
			<div class="info">
				<p>4</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/5.jpg" alt="" />
			<div class="info">
				<p>5</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/6.jpg" alt="" />
			<div class="info">
				<p>6</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/7.jpg" alt="" />
			<div class="info">
				<p>7</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/8.jpg" alt="" />
			<div class="info">
				<p>8</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/9.jpg" alt="" />
			<div class="info">
				<p>9</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/10.jpg" alt="" />
			<div class="info">
				<p>10</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/11.jpg" alt="" />
			<div class="info">
				<p>11</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/12.jpg" alt="" />
			<div class="info">
				<p>12</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/13.jpg" alt="" />
			<div class="info">
				<p>13</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/14.jpg" alt="" />
			<div class="info">
				<p>14</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/15.jpg" alt="" />
			<div class="info">
				<p>15</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/16.jpg" alt="" />
			<div class="info">
				<p>16</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/17.jpg" alt="" />
			<div class="info">
				<p>17</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/18.jpg" alt="" />
			<div class="info">
				<p>18</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/19.jpg" alt="" />
			<div class="info">
				<p>19</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/20.jpg" alt="" />
			<div class="info">
				<p>20</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/21.jpg" alt="" />
			<div class="info">
				<p>21</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/22.jpg" alt="" />
			<div class="info">
				<p>22</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/23.jpg" alt="" />
			<div class="info">
				<p>23</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/24.jpg" alt="" />
			<div class="info">
				<p>24</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/25.jpg" alt="" />
			<div class="info">
				<p>25</p>
			</div>
		</a>
	</li>
 <li>
		<a href="http://51qianduan.com">
			<img src="images/1.jpg" alt="" />
			<div class="info">
				<p>26</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/2.jpg" alt="" />
			<div class="info">
				<p>27</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/3.jpg" alt="" />
			<div class="info">
				<p>28</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/4.jpg" alt="" />
			<div class="info">
				<p>29</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/5.jpg" alt="" />
			<div class="info">
				<p>30</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/6.jpg" alt="" />
			<div class="info">
				<p>31</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/7.jpg" alt="" />
			<div class="info">
				<p>32</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/8.jpg" alt="" />
			<div class="info">
				<p>33</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/9.jpg" alt="" />
			<div class="info">
				<p>34</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/10.jpg" alt="" />
			<div class="info">
				<p>35</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/11.jpg" alt="" />
			<div class="info">
				<p>36</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/12.jpg" alt="" />
			<div class="info">
				<p>37</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/13.jpg" alt="" />
			<div class="info">
				<p>38</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/14.jpg" alt="" />
			<div class="info">
				<p>39</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/15.jpg" alt="" />
			<div class="info">
				<p>40</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/16.jpg" alt="" />
			<div class="info">
				<p>41</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/17.jpg" alt="" />
			<div class="info">
				<p>42</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/18.jpg" alt="" />
			<div class="info">
				<p>43</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/19.jpg" alt="" />
			<div class="info">
				<p>44</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/20.jpg" alt="" />
			<div class="info">
				<p>45</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/21.jpg" alt="" />
			<div class="info">
				<p>46</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/22.jpg" alt="" />
			<div class="info">
				<p>47</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/23.jpg" alt="" />
			<div class="info">
				<p>48</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/24.jpg" alt="" />
			<div class="info">
				<p>49</p>
			</div>
		</a>
	</li>
	<li>
		<a href="http://51qianduan.com">
			<img src="images/25.jpg" alt="" />
			<div class="info">
				<p>50</p>
			</div>
		</a>
	</li>
</ul>
<script src="js/jquery-latest.js"></script> 
<script src="js/jquery.transit.min.js"></script> 
<script>
(function() {
  $(function() {
    var columns, current, easing, grid, hideItem, showItem, time,
      _this = this;
    grid = $(".grid");
    current = {
      index: -1,
      column: 0,
      line: 0
    };
    columns = 10;
    easing = "cubic-bezier(0.165, 0.840, 0.440, 1.000)";
    time = 400;
    grid.on("mouseenter", "a", function(e) {
      var column, el, image, index, info, item, line;
      el = $(e.currentTarget);
      info = el.find(".info");
      image = el.find("img");
      index = el.parent().index();
      column = index % columns;
      line = Math.floor(index / columns);
      console.log(index, column, line);
      item = {
        el: el,
        index: index,
        column: column,
        line: line,
        info: info,
        image: image
      };
      if (current.el && current.index === index) return;
      if (line === current.line && column > current.column) {
        showItem(item, "-100%", 0, "25%", 0);
        hideItem(current, "100%", 0, "-25%", 0);
      } else if (line === current.line && column < current.column) {
        showItem(item, "100%", 0, "-25%", 0);
        hideItem(current, "-100%", 0, "25%", 0);
      } else if (line > current.line && column === current.column) {
        showItem(item, 0, "-100%", 0, "25%");
        hideItem(current, 0, "100%", 0, "-25%");
      } else {
        showItem(item, 0, "100%", 0, "-25%");
        hideItem(current, 0, "-100%", 0, "25%");
      }
      return current = item;
    });
    showItem = function(item, infoX, infoY, imageX, imageY) {
      item.info.stop().css({
        x: infoX,
        y: infoY,
        display: "block"
      }).transition({
        x: 0,
        y: 0,
        duration: time,
        easing: easing
      });
      return item.image.stop().transition({
        x: imageX,
        y: imageY,
        opacity: .5,
        duration: time,
        easing: easing
      });
    };
    return hideItem = function(item, infoX, infoY, imageX, imageY) {
      if (!item.el) return;
      item.info.stop().transition({
        x: infoX,
        y: infoY,
        duration: time,
        easing: easing
      });
      return item.image.stop().css({
        x: imageX,
        y: imageY,
        opacity: .5
      }).transition({
        x: 0,
        y: 0,
        opacity: 1,
        duration: time,
        easing: easing
      });
    };
  });
}).call(this);
  </script> 
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 滑动滑过 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 背景切换 手风琴 图表 图片 头像截图 图片滑动 图片墙

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到