纯CSS实现鼠标滑过缩略图放大显示代码
代码简介:
纯CSS实现鼠标经过放大图片,可能不是太好,因为缩略图实际上加载的仍然是完整的大幅图片,只不过是用CSS控制了显示的区域,因此可能会影响网页加载,不过CSS方法是不错,初学者参考一下。
代码内容:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>纯CSS实现鼠标滑过缩略图放大显示代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}
img {border:0}
#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>
<br />
<ul id="imgmove">
<li><a href="#"><img src="http://www.webdm.cn/images/wall1.jpg" /></a></li>
<li><a href="#"><img src="http://www.webdm.cn/images/wall2.jpg" /></a></li>
</ul>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
代码来自:http://www.webdm.cn/webcode/ddaac6cf-fb8b-4c5f-b46a-be13f5a259a8.html
转载于:https://www.cnblogs.com/webdm/archive/2011/08/06/2129221.html
纯CSS实现鼠标滑过缩略图放大显示代码相关推荐
- html鼠标悬停弹出,纯css实现鼠标滑过弹出层效果
复制代码代码如下: 无标题文档 *{margin:0; padding:0;} /* 所有元素外边距为0 内边距为0 */ /* body中元素字体大小为12px,字体样式为:"Times ...
- 不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果 原文:不可思议的纯 CSS 实现鼠标跟随效果 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
- css 鼠标滑过li变背景图,CSS定义鼠标滑过变换背景的导航菜单
我们经常看到的网站基本上都有导航菜单,有的网站看上去非常酷,鼠标一移动到上面自动改变颜色,这样的导航有两种方法可以实现:一种是鼠标经过图像,一种是CSS定义. 鼠标经过图像是把菜单做成两张文字相同但颜 ...
- html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
- html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
- 纯 CSS 实现鼠标跟随效果
欢迎微信关注Jerome blog,用技术的心去生活 鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为. ...
- 纯CSS的实现仿图片相册浏览模式代码
演示下载 查看演示 立刻下载 本文标题: 纯CSS的实现仿图片相册浏览模式代码 固定链接: http://www.tcode.me/article/1215.html 来自淘代码转载请注明
- html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码 这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
- css 设置鼠标滑过变色效果
1.样式说明: 当鼠标滑过或者悬停在图片上时,图片颜色变灰,看似是图片变灰变色效果,实际上是图片被设置为半透明样式 2.CSS样式代码: (1)HTML代码: <div class=" ...
- css实现鼠标滑过展现菜单
这是在界面中浮出的菜单,当鼠标移上去时会出现二级菜单 (该需求在查找时发现资料比较凌乱,所以按照查找到的资料,配合图进行直观的展示) 效果图: <!DOCTYPE html PUBLIC &qu ...
最新文章
- JDK动态代理实现简单AOP--转
- HDU 5536 Chip Factory 字典树+贪心
- 谷歌上线数据搜索引擎 Dataset Search
- GTK实现文本翻页(dailyNote.c)
- 为什么学习web前端,必须掌握JavaScript这门编程语言
- AI公开课丨李楠博士带你入门集成学习(第二期)
- 高质量程序设计指南C/C++语言——C++/C程序设计入门
- 安装 | 最新MATLAB 2020b(64位)安装教程完整版
- python httpserver 支持ipv6
- ocr初始化失败怎么办_应用程序正常初始化失败
- TeamViewer被检测为商用后的合理申诉
- idea激活到2100年
- 联想拯救者y7000p加内存条_联想 拯救者Y7000P 如何插入SD卡?
- 怎样和虐死人的老项目谈恋爱
- C# chart控件中游标随着鼠标移动
- 美好只在一瞬间[frwy]
- 高斯白噪声的统计特性
- GBase 8a的SNMP Trap 告警
- 视频中场:中视频的复兴与前路
- OpenCV中直方图处理函数简述
热门文章
- Edmonds-Karp算法
- Voxengo音频插件合集:Voxengo Total Bundle for Mac
- Xcode 真机运行报错Errors were encountered while preparing your device for development. Please check the De
- 2021-08-25
- Magpie: 基于React的炫酷的滚动抽奖程序
- 使用DataTables合并行
- Linux服务器上安装node.js
- js a/a中this的使用
- mysql自增字段AUTO_INCREMENT重排或归零
- 苹果mac文本处理软件:FSNotes