当你将鼠标放在缩略图上,旁边会弹出,一张完整的展示图,没有用到任何的js,用css就能实现。
HTML代码:
-
<DIVid=pic>
-
<Aclass=p1title="thumbnailimage"
-
href="http://marslau.com/html/CSS-Image-PopUp/CSS-Image-PopUp.htm">
-
<imgtitle="BeautyTn"height=100src="Beauty-tn.jpg"width=100>
-
<IMGclass=largetitle="Beauty"height=498src="Beauty.jpg"width=500>
-
</A>
-
</DIV>
对应的CSS:
-
#pic{WIDTH:100px;BACKGROUND-COLOR:#ffffff;margin:100px0080px;}
-
#picA.large{BORDER:0px;DISPLAY:block;WIDTH:0px;HEIGHT:0px;}
-
#picAIMG{BORDER:0px;}
-
#picA.p1{
-
BORDER:#0000001pxsolid;DISPLAY:block;
-
BACKGROUND:#ffffff;LEFT:0px;WIDTH:100px;
-
TOP:0px;HEIGHT:100px;TEXT-DECORATION:none
- }
-
#picA.p1:visited{
-
BORDER:#0000001pxsolid;DISPLAY:block;
-
BACKGROUND:#ffffff;LEFT:0px;WIDTH:100px;TOP:
-
0px;HEIGHT:100px;TEXT-DECORATION:none
-
}
-
#picA.p1:hover{COLOR:#000000;BACKGROUND-COLOR:#8c97a3;TEXT-DECORATION:none}
-
#picA.p1:hover.large {
-
BORDER:#0000001pxsolid;DISPLAY:block;
-
LEFT:150px;WIDTH:500px;POSITION:absolute;TOP:0px;HEIGHT:498px
- }
-
很简单就实现了
分享到:
相关推荐
这是一款使用纯css3制作的图片点击弹出动画遮罩层效果。该动画遮罩层demo中为模板展示,当点击模板图片后,图片缩小并在图上方弹出半透明遮罩层,显示模板各个模块的功能。
纯CSS实现的鼠标触及显示边框和描述的图片特效
这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果。
3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery...
(4) 制作图片轮显效果 (5) 制作随光标滚动的广告图片效果 (6) 制作光标移到某图片上显示该图片对应大图 (7)制作弹出式广告,并3秒后自动关闭 主题是旅游网站,网页简单不炫酷但是页面很漂亮ins风。
小图分布式显示,点击合成大图特效,图片相册效果
10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑菜单效果 13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色...
18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...
甚至有的网站已经完全抛弃图片,仅使用CSS和JavaScript创造出简介而又华丽的界面。下面是国外作者@jtauber的使用CSS创作蜂巢效果的技术介绍(上面是最终效果图): height:100px;width:100px;border:30pxsolid#999;...
该弹出层图片画廊可以将页面中所有带相同class类的图片制作为一个无限循环的旋转木马效果。它的特点还有: 完全响应式。 通过图片的alt标签来设置标题。 可以控制图片的滑动时间间隔。 可以显示/隐藏前后导航...
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 jQuery图片特效404 jQuery图片特效CustomAnimationBanner jQuery图片特效FullPageImageGallery jQuery图片特效image Scroller图片滚动 jQuery图片特效...
用html和css写的一个简单页面,页面效果类似于百度新闻首页,下载即可使用,压缩包内包含图片,不会出现打开网页后无法显示图片的情况─=≡Σ(((つ•̀ω•́)つ
18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...
03:___CSS制作的类似相册浏览的功能 04:___CSS完成神奇创意的相框 05:___CSS实现自适应的图片背景边框 06:___CSS将图片自动变为圆角 07:___CSS强制等比例缩小图片 08:___Javascript仿Flash图片轮翻 09:___JavaScript...
这里是一个简单的CSS技巧,它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空标签,它使用背景图片和position:absolute属性将标题覆盖。该技巧经...
CSS精灵技术过去由于网速的原因,许多网页设计师热衷于把网页中的图片字节数限制的很小,因而在一个图片文件夹里存放着许多小图片,网页中每显示一张图片用户端都要向服务器发送请求。CSS3的出现可以使网页增加很多...
CSS3悬停图片文字遮罩特效是一款基于css3 transition属性制作的鼠标悬停图片透明遮罩层文字动画展示特效。
本文使用 HTML5 和CSS3 提供的前台展示能力制作出了漂亮的幻灯片相册程序,结合时下流行的 Asp.Net 做后台支持,实现了个人幻灯片相册的B/S结构的应用。其中,HTML5 负责前台的页面展示和交互,CSS3 负责样式和布局...