手机屏幕自适应渐变切换焦点图

时间：2014-03-18 来源：科e互联

特效说明：

一款带点击按钮手机屏幕自适应渐变切换焦点图网页特效，自适应所有分辨率手机、支持屏幕旋转自适应焦点图、幻灯片特效。一般手机网站都采用图片100%宽度设置达到自适应效果，该焦点图通过简单的等比换算实现图片100%自适应屏幕并自动渐变轮播。效果流畅、推荐使用！该特效基于：jquery.SuperSlide.js插件。（兼容测试：宽度大于320px手机、移动设备等浏览器）

使用方法：

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>之间。

<script language="javascript">
jQuery(".slideBox").slide({mainCell:".bd ul",effect:"fold",autoPlay:true});
function autFun(){
   var mW=$(".mBan").width();
   var mBL=460/218;
   $(".slideBox .bd").css("height",mW/mBL);
   $(".slideBox .bd img").css("width",mW);
   $(".slideBox .bd img").css("height",mW/mBL);
}
setInterval(autFun,1);
</script>

标签自适应宽屏焦点图渐变切换手机焦点图

预览收藏分享评论