jQuery渐变切换带弹出层展示焦点图特效

时间：2014-04-16 来源：互联网

特效说明：

一款jQuery渐变切换带弹出层展示焦点图网页特效，透明渐变切换，可随意增减轮播图片数量，点击当前展示图片弹出层展示详细信息。滑动小按钮渐变切换图片。优点：透明渐变切换；点击图片弹出层展示；缺点：IE6支持弹出层不能关闭；可以做一个jpg关闭按钮解决该问题。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

使用方法：

1、调用CSS样式：
<link href="css/style.css" rel="stylesheet" type="text/css" />

2、调用JS插件代码：
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>


3、添加HTML代码：
将......之间的html和js代码；放在<body></body>之间。

js代码：
<script language="javascript">
jQuery(".slideBox").slide({mainCell:".bd ul",effect:"fold",autoPlay:true});

$(".showPro01").click(function(){$(".malrBox,.malrCon").show();$(".malrImg").eq(0).show()});
$(".showPro02").click(function(){$(".malrBox,.malrCon").show();$(".malrImg").eq(1).show()});
$(".showPro03").click(function(){$(".malrBox,.malrCon").show();$(".malrImg").eq(2).show()});
$(".showPro04").click(function(){$(".malrBox,.malrCon").show();$(".malrImg").eq(3).show()});
$(".showPro05").click(function(){$(".malrBox,.malrCon").show();$(".malrImg").eq(4).show()});

$(function(){
   $(".malrBox").height($(document).height());
   $(".malrClose").click(function(){$(".malrBox,.malrCon,.malrImg").hide();});
   })
</script>

标签 jQuery特效弹出层渐变切换

预览收藏分享评论