注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

一款兼容IE6并带有多图横向滚动的jquery特效

jQuery插件 fishcity 964浏览

一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果,为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了。适用浏览器:IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。下面来看下如何使用。

构建html

<div class="box">
    <div class="picbox">
	<ul class="piclist mainlist">
	    <li><a href="http://www.jqcool.net" target="_blank"><img src="images/1.jpg" width="220" height="105" /></a></li>
	    <li><a href="http://www.jqcool.net" target="_blank"><img src="images/2.jpg" /></a></li>
	    <li><a href="http://www.jqcool.net" target="_blank"><img src="images/3.jpg" /></a></li>
	    <li><a href="http://www.jqcool.net" target="_blank"><img src="images/4.jpg" /></a></li>
	    <li><a href="http://www.jqcool.net" target="_blank"><img src="images/1.jpg" /></a></li>
            <li><a href="http://www.jqcool.net" target="_blank"><img src="images/2.jpg" /></a></li>
	    <li><a href="http://www.jqcool.net" target="_blank"><img src="images/3.jpg" /></a></li>
	    <li><a href="http://www.jqcool.net" target="_blank"><img src="images/4.jpg" /></a></li>
	</ul>
        <ul class="piclist swaplist"></ul>
    </div>
    <div class="og_prev"></div>
    <div class="og_next"></div>
</div>

构建CSS

.box{ width:980px; margin:0 auto; position:relative; overflow:hidden; _height:100%;}
.picbox{ width:980px; height:115px; overflow:hidden; position:relative;}
.piclist{ height:115px;position:absolute; left:0px; top:0px}
.piclist li{ background:#eee; margin-right:20px; padding:5px; float:left;}
.swaplist{ position:absolute; left:-3000px; top:0px}
.og_prev,.og_next{ width:30px; height:50px; background:url(../images/icon.png) no-repeat; background:url(../images/icon_ie6.png) no-repeat\9; position:absolute; top:33px; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;}
.og_prev{ background-position:0 -60px; left:4px;}
.og_next{ background-position:0 0; right:4px;}

no-repeat\9 是针对IE9的兼容写法,其它的都是常用属性,不多解释了。

引入JS

<script type="text/javascript" src="http://ajax. /ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>

好了,现在可以打开浏览器来测试下了,zzsc.js有简单的注释,有兴趣的朋友可以研究下。

转载请注明:jQ酷 » 一款兼容IE6并带有多图横向滚动的jquery特效

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。