您的位置
主页 > 网站技术 > 语言编程 > » 正文

js模仿hover的具体实现代码

来源: 站长圈 点击:

hover效果,想必大家并不陌生吧,接下来为大家介绍下使用js模仿hover,有需要的朋友可以参考一下,希望对大家有所帮助!

复制代码 代码如下:

<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="description" content="this" /> 

<meta name="keywords" content="this" /> 

<title>this</title> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<style type="text/css"> 

body{margin:0;padding:0;} 

.hover{float:left;position:relative;margin:0 auto;padding:0; } 

.hv{position:absolute; left:0;top:0;display:none; } 

</style> 

<script type="text/javascript"> 

$(function() { 

$('.hover').hover( 

function (){ 

$('.hv').stop().fadeTo('slow',1); 

},function() { 

$('.hv').stop().fadeTo('slow',0); 

}) 

</script> 

</head> 

<body> 

<p class="hover"> 

<img src="http://img.vip.xunlei.com/img/banner/201303181424386268.jpg" alt="" width='100px' height='100px'> 

<img class="hv" src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" alt="" width='100px' height='100px'> 

</p> 

</body> 

</html> 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明