使用CSS制作的一个图片浏览效果。

最新推荐文章于 2021-08-03 22:21:44 发布
最新推荐文章于 2021-08-03 22:21:44 发布
阅读量177 收藏
点赞数
文章标签： xhtml javascript 爬虫 ViewUI
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="pragma" content="no-cache" />
<!--缓存信息-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="gb2312" />
<!--编码信息-->
<meta name="robots" content="all" />
<!--机器人爬虫-->
<meta name="author" content="Ghost" />
<meta name="Copyright" content="CSSForest" />
<meta name="Description" content="CSS森林" />
<meta name="Keywords" content="ImgView,CSS,样式表,标准,web,Blog,博客,XHTML,CSSForest,CSS森林" />
<title>ImgView Demo -- CSS森林 </title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-780254-3";
urchinTracker();
</script>

<style type="text/css">
h2,ul,li{margin:0;padding:0;list-style:none;}
img{border:0;}
.copyright{position:relative;top:520px;left:10px;width:300px;height:200px;line-height:10px;}
.copyright a:link{color:#666666;text-decoration:none;}
.copyright a:hover{color:#CC9900;text-decoration:underline;}

.imgview{
position:absolute;
top:30px;
z-index:80;
float:left;
width:857px;
height:auto;
min-height:440px;
}
    .imgview a{
    text-decoration:none;
    }
    .imgview h2{
    position:absolute;
    top:10px;
    left:10px;
    width:290px;
    height:30px;
    background-color:#FFFFFF;
    color:#000000;
    font-size:1.2em;
    text-indent:10px;
    line-height:30px;
    }
    .imgview ul{
    position:absolute;
    top:48px;
    left:10px;
    z-index:90;
    width:290px;
    height:auto;
    min-height:230px;
    background-color:#FFFFFF;
    }
    .imgview ul li{
    float:left;
    width:82px;
    height:59px;
    margin:8px 6px 7px;
    border:1px solid #DEDEDE;
    }
    .imgview ul li strong{
    display:none;
    }
    .imgview ul li a:hover{
    display:block;
    width:100%;
    height:100%;
    }
            .imgview ul li a:focus strong,
            .imgview ul li a:active strong{
            display:block;
            position:absolute;
            top:350px;
            left:300px;
            z-indent:100;
            width:537px;
            height:30px;
            background-color:#FFFFFF;
            color:#000000;
            text-indent:10px;
            line-height:30px;
            }
            .imgview ul li a:hover span img{
            position:absolute;
            top:240px;
            left:1px;
            width:200px;
            height:140px;
            }
            .imgview ul li a:active span img,
            .imgview ul li a:focus span img{
            position:absolute;
            top:-38px;
            left:300px;
            z-index:90;
            width:537px;
            height:380px;
            }
    .imgview ul li img{
    width:80px;
    height:57px;
    }
    .imgview .imgview-rep{
    position:absolute;
    top:287px;
    left:10px;
    z-index:10;
    width:201px;
    height:140px;
    border:1px solid #999999;
    color:#EFEFEF;
    font-size:2em;
    text-align:center;
    line-height:140px;
    }
    .imgview .imgview-bgtext{
    position:absolute;
    top:9px;
    left:309px;
    z-index:10;
    width:537px;
    height:380px;
    border:1px solid #999999;
    color:#EFEFEF;
    font-size:5em;
    text-align:center;
    line-height:380px;
    }
 
.imgtag{
position:absolute;
top:130px;
left:10px;
}
    .imgtag .tagname{
    float:left;
    width:100px;
    height:30px;
    text-align:center;
    line-height:30px;
    cursor:pointer;
    }
    .imgtag .tag1
    .imgtag .tag2,
    .imgtag .tag3{
    position:absolute;
    left:0;
    width:100px;
    }
    .imgtag .tag1{
    position:absolute;
    left:0;
    background-color:#BCC8C3;
    }
        .imgtag .tag1 .imgview{
        left:0;
        background-color:#BCC8C3;
        }
    .imgtag .tag2{
    position:absolute;
    left:102px;
    background-color:#BFB6B4;
    }
        .imgtag .tag2 .imgview{
        display:none;
        }
        .imgtag .tag2:hover .imgview{
        display:block;
        left:-102px;
        z-index:80;
        background-color:#BFB6B4;
        }
    .imgtag .tag3{
    position:absolute;
    left:204px;
    background-color:#CCC8BF;
    }
        .imgtag .tag3 .imgview{
        display:none;
        }
        .imgtag .tag3:hover .imgview{
        display:block;
        left:-204px;
        z-index:80;
        background-color:#CCC8BF;
        }

/*==S== hack ====*/
.imgview{
 /*lte IE 6 hack*/
_height:440px;
_font-size:75%;
}
 .imgview ul{
 /*lte IE 6 hack*/
 _height:230px;
 }
 .imgview ul:after{
 /*FF hack*/
 content:".";
 display:block;
 height:0;
 clear:both;
 visibility:hidden;
 }
 .imgview ul li{
 /*lte IE 6 hack*/
 _height:63px;
 _margin:8px 5px 7px;
 }
 .imgview .imgview-rep{
 /*lte IE 6 hack*/
 _width:203px;
 }
 .imgview .imgview-bgtext{
 /*lte IE 6 hack*/l
 _width:539px;
 }

.imgtag .tag1 .imgview,
.imgtag .tag2 .imgview,
.imgtag .tag3 .imgview{
 /*lte IE 6 hack*/
}
/*==E== hack ====*/
</style>

</head>

<body>
<h1>ImgView CSS Demo</h1>
<p>使用CSS制作的一个图片浏览效果。</p>

<div class="imgtag">
    <div class="tag1">
    <!--[if lte IE 6]><a href="#nogo1" class="taga1"><![endif]-->
    <div class="tagname">TagName1</div>
        <div class="imgview">
            <div class="imgview-bgtext">PhotoView</div>
            <div class="imgview-rep">PhotoView</div>
            <h2>Photogallery 01</h2>
            <ul>
                <li title="photo1"><a href="#nogo"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
                <li title="photo2"><a href="#nogo"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
                <li title="photo3"><a href="#nogo"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
                <li title="photo4"><a href="#nogo"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
                <li title="photo5"><a href="#nogo"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
                <li title="photo6"><a href="#nogo"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
                <li title="photo7"><a href="#nogo"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
                <li title="photo8"><a href="#nogo"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
                <li title="photo9"><a href="#nogo"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
            </ul>
        </div>
    <!--[if lte IE 6]></a><![endif]-->
    </div>
    <div class="tag2">
    <!--[if lte IE 6]><a href="#nogo2" class="taga2"><![endif]-->
    <div class="tagname">TagName2</div>
        <div class="imgview">
            <div class="imgview-bgtext">PhotoView</div>
            <div class="imgview-rep">PhotoView</div>
            <h2>Photogallery 02</h2>
            <ul>
                <li title="photo3"><a href="#nogo"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
                <li title="photo2"><a href="#nogo"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
                <li title="photo5"><a href="#nogo"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
                <li title="photo6"><a href="#nogo"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
                <li title="photo7"><a href="#nogo"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
                <li title="photo1"><a href="#nogo"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
                <li title="photo8"><a href="#nogo"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
                <li title="photo4"><a href="#nogo"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
                <li title="photo9"><a href="#nogo"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
            </ul>
        </div>
    <!--[if lte IE 6]></a><![endif]-->
    </div>
    <div class="tag3">
    <!--[if lte IE 6]><a href="#nogo3" class="taga3"><![endif]-->
    <div class="tagname">TagName3</div>
        <div class="imgview">
            <div class="imgview-bgtext">PhotoView</div>
            <div class="imgview-rep">PhotoView</div>
            <h2>Photogallery 03</h2>
            <ul>
                <li title="photo2"><a href="#nogo"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
                <li title="photo4"><a href="#nogo"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
                <li title="photo5"><a href="#nogo"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
                <li title="photo3"><a href="#nogo"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
                <li title="photo1"><a href="#nogo"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
                <li title="photo8"><a href="#nogo"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
                <li title="photo6"><a href="#nogo"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
                <li title="photo7"><a href="#nogo"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
                <li title="photo9"><a href="#nogo"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
            </ul>
        </div>
    <!--[if lte IE 6]></a><![endif]-->
    </div>
</div>
<div class="copyright">
  <div class="vcard">
    <div class="logodiv"><img class="logo" src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>
    <div class="info">
      <p class="fn n"><strong class="given-name">Ghost</strong> <strong class="family-name">Zhang</strong></p>
      <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com" class="email">lovej1bz@gmail.com</a></p>
      <p class="qq"><strong>QQ:</strong><a href="tencent://message/?uin=22168741&amp;Site=webrebuild.org&amp;Menu=yes" class="uid">22168741</a></p>
      <p class="org"><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>
      <strong>Blog:</strong><a href="http://forest.blogbus.com" class="url" rel="me">http://forest.blogbus.com</a> </div>
  </div>
</div>
</body>
</html>
weixin_34194317
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯 CSS 图片 浏览器 效果
05-29
纯CSS图片浏览器效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
CSS+JS构建的图片查看器 附带源码 非常经典 非常好的图片浏览查看效果
03-28
CSS+JS构建的图片查看器 附带源码 非常经典 非常好的图片浏览查看效果
CSS+JS照片浏览器
11-28
照片浏览器
C#照片预览，好处是图片不在项目中也可以查看
05-15 118
//在一个页面中添加image控件，后台指向一个新页面，在新页面获取图片的二进制流，再展现在页面上<body><divclass="pNavigation"><divstyle="overflow:hidden;"><imgalt=""class="img_Navigation"src=...
css前沿图片预览,viewer.js实现图片预览功能
weixin_33378701的博客
08-03 526
viewer.js是实现图片预览的插件库，要在项目中使用它里面的功能，首先要引入两个文件：1、css文件:viewer.css2、js文件:viewer.js可以在这里下载下载后，在html中引入页面布局html部分 CSS部分:* {margin: 0;padding: 0;list-style: none;}body {background-color: #f5f5f5;font-fam...
ul结合CSS制作网页相册滑动浏览效果
09-27
【知识点详解】 1. **HTML基础结构**：代码示例中使用了HTML的基本结构，包括...通过以上讲解，我们可以了解到如何使用HTML和CSS创建一个简单的网页相册滑动浏览效果，同时也涉及到了网页制作中的常见技巧和注意事项。
巧用CSS滤镜制作绚丽图片播放效果
09-27
本文将重点讲解如何利用CSS中的`revealTrans`滤镜来制作一个超炫的图片播放效果，同时确保每张图片都有自己的链接地址，使得用户点击图片时能够跳转到不同的页面。 首先，`revealTrans`滤镜是CSS1中的一个特性，它...
CSS:何制作一个向各个方向延展box?
09-27
在网页设计中，创建一个能够向各个方向延展的box是一项重要的技巧，它可以提供良好的响应式体验，适应用户的浏览习惯和设备变化。本教程将详细介绍如何利用CSS实现这样的效果。 首先，理解HTML的基础布局原理至关...
CSS制作的类似相册浏览的功能.rar
12-11
过渡和动画也是CSS制作相册功能的重要部分。通过`transition`属性，我们可以定义当元素状态改变时（如点击预览图切换到全尺寸图）的过渡效果，包括变化的属性、持续时间和缓动函数。如果需要更复杂的动画，如淡入...
上传若干张图片至浏览器后预览图片（只用HTML+CSS+JS实现）
10-11
在未上传图片至服务器前实现预览功能，内含注释。。。。。。。
C#图片查看及各种播放效果实现
10-28
实现正常图片的查看的各种功能、具有幻灯片播放的功能、还有一些动态效果的播放功能、可以正常运行
CSSPLaY出的2款纯CSS图片浏览
PHP 专区
05-06 112
[url=http://www.louzi.net/uploads/200606/08_105651_cssplay.jpg]
纯CSS的实现仿图片相册浏览模式代码
淘代码
02-14 669
演示下载  查看演示 立刻下载 本文标题: 纯CSS的实现仿图片相册浏览模式代码 固定链接: http://www.tcode.me/article/1215.html 来自淘代码转载请注明
css前沿图片预览,实现图片预览
weixin_39968490的博客
08-03 448
css：.bigPic {width: 400px;height: 300px;border: 1px solid #ccc;border-radius: 4px;margin-bottom: 10px;display: flex;flex-direction: row;justify-content: center;align-items: center;position: relative;o...
9种炫酷CSS3图片预览展示特效
souhugirl的专栏
03-08 3659
这是一组共9款CSS3炫酷图片预览展示动画特效插件。该效果开始时图片堆叠在一起，当鼠标滑过图片时，图片会以9种不同的方式展开，有扇形、平面展开等等非常酷的效果。 注意：每种效果的图片数量是固定的，数量不对显示出来的效果会不太美观。 在线演示：http://www.htmleaf.com/Demo/201503071477.html 下载地址：http://www.htmleaf.co
2个属性用CSS实现图片自适应浏览器
wxc1207的博客
07-21 1482
1.创建设置图片的div <div class="img-wrapper"></div> 2.设置其样式 设计原因： 开发中图片为固定大小，计算宽和高的比例即是padding-bottom的值 背景图不受内边距的影响，它会充满整个盒子（内容区+内边距） 由于第2条，索性让它充满整个盒子 设置三个属性即可 设置与父元素宽度的百分比下内边距 加载图片 背景图填充满整个区域 .img-wrapper { /*默认宽度是100% 默认
超简单的纯CSS代码实现的图片浏览器
vejia.com
08-22 378
纯CSS代码实现的图片浏览器示例： [url]http://www.vejia.com/code/imgViewer.html[/url] [code="java"] .out table,.out table td{ border-collapse:collapse; background:#000; border:#000 solid 3px; } .out table tr ...
css背景图与html插入img的区别
weixin_34178244的博客
09-13 414
　　一直以来都认为css背景图与直接插入img图片的效果是差不多的，直到最近拜读了一位大神的作品，发现大部分图片都是通过背景图形式显示的，于是通过搜索各相关资料，在此总结了下二者的区别： 1. css中的图片以背景图形式存在，写在html中的图片以标签形式存在。而在网页加载过程中，以css背景存在的图片会等到html结构加载完成才开始加载，而html中的img标签是网页结构（内容）的一部分会在加...
web 静态网页设计与制作-基于HTML+CSS+JS 实现旅游摄影网站.docx
最新发布
02-27
在设计和制作一个旅游摄影网站时，HTML、CSS和JavaScript是构建静态网页的三大核心技术。以下是对这些技术在该场景中的应用进行的详细说明： 1. HTML（HyperText Markup Language）：HTML是网页内容的基础，它定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值