鼠标移动链接上，滑动展开/隐藏图片效果

2024-09-05 12:18:32

字体：大中小

来源：转载

供稿：网友

鼠标移动链接上，滑动展开/隐藏图片效果，鼠标放在“上一页”“下一页”上，立即浮现出所对应的图片，有点提前预览的味道，让用户知道下一页或下一页的大致内容，很好的提升了用户体验。

<!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><script language="javascript" src="/ajaxjs/jquery1.3.2.js"></script><script type="text/javascript" language="javascript"> $(function(){	$(".list>li:has(div)").hover(function(){			$(this).children('a').addClass('red').end().find('div').slideDown("fast");},		function(){			$(this).children('a').removeClass('red').end().find('div').slideUp("fast");		});	});</script><style>*{margin:0;padding:0}body{background:#F8F3ED}li{list-style:none}.list{height:40px;background:#fff;padding-left:100px;}.list li{float:left;position:relative;}.list li a{float:left;width:100px;height:40px;line-height:40px; text-align:center;color:#B7B7B7;text-decoration:none; font-family:"微软雅黑";}.list li a:hover{background:#99C228;color:#FFF;}.list .box{position:absolute;top:40px;left:0;display:none;width:240px;height:170px;background:#99C228;color:#FFF;}.list .box img{width:220px;height:150px;margin:10px;}.list li a:hover,.red{background:#99C228!important;color:#FFF!important;}</style></head><body><ul class="list">	<li>上一页    	<div class="box"><img src="/d/file/p/2024/09-05/95abcbae97576abc727c2808a43a1014.jpg" /></div>    </li>	<li>下一页    	<div class="box"><img src="/d/file/p/2024/09-05/1876e14d8aca3b32a5fc0ea96078aee5.jpg" /></div>    </li></ul></body></html>

上一篇：一个自定义的网页滚动条，支持图片显示

下一篇：打开即全屏的网页窗口

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注