jQuery图片鼠标滑过hover插件

当前位置:主页 > jQuery库 > 图片效果 > jQuery图片鼠标滑过hover插件
jQuery图片鼠标滑过hover插件
分享:

    插件介绍

    这是一款优秀的jQuery图片鼠标滑过hover插件。插件中提供多种鼠标滑过效果:图片移动、淡入淡出、图片放大等效果。是一款非常实用的jQuery鼠标滑过插件。

    浏览器兼容性

    浏览器兼容性
    时间:11-19
    阅读:

简要教程

这是一款非常优秀的jQuery图片鼠标滑过插件。

浏览器支持

  • Opera 10.0+
  • Mozilla Firefox 3.0+
  • Google Chrome 3.0.195
  • Safari 3.1+ (win)
  • Internet Explorer 8.0

HTML

<div id="images">
        <img src="docs/images/Peach_and_Lime.jpg" alt="Peach and Lime" />
        <img src="docs/images/Rock_Chick.jpg" alt="Rock Chick" />
        <img src="docs/images/Angel.jpg" alt="Angel" />
        <img src="docs/images/More_stripes.jpg" alt="More stripes" />
</div>
                

调用插件

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
    $('#images img').asexy();
});
//]]>
                

可用参数

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
    $('selector img').sexy({
        width:320,
        height:240,
        left:0,       // can be 'center'
        top:0,        // can be 'center'
        zoom:true,    // zoom to size
        speed:500,    // only in ms
        opacity:0.8,  // from 0.0 to 1.0
        round:60,     // don't start new iterration for small different (for linear and zigzag functions)
        func:"linear" // available linear, zigzag, vertical, horizontal, x  
    });
});
//]]>
</script>