让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能
让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能
八哥
发布于 2018-01-18 17:11:51
发布于 2018-01-18 17:11:51
项目中有两份代码，一份是Main Site，一份是Mobile Site.Main Site里面主页使用到jQuery Tools Scrollable功能，让多张图片循环显示。但是这个功能移植到Mobile Site中，出现了一些问题。
因为本身要实现scrollable功能，必须有特定的html结构和css。然后调用scrollable()方法才能实现这个功能。一个基本scrollable实现代码可以参考jQuery Tools的官方文档。参考地址：http://jquerytools.org/demos/scrollable/
.scrollable{
position:relative;
overflow:hidden;
width:660px;
height:90px;
}可以看出我们必须设置最后可显示区域的宽和高。其实这个高度也就是所包含的图片的宽和高。在Mobile Site开发过程中，为了适应手机拥有不同的分辨率和大小尺寸。在开发过程必须对图片的width设置为100%，图片的height不设定。当用户使用不同的分辨率的手机查看站点时，浏览器自动缩放图片。但是问题就来了，我们要实现scrollabel功能，必须设置可见区域的宽度和高度。
所以需要在页面load之后就进行resize操作。基本解决办法是在调用scrollable()方法之前就进行图片的resize操作。但是这个解决方案有一个很的问题就是如何去判定当前要显示的三张图片的第一章显示的默认宽高。因为我们将图片的width设置为100%，height需要等浏览器解析完成才能取得。如果本身图片不是放在应用程序的目录，是从第三方或者云存储平台过来的话，取得图片的height都是为0，所以我们在项目代码中加入1秒的延时，通过延时1秒才去读取浏览器默认使用width：100%显示的图片的高度
代码如下：
<!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>
<title>Scrollable with resizing for mobile web</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width" />
<style type="text/css">
#mainContainer
{
margin: 0 auto;
width: 100%;
height: 100%;
}
#scrollable
{
/* required settings */
position: relative;
overflow: hidden;
}
.scrollable .items
{
/* this cannot be too large */
width: 20000em;
position: absolute;
}
.items div
{
float: left;
}
</style>
<!-- jQuery Library + UI Tools -->
<!--<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/jquery.tools.min.js"></script>-->
<script src="jquery.tools.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mainContainer">
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable" id="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-->
<div>
<img id="originalImg" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg"
width="100%" />
</div>
<!-- 2 -->
<div>
<img src="http://farm1.static.flickr.com/30/37446217_14bc95631a.jpg" width="100%" />
</div>
<!-- 3 -->
<div>
<img src="http://farm1.static.flickr.com/200/507751258_5f13e3d802.jpg" width="100%" />
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"></a>
</div>
<div>
Hello World.
</div>
<script type="text/javascript">
function widthUpdate() {
//$("body").width()即取得当前viewport的宽度
$("#scrollable .items div img").css("width", $("body").width());
var ModuleHeight = $("#scrollable .items div img").outerHeight();
if (ModuleHeight != 0) {
$("#scrollable").css("height", ModuleHeight);
}
}
$(window).resize(function () {
widthUpdate();
});
$(function () {
setTimeout(function () {
widthUpdate();
}, 1000);
//scrollable for images
setTimeout(function () {
$(".scrollable").scrollable({ speed: 400, circular: true }).navigator().autoscroll();
}, 2000);
});
</script>
</body>
</html>使用的代码如下，但是依旧解决不了这个问题。不知道大家是否有更好的解决办法。
<!-- .csharpcode, .csharpcode pre { font-size: medium; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2013-04-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。