感觉这种交互，比把鼠标放到头像上右侧内容马上就改变要好。
<!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=utf-8" />
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
body{
margin:50px;
}
.touxiang{
border:1px solid #E5D1A1; text-align:center; width:150px; height:150px; background:#FFFDD2; float:left;
}
.neirong{
width:300px;height:500px; margin-left:30px;border:1px solid #E5D1A1;background:#fff;float:left;
}
</style>
</head>
<body>
<div class="touxiang">这里是头像</div>
<div class="neirong">这里是内容区域</div>
</body>
<script type="text/javascript">
function changetext(){
$(".neirong").text(‘hahaha‘);
}
$(function(){
$(".touxiang").hover(function(){
timeout_name = setTimeout("changetext()",1500);
},function(){
clearTimeout(timeout_name) ;
})
})
</script>
</html>
知乎首页延时交互的小思路
时间： 2024-08-09 23:48:20