首页 > 代码库 > 感应鼠标的滑动式图片说明效果
感应鼠标的滑动式图片说明效果
<!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><title>潜水排污泵</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">.box{ position:relative; width:320px; height:200px; overflow:hidden; background:#0088ff;}.note{ position:absolute; left:0; top:176px; width:100%; height:100%; filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#0F000000‘,endColorstr=‘#0F000000‘); background:rgba(0,0,0,0.7); text-align:center;}.title{ display:block; width:100%; height:100%; font-size:18px; color:#ffffff; text-decoration:none;}span{ font-size:24px; color:#CC0000;}</style><script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script> <script type="text/javascript">$(document).ready(function(){ $(".note").hover(function(){ $(this).animate({top:‘0‘},"900"); },function(){ $(this).animate({top:‘176px‘},"900"); }); });</script></head><body>预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br><!--把下面代码加到<body>与</body>之间--><div class="box"> <img src="/UploadFiles/2014-07/2/2014727232903682.jpg" alt="" width="320" height="200"> <div class="note"> <a href="#" class="title"><span>图片一</span><br>This is a note area input something you want to talk to every one.</a> </div></div><div class="box"> <img src="/UploadFiles/2014-07/2/2014727235466141.jpg" alt="" width="320" height="200"> <div class="note"> <a href="#" class="title"><span>图片一</span><br>This is a note area input something you want to talk to every one. This is a note area input something you want to talk to every one. This is a note area input something you want to talk to every one. This is a note area input something you want to talk to every one.</a> </div></div></body></html>
感应鼠标的滑动式图片说明效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。