设置首页
-
加入收藏
导航：
博客
-
文章
-
图片
-
下载
-
论坛
[ 首页 ]
[ ASP编程 ]
[ WEB技术 ]
[ 脚本应用 ]
[ 图文教程 ]
[ 站长资讯 ]
当前位置：
文章中心
-
WEB技术
-
鼠标滑过缩略图时放大图片
相关文章
JS图片切换
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
CSS无图片实现圆角框
纯JS+CSS的液晶数码彩色显示板效果(无图片)
一个简单的图片弹出层，兼容所有浏览器
仿土豆网首页效果, 焦点图片切换效果
asp利用aspjpeg给图片生成PNG透明水印
用ASP取出HTML里面的图片地址的函数
JS图片放大查看效果!
这里放搜索
最新文章
检测大写锁定键
JS图片切换
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
幻于算法
VBScript实现的escape和unescape功能函数
自动排版工具
精妙SQL语句介绍
CSS无图片实现圆角框
简单的弹出层加遮罩层效果
鼠标滑过缩略图时放大图片
关键词：鼠标,滑过,缩略图,放大,图片 时间:2008年07月27日 星期日 阅读:928
<!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>鼠标滑过缩略图时放大图片</title> <!-- iced 0802030237 --> <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 a img {position:absolute;left:0px;top:0px;clip:rect(0px 50px 40px 0px);z-index: 0;*position:static;} #imgmove a:hover {border:none } #imgmove a:hover img {position:relative; left:-3px; top:-3px; border:3px #f00 solid; z-index:2; clip:rect(0px 137px 137px 0px);} --> </style> </head> <body> <p>本例旨在展示鼠标滑到缩略图上时，放大图片。</p> <br /> <br /> <br /> <br /> <br /> <ul id="imgmove"> <li><a href="#"><img src="http://www.fj126.net/photo/file/preview/0807012213338140.jpg" /></a></li> <li><a href="#"><img src="http://www.fj126.net/photo/file/0807012213568422.jpg" /></a></li> <li><a href="#"><img src="http://www.fj126.net/photo/file/0807012214087864.jpg" /></a></li> </ul> </body> </html>
提示：可以先修改部分代码后再运行
上一篇：
可多次使用的仿126邮箱选项卡的源码
下一篇：
用AJAX正确显示静态网页用户登录区状态
3条记录
访客评论
这女的是谁啊!
这女的是谁啊!
于 2009-1-25 0:16:02 发表
#1
怎么用啊？请高手指点一下，谢谢！
网友9542
于 2009-5-12 14:58:19 发表
#2
“a:hover” 鼠标经过，就替换掉"img"的CSS
不是我想要看的
于 2010-6-24 3:08:35 发表
#3
发表评论
昵称
(必填)
内容
(必填)
答案
(必填)
记住我，再次发表不需要重填个人信息。
不想保留信息请
删除cookie
！
友情链接
name
name
与蓝雨对话
Copyright © 2008-2009
蓝雨设计
闽icp备05009764号
Powered by
Bcms X2
. Processed in 0.000000 second(s), 0 queries
3条记录访客评论
这女的是谁啊!
怎么用啊？请高手指点一下，谢谢！
“a:hover” 鼠标经过，就替换掉"img"的CSS