鼠标经过图片放大功能 -

乌托邦之爱

浏览: 282675 次
性别:
来自: 沈阳

最近访客更多访客>>

shohokuf

tzk_java

xiaohan138323

fancl1989

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

鼠标经过图片放大功能

jQuery JavaScript Facebook Twitter XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档 </title> 
<style type="text/css" media="screen">
body { margin:0; padding: 0; font-family: 'trebuchet ms', trebuchet, verdana }
div,pre { margin:0; padding:0 }
h2 { margin: 20px 0 5px 0; padding: 0 }
p.intro { margin: 0; padding: 15px; background: #eee; font-size: small; }
#thumbs { position: relative; width: 198px; height: 198px; }
div.thumb { float: left; padding: 1px; width: 64px; height: 64px; }
div.thumb img { border: 2px solid white; cursor: pointer }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.hoverpulse.js"></script>	
<script type="text/javascript"> 
$(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;
    	});
    });
});

</script> 
</head> 

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

</body> 
</html>