/**
* 滚动HTML集合对象
* @param {Element} container 容器节点
* @param {Number} unitLength 滚动宽度,等于容器内子对象的宽度,子对象宽度必须一致
* @param {Number} speed 每10毫秒移动的像素值
* @param {String} direction 滚动方向(up, down, left, right)
* @param {Number} containerRange 容器可视范围 width - paddingLeft - paddingRight 或者 height - paddingTop - paddingBottom
*/
Scroll = function(container, unitLength, speed, direction, containerRange){
var count = (function(){
var qty = 0;
for(var i=0,l=container.childNodes.length;i<l;i++) {
if(container.childNodes[i].nodeType==1)qty++;
}
return qty;
})();
var container_length = (unitLength * count * 2);
this.getContainer = function(){
return container;
}
this.getCount = function(){return count;};
/**
*@param {String} direction 移动方向
*@param {Number} perMoveCount 每次移动对象个数
*/
this.moveOnce = function(direction, perMoveCount, callback){
if(isNaN(parseInt(perMoveCount)))perMoveCount = 1;
var hash = {
left: container.style.marginLeft,
right: container.style.marginLeft,
up: container.style.marginTop,
down: container.style.marginTop
}
var v = parseInt(hash[direction]);
var moved_length = Math.abs(v - init_pos[direction]);
if(moved_length == unitLength * count)this.reset(direction);
var remainder = count % perMoveCount;
if(remainder){
var full_times = Math.floor(count / perMoveCount) * perMoveCount;
var thisObj = this;
this.move(speed, full_times * unitLength, direction, function(){
thisObj.move(speed, remainder * unitLength, direction, callback);
});
}else{
this.move(speed, perMoveCount * unitLength, direction, callback);
}
}
this.init = function(){
var childNodes = container.innerHTML;
container.style.display = "block";
container.innerHTML = childNodes + childNodes;
if(direction == 'up' || direction == 'down'){
container.style.height = container_length + "px";
}else if(direction == 'left' || direction == 'right'){
container.style.width = container_length + "px";
}
this.reset(direction);
}
this.scroll = function(){
var thisObj = this;
this.move(speed, unitLength * count, direction, function(){
//console.info("scrolling");
thisObj.reset(direction);
thisObj.scroll(direction);
});
}
var init_pos = {
left: 0,
right: -(container_length - containerRange),
up: 0,
down: -(container_length - containerRange)
}
/**
*重置对象到初始位置
*/
this.reset = function(direction){
//console.info("reset");
if(direction == "left" || direction == "right"){
container.style.marginLeft = init_pos[direction] + 'px';
}else if(direction == "up" || direction == "down"){
container.style.marginTop = init_pos[direction] + 'px';
}
}
}
/**
* 移动对象
* @private
* @param {Element} moveObj 移动对象
* @param {Number} speed 每10毫秒移动像素
* @param {String} direction 移动方向
* @param {Function} onMoved 移动后调用
*/
Scroll.prototype.move= function(speed, distance, direction, onMoved){
var moveObj = this.getContainer();
var i = Math.abs(distance);
var scroll_px = speed;
var handler = function(){
if(direction == "left"){
moveObj.style.marginLeft = parseInt(moveObj.style.marginLeft) - scroll_px + 'px';
}else if(direction == "right"){
moveObj.style.marginLeft = parseInt(moveObj.style.marginLeft) + scroll_px + 'px';
}else if(direction == "up"){
moveObj.style.marginTop = parseInt(moveObj.style.marginTop) - scroll_px + 'px';
}else if(direction == "down"){
moveObj.style.marginTop = parseInt(moveObj.style.marginTop) + scroll_px + 'px';
}
i -= scroll_px;
if(i > 0 && i < scroll_px){
scroll_px = i;
}
if (i > 0) {
window.setTimeout(handler, 10);
}else{ // == 0
if(typeof(onMoved) == "function")onMoved();
}
}
window.setTimeout(handler, 10);
}
/*
----------------------单击按钮向右滚动示例--------------------------
<input id="btnScrollRight" name="" type="button" class="btn_goto"/>
<div style="width:636px;overflow:hidden;">
<div id="scroll_prizes">
<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='1' width="150" height="150" border="0" alt="" /></a></div>
<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='2' width="150" height="150" border="0" alt="" /></a></div>
<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='3' width="150" height="150" border="0" alt="" /></a></div>
<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='4' width="150" height="150" border="0" alt="" /></a></div>
<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='5' width="150" height="150" border="0" alt="" /></a></div>
<div class="list"><a href=""><img src="../imgaes/index/img1x.gif" alt='6' width="150" height="150" border="0" alt="" /></a></div>
</div>
</div>
<script>
var mq1 = new Scroll(document.getElementById("scroll_prizes"), 159, 10, "right", 636, function(){});
mq1.init();
//mq1.scroll();
var mq1_is_moving = false;
document.getElementById("btnScrollRight").onclick = function(){
//this.moveOnce = function(direction, perMoveCount, callback){
if(mq1_is_moving)return;
mq1_is_moving = true;
mq1.moveOnce("right", 4, function(){
mq1_is_moving = false;
});
}
</script>
---------------------循环向上滚动示例-------------------------------
<div class="co_list" style="height:566px;overflow:hidden;padding:20px 30px">
<div style="height:536px;overflow:hidden;">
<div id="marquee2">
<a href=""><img src="../imgaes/index/co_adv11.png" width="150" height="55" border="0" alt=""/></a>
<a href=""><img src="../imgaes/index/co_adv12.png" width="150" height="55" border="0" alt=""/></a>
<a href=""><img src="../imgaes/index/co_adv13.png" width="150" height="55" border="0" alt=""/></a>
<a href=""><img src="../imgaes/index/co_adv14.png" width="150" height="55" border="0" alt=""/></a>
<a href=""><img src="../imgaes/index/co_adv15.png" width="150" height="55" border="0" alt=""/></a>
</div>
</div>
</div>
<script>
mq2 = new Scroll(document.getElementById("marquee2"), 69, 2, "up", 536, function(){});
mq2.init();
mq2.scroll();
</script>
-------------------------循环向右滚动示例-------------------------
<div style="width:615px;overflow:hidden;height:110px;">
<div id="marquee1">
<div class="list">
<img src="../imgaes/index/co_adv11.png" width="201" height="101" border="0" alt="" />
</div>
<div class="list">
<img src="../imgaes/index/co_adv12.png" width="201" height="101" border="0" alt="" />
</div>
<div class="list">
<img src="../imgaes/index/co_adv13.png" width="201" height="101" border="0" alt="" />
</div>
<div class="list">
<img src="../imgaes/index/co_adv14.png" width="201" height="101" border="0" alt="" />
</div>
<div class="list">
<img src="../imgaes/index/co_adv15.png" width="201" height="101" border="0" alt="" />
</div>
</div>
</div>
<script>
var mq1 = new Scroll(document.getElementById("marquee1"), 211, 2, "right", 615, function(){});
mq1.init();
mq1.scroll();
</script>
*/
分享到:
相关推荐
使用QT实现一个消息滚动显示的widget
比较全面介绍widget由来的资料 Widget是一种小插件,通常以小窗或小框的形式出现在网页、系统桌面、手机等地方。Widget通常使用的是HTML、Javascript、Flash或者iframe方式嵌入。一个界面可以有多个widget,通过不同...
Widget由来、发展、用途、示例、开发 Widget是一种小插件,通常以小窗或小框的形式出现在网页、系统桌面、手机等地方。Widget通常使用的是HTML、Javascript、Flash或者iframe方式嵌入。一个界面可以有多个widget,...
使用appWidget启动一个Activity
widget现状分析报告,分析当前widget的现状,并对运营商的widget提出建议
Widget是一种小插件,通常以小窗或小框的形式出现在网页、系统桌面、手机等地方。Widget通常使用的是HTML、Javascript、Flash或者iframe方式嵌入。一个界面可以有多个widget,通过不同的widget可以在一个界面上分别...
Widget
widget业务测试数据widget业务测试数据widget业务测试数据widget业务测试数据widget业务测试数据widget业务测试数据
本文主要介绍了桌面动态图库APP Widget设计过程。在设计之前,首先根据UI设计的原则,给出了合理的需求分析,确定了软件要实现的功能要求。然后根据功能要求,阐述了Widget的框架设计,包括桌面布局设计、实现Widget...
SP Widget 软件使用手册 SP Widget 将提供 SILICON POWER 存储装置更多实用的软件功能,帮助您随时 能轻易地执行个人数据的备份加密。 有了 SP Widget,您将可使用 SILICON POWER 移动存储装置执行如下工作: 「我...
widget入门教程 android widget
Widget工具是由Yahoo!所推出的一款免费桌面应用程序平台,是一种运用了Javascript技术的开放源码平台,支持Windows和MacOS X操作系统。 Yahoo! Widget工具提供了数千种桌面迷你应用程序,这些在Yahoo! Widget工具...
这是一个MP3程序,这个程序不仅仅带Activity,还有一个桌面Widget,同时是可以运行的源代码。可以通过桌面Widget控制后台音乐的播放,也可以点击Widget上面的LOGO进入应用程序。 涉及到了,一个基本的widget程序的大...
widget开发的大不分资料和工具 还有开发必备的东西,要好好品尝啊!
自己从网上下载的PS做的axure的 widget ,发上来跟大家分享一下
qt5 动态添加子widget
4.11 多WIDGET应用并发和交互 7 4.12 用户注册认证 7 4.13 引擎管理能力 7 4.14 WIDGET应用管理 7 4.15 终端管理功能(可选) 8 4.16 信息发布能力(可选) 8 4.17 引擎插件管理能力 8 4.18 运营商业务能力调用 8 ...
制作widget的入门级别书目~可供参考~雅虎widget
这里帮大家解决个小难题~环境变量需要你的本机配好~直接就能跑~祝君好运~
dcharts-widget