学习啦>学习电脑>电脑硬件知识>键盘鼠标>

jq实现酷炫的鼠标经过图片翻滚

时间: 沈迪豪908 分享

学习啦在线学习网   学习前端的同学你们知道j怎么通过jq实现酷炫的鼠标经过图片翻滚效果吗?不知道的话跟着学习啦小编一起来学习jq实现酷炫的鼠标经过图片翻滚效果。

  jq实现酷炫的鼠标经过图片翻滚效果的方法

  代码如下:

  <ul class="list">

学习啦在线学习网   <li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li>

学习啦在线学习网   <li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li>

  <li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li>

  <li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li>

学习啦在线学习网   <li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li>

学习啦在线学习网   <li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li>

  <li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li>

学习啦在线学习网   <li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li>

  </ul>

  css代码:

  代码如下:

  *{ margin:0; padding:0;}

  .list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}

学习啦在线学习网   .list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;}

学习啦在线学习网   .list li img{ float:left; width:150px; height:80px; border:none;}

学习啦在线学习网   .list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}

学习啦在线学习网   jq代码(注意要引入jq库):

  代码如下:

学习啦在线学习网   $(function () {

  $('.list li').hover(function () {

学习啦在线学习网   $(this).children('a,img').stop();

学习啦在线学习网   $(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {

  $(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);

  });

  }, function () {

学习啦在线学习网   $(this).children('a,img').stop();

  $(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {

  $(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);

  });

  });

  });

  是不是很简单的几句jq代码?亲,不妨copy下来看下效果呗!

猜你喜欢:

1.jquery设置鼠标右键方法

2.如何用jquery实现右键菜单

3.请求ajax失败或者不执行怎么办开发中会经常用到jquery中的ajax...

4.id调用js方法

5.鼠标事件属性详解

6.基于WebRTC的浏览器端Web服务器的研究论文

jq实现酷炫的鼠标经过图片翻滚

学习前端的同学你们知道j怎么通过jq实现酷炫的鼠标经过图片翻滚效果吗?不知道的话跟着学习啦小编一起来学习jq实现酷炫的鼠标经过图片翻滚效果。 jq实现酷炫的鼠标经过图片翻滚效果的方法 代码如下: ul class=list liimg src=images/10.j
推荐度:
点击下载文档文档为doc格式

精选文章

  • jQuery实现的鼠标经过图片变亮
    jQuery实现的鼠标经过图片变亮

    学习啦在线学习网学习前端的同学你们直达道怎么用jQuery实现鼠标经过图片变亮其他变暗效果吗?不知道的话跟着学习啦小编一起来学习用jQuery实现鼠标经过图片变亮其他变暗

  • 鼠标滚动太慢的设置方法
    鼠标滚动太慢的设置方法

    学习啦在线学习网你们都有电脑不知道你们有没有觉得鼠标滚动太慢了,那么我们该怎么设置呢?下面是学习啦小编收集整理关于鼠标滚动太慢设置方法的资料以供大家参考学

  • win7系统鼠标点击桌面图标没反应怎么解决
    win7系统鼠标点击桌面图标没反应怎么解决

    学习啦在线学习网不知道你们有没有遇到过win7系统电脑鼠标点击桌面图标没反应的情况,下面由学习啦小编教大家怎么解决win7系统电脑鼠标点击桌面图标没反应的问题吧。

  • winxp系统鼠标单击变双击怎么修复
    winxp系统鼠标单击变双击怎么修复

    WinXP系统相信还有人在用,不知道你们有没有遇到过决鼠标单击变双击的问题,下面是学习啦小编收集整理关于鼠标单击变双击修复的资料以供大家参考学

1951902