仿IBM首页焦点图,缩略图大图，带文字
<!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>仿IBM首页焦点图</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
/* gallery */
.gallery{background:url(images/loadsmall.gif) #000 no-repeat 330px 100px;overflow:hidden;width:760px;position:relative;height:240px;}
.gallery ul{z-index:999;left:3px;bottom:0;position:absolute;text-align:left;}
.gallery ul li{display:block;font-weight:900;font-size:12px;float:left;width:140px;color:#aaa;font-family:Arial;position:relative;height:50px;}
.gallery li div{margin-top:5px;display:none;padding-left:10px;margin-left:70px;}
.gallery li img{border-right:#fff 1px solid;border-top:#fff 1px solid;filter:alpha(opacity=60);left:10px;float:left;border-left:#fff 1px solid;width:52px;cursor:pointer;margin-right:4px;border-bottom:#fff 1px solid;position:absolute;top:5px;height:35px;moz-opacity:.6;}
.gallery li.current div {display:block;}
.gallery .frontText{font-weight:900;font-size:30px;height:36px;line-height:36px;z-index:999;left:20px;width:100%;color:#fff;font-family:Verdana;position:absolute;top:40px;}
.gallery .frontTextBack{font-weight:900;font-size:30px;height:36px;line-height:36px;left:22px;width:100%;color:#000;font-family:Verdana;position:absolute;top:42px;}
.gallery .frontTextSub{font-size:20px;height:26px;line-height:26px;left:25px;width:100%;color:#fff;font-family:Verdana;position:absolute;top:80px;}
.gallery .bg{border-top:#999 1px solid;background:#000;filter:alpha(opacity=60);opacity:0.6;width:100%;bottom:0;position:absolute;height:50px;text-align:right;}
.gallery .mask{z-index:990;background:url(images/mask.gif);left:0;width:100%;position:absolute;top:0;height:100%;}
.gallery .picshow{text-align:center;}
.gallery .gray{filter:Gray();}
</style>
<script type="text/javascript" src="../jquery.js"></script>
</head>
<body>
<div class="gallery">
<ul>
<li><img src="data:images/02.jpg" text="corange.cn|ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术" pic="2" width="52" height="35" /><div>corange.cn</div></li>
<li><img src="data:images/01.jpg" text="Handy Code|春华秋实" pic="1" width="52" height="35" /><div>一片麦穗</div></li>
<li><img src="data:images/03.jpg" text="郁郁葱葱的生命|生生不息的生命" pic="3" width="52" height="35" /><div>一树绿叶</div></li>
<li><img src="data:images/04.jpg" text="孤独的一棵老树|等谁呢？" pic="4" width="70" height="47" /><div>一棵大树</div></li>
<li><img src="data:images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5" width="70" height="47" /><div>一地葵花</div></li>
</ul>
<div class="frontTextBack"></div>
<div class="frontText"></div>
<div class="frontTextSub"></div>
<div class="bg"></div>
<div class="mask"></div>
<div class="picshow"><img height="240" width="760" src="" /></div>
</div><!--gallery end-->
<script type="text/javascript" src="js/slide.js"></script>
</body>
</html>
原文地址:http://www.corange.cn/archives/2011/12/3802.html
转载于:https://www.cnblogs.com/ajuanabc/archive/2011/12/22/2462643.html
仿IBM首页焦点图,缩略图大图，带文字相关推荐
- PHPCMS推荐位图片频道首页焦点图
1.默认推荐位为9个推荐选项,删除其中一个 2. <script type="text/javascript" src="{JS_PATH}jquery.min.j ...
- [插件发布] KK_XSHOW首页多格(Discuz) DX2.0 首款支持x2的首页N格焦点图！
下载附件 上传到论坛根目录!然后进入后台 安装!安装完毕 开启就可以了! 下载地址: [插件发布] KK_XSHOW首页多格(Discuz) DX2.0 首款支持x2的首页N格焦点图! [插件发布] ...
- 模仿PPLive带左右翻页的焦点图,实用
查看效果 下载地址 前台部分代码 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 仿麦包包首页table轮换图jQuery(转自www.jqueryba.com)
2019独角兽企业重金招聘Python工程师标准>>> 仿麦包包首页table轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下. ...
- 仿麦包包首页table轮换图jQuery
仿麦包包首页table轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下. 刚开始,做的有些问题,里面有个样式,我是直接.bks的,不管如何都无法渲染 ...
- 仿麦包包首页tab轮换图jQuery
仿麦包包首页tab轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下. 刚开始,做的有些问题,里面有个样式,我是直接.bks的,不管如何都无法渲染该样 ...
- 仿麦包包首页tab轮换图jQuery(转自www.jqueryba.com)
仿麦包包首页tab轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下. 刚开始,做的有些问题,里面有个样式,我是直接.bks的,不管如何都无法渲染该样 ...
- Android开发笔记（一百六十四）仿京东首页的下拉刷新
上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1.京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏,内嵌扫一扫图标.搜索框,以 ...
- HTMLCSS仿京东首页制作静态页面总结
目录 一.网站优化三大标签:title(网站标题),description(网站说明),Keywords(网站关键词) 二.favicon图表的使用 三.字体图标的使用 四.base.css和comm ...
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
本文借助vs2005中自带的FileUpload控件实现图片文件的上传并生成缩略图. 实现过程:选择图片上传成功后,取得已经存在服务器的文件生成缩略图,并且判断是否是图片类型的文件,这个的判断可以在程 ...
最新文章
- 原生js路由跳转方法_今日艰难笔记原生js整合reactrouter路由管理
- Python基础(5) - 文件
- 【原创】Performanced C++ 经验规则 第五条：再谈重载、覆盖和隐藏
- Python 37 进程池与线程池 、 协程
- 疫情与资本寒冬双重危机下，智领云为何能拿到数千万融资？
- android中viewpager+fragment,ViewPager和Fragment一篇就够了
- AI能为智能手机带来哪些惊喜？Gartner列了这十大应用
- ITK简介与ITK Pipeline
- 国都企信通短信平台发送手机短信的python脚本一例
- 远离危险 教你使用局域网“隐身术”(转)
- VSCode安装使用教程（最新详细版）
- oracle数据库中的系统自带表情_教你如何让数据库支持emoji表情符存储
- 交叉表 mysql_mysql交叉表查询解决方案整理
- Minecraft Java版
- 用Python如何开发Excel宏脚本？新手必学
- 阿里/腾讯云静默安装Oracle11G超级详细教程
- 演讲比赛流程管理系统C++
- 基于腾讯云开发微信小程序（新闻发布及共享平台）上
- 通达信 移动平均算法_通达信线性回归通道主图指标公式；通达信顶底轻松买卖副图指标公式...
- Kali安装VMware Tools,解决“安装VMware Tools”灰色按钮问题