HELLO素材网提醒您正在加载相册....

Markup


        <div id="thumbs">
            <div class="thumb"><img src="images/beach1.jpg" width="64" height="64" data-link="http://google.com"    /></div>
            <div class="thumb"><img src="images/beach3.jpg" width="64" height="64" data-link="http://yahoo.com"     /></div>
            <div class="thumb"><img src="images/beach1.jpg" width="64" height="64" data-link="http://msn.com"       /></div>
            <div class="thumb"><img src="images/beach3.jpg" width="64" height="64" data-link="http://facebook.com"  /></div>
            <div class="thumb"><img src="images/beach1.jpg" width="64" height="64" data-link="http://twitter.com"   /></div>
            <div class="thumb"><img src="images/beach3.jpg" width="64" height="64" data-link="http://jquery.com"    /></div>
            <div class="thumb"><img src="images/beach1.jpg" width="64" height="64" data-link="http://sitepoint.com" /></div>
            <div class="thumb"><img src="images/beach3.jpg" width="64" height="64" data-link="http://tuaw.com"      /></div>
            <div class="thumb"><img src="images/beach1.jpg" width="64" height="64" data-link="http://ajaxian.com"   /></div>
        </div>
        

Script


$(document).ready(function() {
    $('div.thumb img').hoverpulse().each(function() {
    	var $img = $(this);
    	var link = $img.attr('data-link');
    	$img.attr('title','Goto: ' + link);
    	$img.click(function() {
    		window.open(link);
    		return false;
    	});
    });
});
        
本JS特效由‘娜娃’整理提供,注:此代码仅供学习交流,请勿用于商业用途。
更多效果请访问www.csshello.com