注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery制作呼吸灯效果

媒体 fishcity 2660浏览

jquery制作呼吸灯效果

很美妙又动感的图片放大效果-呼吸灯,很多地方都可以用到,简单来说这是非常实用的效果,但这么好的效果,代码却很简单,相当易懂,5行代码就完成了,jquery就是这么的强,下面我们开始吧。

jquery实例教程:jquery制作呼吸灯

首先引入jquery库,这是必须的,可以用本地的,也可以cdn链接谷歌或是jquery的。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

接着建立HTML标签,下面这代码你再懂的话,建议你不要学前端了

<ul class="list2">
  <li><a href=""><img src="images/01.jpg" class="img" /></a></li>
  <li><a href=""><img src="images/02.jpg" class="img" /></a></li>
  <li><a href=""><img src="images/03.jpg" class="img" /></a></li>
  <li><a href=""><img src="images/04.jpg" class="img" /></a></li>
  <li><a href=""><img src="images/05.jpg" class="img" /></a></li>
  <li><a href=""><img src="images/06.jpg" class="img" /></a></li>
</ul>

接下来,我们谈下CSS样式吧,这个也很简单,先上代码

.list2 {
  width: 606px;
  margin: 15px auto;
}
.list2 li {
  width: 200px;
  height: 163px;
  overflow: hidden;
  list-style: none;
  float: left;
  margin: 1px;
  position: relative;
}
.list2 li img {
  width: 200px;
  height: 163px;
  position: absolute;
}

list2 定义宽度与边距,主要是为了居中,list2 li定义每个li的宽度与高度,并且使用相对定位,这个相对定位为下面图片的绝定位打基础,同时加了overflow:hidden,让图片变大时,li的大小不变,并遮挡住图片放大部分。list2 li img定义图片的大小,并用绝对定位,让图片放大时不跑位。

最后,完成了以上工作,就可能创建重要的JS了,代码只有5行哦,记得要文档加载前就要执行,要不不会有效果的。

 $(function(){
       $('.list2 li').mouseover(function(){//绑定鼠标悬浮时的事件
       //图片放大到宽为320高为263,同时向上称动-50px位置,向左移动-50px位置
       $(this).find('img').stop().animate({width:'320px',top:'-50px',left:'-50px', height:'263px'});
     });
       $('.list2 li').mouseout(function(){/绑定鼠标移出时的事件
        //图片缩小到宽为200高为163,同时向上称动0px位置,向左移动0px位置
       $(this).find('img').stop().animate({width:'200px',top:'0',left:'0', height:'163px'});
     });
  })

好了,可以测试下了,一个动感美丽漂亮的效果就这么出来了,不要不想信,这一切都是真的

转载请注明:jQ酷 » jquery制作呼吸灯效果

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。