网站首页
关于深山
客户案例
业务范围
联系深山
网络投票系统
企业网站建设
旅行社网站建设
小程序
留言板
技术文章
许愿墙(qq爱墙)
技术首页
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
asp.net
DIV+CSS
HTML
SEO搜索引擎忧化
下载类信息
个人空间
代码生成
电商
python
页面特效
表格特效
导航菜单
图形特效
表单特效
时间日期
色彩类别
链接特效
网页特效
系统硬件
网站公告
网页学习
技术类文章
网站类信息
订阅本栏目 RSS
您所在的位置:
深山工作室
>
图形特效
> 正文
利用CSS里面的A:hover鼠标滑过缩略图时放大图片
蓝色理想 2009/5/2 21:41:28 深山行者 字体:
大
中
小
浏览 37722
以下为详细代码
<!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> <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="/UploadFiles/demo/001.jpg" /></a></li> <li><a href="#"><img src="/UploadFiles/demo/002.jpg" /></a></li> <li><a href="#"><img src="/UploadFiles/demo/003.jpg" /></a></li> </ul> </body> </html>
前一页:
利用css实现图片选中后显示文字与图片效果
后一页:
留言动态显示图片
相关阅读
还在备案期间是否可以提前购买系统？
dreawmeaver中鲜为人知的小秘诀,让你制作网页更加随心所欲.
Html中的Frame详解
jquery实现单选按钮radio选中和取消 使用prop()代替attr()
旅行社手机网站模板5
五个简单措施增强IIS安全性
纯div+css制作的弹出菜单-02
'禁止站外提交页面和数据
更多信息>>
栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>
同类信息
div+css黑色焦点图(幻灯片效果非常 不错)
javascript实现图片预览功能
比较实用的利用javascript按比例相应缩放图片大小
一个效果非常不错图片载入loading等待效果
利用css实现图片选中后显示文字与图片效果
利用CSS里面的A:hover鼠标滑过缩略图时放大图片
更多>>
最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现：无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>
随机抽取信息
走四方旅行社
格式化金钱如果为0增加两个小数点
javascript时间显示01
kiss草原旅游网站
浅论网页优化和网站优化的方式
一个非常适和div+css初学者看的例子,看完之后,相信你的DIV+CSS技术一定会上一个层次
更多标签
热门标签
绿色
关于我们
对象
右键失效
getElementById
排版
list
省略
link
web
三级
留言
定制
tab
windows
onblur
列
ico
float
pr
物理
代码 css
滑动
id
ResponseXML
柱状图
div CSS
执行
左 右 全 input
js
mop
div
blog
原则
考试
密码
自动隐藏
confirm
控制
成功
超出
兼容
ctrl
submit
web2.0
杈规
ewebeditor
ie7
随机
路径
免责声明:本站所有资料信息,有部分为本人原创,部分为从网络收集而来,仅供网友查看阅读所用,所有信息版权归信息所有人或所有公司所有
如果信息内容侵犯到您的版权或权益请与我们联系,经确认后我们会立即移除相关内容或链接
Copyright © 2007-2026
深山工作室
All Rights Reserved
服务QQ:
565449214
手机:
13961347334
ICP备案:
苏ICP备15019627号
苏公网安备 32070502010230号
苏公网安备 32070502010230号
