注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

邰增涛博客

www.xazcwl.com -- 爱生活,爱技术,将web编程进行到底!!!

 
 
 

日志

 
 
关于我

西安增创网络科技有限公司,专注网站建设、手机网站、商城网站、微网站开发、小程序开发、APP开发!!!

网易考拉推荐

{ JQuery.hoverpulse:jQuery图片相册插件 }  

2010-07-09 01:02:13|  分类: web标准 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
{ JQuery.hoverpulse:jQuery图片相册插件 } - 孤独剑客 - Atao Blog
简介:
hoverpluse是一个很小的jQuery插件,用于当鼠标滑过时放大图片,并在放大的过程中使用了动画效果。

基本使用

只需用jQuery选择元素,调用hoverpulse函数:

$(document).ready(function() {      $('div.thumb img').hoverpulse();  });  

使用参数

例如:

$(document).ready(function() {      $('div.thumb img').hoverpulse({          size: 40,          speed: 400      });  }  

参数默认值:

$.fn.hoverpulse.defaults = {   size:  20,    //图片放大多少像素   speed: 200,    //动画播放速度   zIndexActive: 100,  //鼠标滑过处的图片的zIndex值   zIndexNormal: 1   //正常情况下的图片的zIndex值  };
例子:
<script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="JQuery/jquery.hoverpulse.js"></script>
<script type="text/javascript">
$(function(){ 
    $('.gallery li img').hoverpulse({
  size: 50,  // number of pixels to pulse element (in each direction)
        speed: 200 // speed of the animation
 });
});
</script>
<style type="text/css">
* {
 margin:0;
 padding:0;
}
body {
 font:11px Verdana, Geneva, sans-serif;
 font-family:Georgia, "Times New Roman", Times, serif;
 background:#DEF5F8;
}
ul {
 list-style:none;
}
img {
 border:none;
}
.wrraper {
 margin:0 auto;
 width:680px;
}
h1.title, h2.credits {
 font-style:italic;
 font-weight:normal;
}
h1.title {
 font-size:38px;
 padding-top:10px;
 text-shadow:2px 2px 3px #ccc;  /*safari,opera */
}
h1.title span{
 font-size:16px;
 font-family:Verdana, Geneva, sans-serif;
}
h2.credits {
 font-size:12px;
 padding-bottom:5px;
 border-bottom:1px solid #ccc;
 color:#ccc;
}
h2.credits a {
 text-decoration:none;
 color:orange;
}
h2.credits a:hover {
 text-decoration: underline;
 color:black;
}
.gallery {
 position: relative;
 padding:0 0 25px 45px;
}
.gallery li {
 float: left;
 padding: 1px;
 margin:26px 26px 0 0;
 display:inline;
 width: 170px;
 height: 120px;
 position:relative;
}
.gallery li img {
 padding:5px;
 border:1px solid #ccc;
 background:white;
}
.gallery li span {
 position:absolute;
 top:95px;
 left:10px;
 z-index:100;
 background:url(images/tape.png) no-repeat;
 width:77px;
 height:27px;
 line-height:27px;
 text-align:center;
}
.gallery li a {
 text-decoration:none;
 color:black;
}
</style> <div class="wrraper">
  <h1 class="title">Flower Gallery <span>JQuery.hoverpulse</span></h1>
  <h2 class="credits"><em>by</em>:<a href="#">Web Designer Adam</a></h2>
  <ul class="gallery">
    <li><span><a href="#">Delight</a></span><img src="images/flower-01.jpg" width="170" height="120"/></li>
    <li><span><a href="#">Daisies</a></span><img src="images/flower-02.jpg" width="170" height="120"/></li>
    <li><span><a href="#">Helianthus</a></span><img src="images/flower-03.jpg" width="170" height="120"/></li>
    <li><span><a href="#">Dream</a></span><img src="images/flower-04.jpg" width="170" height="120"/></li>
    <li><span><a href="#">Immensity</a></span><img src="images/flower-05.jpg" width="170" height="120"/></li>
    <li><span><a href="#">Waterlily</a></span><img src="images/flower-06.jpg" width="170" height="120"/></li>
    <li><span><a href="#">Soft purple</a></span><img src="images/flower-07.jpg" width="170" height="120"/></li>
    <li><span><a href="#">Bright</a></span><img src="images/flower-08.jpg" width="170" height="120"/></li>
    <li><span><a href="#">Bliss</a></span><img src="images/flower-09.jpg" width="170" height="120"/></li>
  </ul>
</div>
  评论这张
 
阅读(1120)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018