下载地址

jQuery弹性突出放大图片效果源代码

2014-02-16 02:39:00 admin

本代码有脚本素材特效之家精选网站特效源码,提供jQuery特效、js特效、js幻灯片、Flash幻灯、图片特效、在线客服代码、建站素材、网页模板等,HTML、CSS、JavaScript教程,免费在线工具、CSS酷站欣赏。

jQuery弹性突出放大图片效果

jQuery弹性突出放大图片效果,制作也比较简单。以下贴出主要代码:

html:

CSS :

#wrapper{ position:absolute; left:20%; padding-top:100px; width:650px;}#menuwrapper{ position:relative; height:210px;}#menu{position:absolute; bottom:0; left:0;}.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

Js:

$(document).ready(function(){            $('.menuitem img').animate({width: 100}, 0);            $('.menuitem').mouseover(function(){                    gridimage = $(this).find('img');                    gridimage.stop().animate({width: 200}, 150);                }).mouseout(function(){                    gridimage.stop().animate({width: 100}, 150);            });        });

 

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

 

脚本素材特效之家致力于网页脚本代码以及Flash素材的收集与整理,努力为国内前端工作者提供最全面的素材,帮您节约时间做更多的事情!
本文标签: 图片弹性特效