ImageFlow 图片显示插件-兼容IE8和Chrome浏览器

最新推荐文章于 2024-06-17 09:38:08 发布

zyytaiyame

最新推荐文章于 2024-06-17 09:38:08 发布

阅读量2.7k

点赞数

文章标签：插件图片 html ie 8 chrome

本文链接：https://blog.csdn.net/zyytaiyame/article/details/54140002

版权

效果图

ImageFlow 图片显示插件
兼容IE8和Chrome浏览器

好像有时里面图片放大的比较大，不知道为什么，没仔细研究，插件很强大，有待深入研究

<!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=gb2312" />
<title>赛事记实</title>
<style type="text/css">
<!--
   html {overflow-x: hidden; overflow-y: hidden; overflow:hidden;}
-->
</style>
<style>
.category_1 {background:url(images/bg01.jpg) no-repeat center;height:700px;margin:0 auto;}
#imageFlow{width:1150px;height:500px;position:relative;margin:0px auto 0 auto;margin-top:100px;}
#imageFlow .diapo{position:absolute;left:0px;cursor:pointer;-ms-interpolation-mode:nearest-neighbor;}
#imageFlow .link{border:dotted #fff 1px;margin-left:-1px;margin-bottom:-1px;}
#imageFlow .bank{visibility:hidden;margin-top:-100px;}
#imageFlow .top{position:absolute;width:100%;height:40%;background:#181818;}
#imageFlow .text{position:absolute;left:0px;width:100%;bottom:16%;text-align:center;color:#000;font-family:verdana, arial, Helvetica, sans-serif;z-index:1000;}
#imageFlow .title{font-size:20px;font-family:microsoft yahei;font-weight:bold;}
#imageFlow .legend{font-size:20px;font-family:microsoft yahei;font-weight:bold;}
#imageFlow .scrollbar{position:absolute;left:10%;bottom:10%;width:80%;height:16px;z-index:1000;}
#imageFlow .track{position:absolute;left:1%;width:98%;height:16px;filter:alpha(opacity=30);opacity:0.3;}
#imageFlow .arrow-left{position:absolute;}
#imageFlow .arrow-right{position:absolute;right:0px;}
#imageFlow .bar{position:absolute;height:16px;left:25px;}
</style>
<head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">

<div class="category_1">
  <div id="imageFlow">                
    <div class="bank">
        <a href="#" rel="images/ebook11.jpg" title=" ">2016第一期</a>
        <a href="#" rel="images/ebook12.jpg" title=" ">2016第二期</a>
        <a href="#" rel="images/ebook13.jpg" title=" ">2016第三期</a>
        <a href="#" rel="images/ebook14.jpg" title=" ">2016第四期</a>
        <a href="#" rel="images/ebook05.jpg" title=" ">2016第五期</a>
        <a href="#" rel="images/ebook06.jpg" title=" ">2016第六期</a>
        <a href="#" rel="images/ebook07.jpg" title=" ">2016第七期</a>
        <a href="#" rel="images/ebook08.jpg" title=" ">2016第八期</a>
        <a href="#" rel="images/ebook09.jpg" title=" ">2016第九期</a>
        <a href="#" rel="images/ebook10.jpg" title=" ">2016第十期</a>
    </div>
    <div class="text">
        <div class="title">Loading</div>
        <div class="legend">Please wait...</div>
    </div>
    <div class="scrollbar">
        <img class="track" src="images/sb.gif" alt="">
        <img class="arrow-left" src="images/sl.gif" alt="">
        <img class="arrow-right" src="images/sr.gif" alt="">
        <img class="bar" src="images/sc.gif" alt="">
    </div>  
  </div>
</div>
<script type="text/javascript" src="js/imageFlow.js"></script>
</body>
</html>

在线测试

打包下载

zyytaiyame

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ImageFlow 图片显示插件-兼容IE8和Chrome浏览器

ImageFlow 图片显示插件兼容IE8和Chrome浏览器好像有时里面图片放大的比较大，不知道为什么，没仔细研究，插件很强大，有待深入研究<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
复制链接

扫一扫