首页
行业
前端
特效
人生
知识库
站内搜索：
首页
>>
前端
>> 内容
鼠标滑过缩略图时放大图片（纯Css）
时间：2008/2/3 22:45:55
写着好玩的，并无技术含量，见笑了。
没有使用到Js，纯Css控制的。
弹出的图片不会把旁边的容器“挤”开。
测试通过IE7 Firefox2.11。（理论兼容IE6）
<!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" /> <title>www.jb51.net 鼠标滑过缩略图时放大图片</title> <style type="text/css"> <!-- * {margin:0;padding:0;} body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;} img {border:0} p {font-size:14px;} #imgmove li {float:left; width:50px; height:40px; display:block; overflow:visible;*overflow:hidden; margin:0px 5px; border:3px #333 solid;position:relative;*position:static;} #imgmove img {position:absolute;left:0px;top:0px;clip:rect(0px 50px 40px 0px);z-index: 0;*position:static;} #imgmove img:hover {position:relative; left:-3px; top:-3px; border:3px #f00 solid; z-index:2; clip:rect(0px 137px 137px 0px);} --> </style> </head> <body> <p>本例旨在展示鼠标滑到缩略图上时，放大图片。</p> <!--[if IE 6]><a href="#"><![endif]--> <ul id="imgmove"> <li><img title="鼠标滑过缩略图时放大图片（纯Css）" alt="鼠标滑过缩略图时放大图片（纯Css）" src="/UploadFiles/201807/20180717112128306.jpg" / onload="javascript:DrawImage(this,310)"></li> <li><img title="鼠标滑过缩略图时放大图片（纯Css）" alt="鼠标滑过缩略图时放大图片（纯Css）" src="/UploadFiles/201807/20180717112128977.jpg" / onload="javascript:DrawImage(this,310)"></li> <li><img title="鼠标滑过缩略图时放大图片（纯Css）" alt="鼠标滑过缩略图时放大图片（纯Css）" src="/UploadFiles/201807/20180717112128373.jpg" / onload="javascript:DrawImage(this,310)"></li> </ul> <!--[if IE 6]></a><![endif]--> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
上一篇：
html活用软字符连接符
下一篇：
什么是HTML相关介绍
用户评论
已有
0
人评论
阅读更多评论
相关文章
·
鼠标滑轮滚动事件（代码）
·
鼠标点击获取3维坐标three（代码）
·
鼠标悬停边框围绕效果动态边框的代码实现
·
跟随鼠标移动的图片效果代码实现
·
获取鼠标位置，以及字体样式的方法
·
鼠标悬停图片放大效果代码教程
·
鼠标悬停图片整体旋转效果
·
计算鼠标偏移量代码教程
·
摄像机鼠标左键旋转视角，滚轮缩放视角效果实现
·
鼠标与按键事件触发顺序
返回顶部
