中尉
<!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=gbk" />
<title>鼠标移动图片上特效 by 25175</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css' />
<noscript>
<link rel="stylesheet" type="text/css" href="css/noscript.css" />
</noscript>
<script type="text/javascript" src="js/modernizr.custom.72835.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<a href="http://www.25175.com">25175 >></a>
</div>
<div class="wrapper">
<!-- If browser does not support border radius, show this message -->
<p class="message">Your browser does not support the border-radius property!</p>
<div class="section">
<div class="normal-trigger-area">
<a href="#" id="circle" class="ec-circle">
<h3>Hovered</h3>
</a>
</div>
<div class="content">
<h1>Hover and Click Trigger for Circular Elements <span>with jQuery</span></h1>
<p>元素的边界半径50%（这使得元素显示为一个圈），悬停事件被触发鼠标在元素本身，其长方形（参见虚线轮廓）。</p>
<p><a href="http://www.25175.com" title="更多Jquery特效">25175</a></p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.circlemouse.js"></script>
<script type="text/javascript">
$(function() {
$('#circle').circlemouse({
onMouseEnter : function( el ) {
el.addClass('ec-circle-hover');
},
onMouseLeave : function( el ) {
el.removeClass('ec-circle-hover');
},
onClick : function( el ) {
alert('Hello world');
}
});
});
</script>
</body>
</html>
|
|
鼠标移动图片上特效
分享到：
 购买记录   其他最新源码
       
|
新兵
