87,907
社区成员
发帖
与我相关
我的任务
分享自己写的jquery自定义滚动条插件有问题，各位帮忙看看问题出在哪儿？
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条</title>
<style type="text/css">
body { background: #eee; font-size: 12px; margin: 0; padding: 0;}
ul,li,ol{ list-style: none; margin: 0; padding: 0;}
#scrollplay{ width: 707px; height: 194px; position: relative; margin: 20px auto;}
#slider { width: 30px; height: 400px; background: black; position: absolute; right: 10px; top: 10px; }
#arrow { width: 30px; height: 30px; background: red; position: absolute; right: 0; top: 0;}
#contain { width: 398px; height: 398px; position: absolute; left: 50px; top: 10px; border: 1px solid green; overflow: hidden; }
#inner { position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<div id="scrollplay">
<div id="slider">
<div id="arrow"></div>
</div>
<div id="contain">
<div id="inner">
自上周五晚上，微博突然曝出微软正式发布iOS版Office后，这个周末互联网上几乎都充斥着与之相关的报道，看到这些报道笔者脑海中首先想到的不是微软怎么样怎么样，而是苹果，觉得苹果必然也是水到渠成将会推出低端iPhone。
由微软发布iOS版Office联想到苹果必然会推出低端iPhone，笔者一开始也挺莫名其妙为什么会有这个观点，直到后来才后知后觉的想明白这两家公司是如此地相像。正如苹果一样，微软一开始也是否定不会推出iOS版Office，并声称通过iPhone和iPad，Office 365足可以给苹果用户带来极佳的服务，而结果呢？
再回到苹果身上，苹果全球副总裁利普·席勒在今年接受采访时确实表示，苹果不会像其他公司一样推出很多产品，因为这不是苹果公司产品发展方向，他们要做智能手机领导者，对市场份额不是特别关心……但这是不是百分百打包票确定苹果不会推出低端iPhone？这真的很难说！
苹果推出低端iPhone手机的必然性
上面说了这么多，虽然只是引子，但全是主观的意见，为了令人信服，笔者给出以下理由：
1.低端iPhone有存在的必要：一旦有人表示苹果可能真的会发布低端iPhone，很多人都称低端iPhone没有存在的必要，他们称，包括以前的iPhone 3GS以及一直在售的iPhone4和iPhone 4S就是低端iPhone，但实际上此一时非彼一时，为什么这么讲呢？以前苹果一部手机可以打天下，主要还是那时Android表现还不算强劲，而现在Android新机不断，在相同价格下，有谁还愿意去买一两年前的老手机而不去选购Android新机？尤其是在现在智能手机领域竞争如此激烈，如果苹果还是坚持每年推出一款iPhone的话，人们会逐渐忘记苹果。特别是在三星成为全球最大手机厂商后，今年5月份三星超越苹果成为美国市场最大智能手机厂商，而这也是自iPhone在美国上市后，三星在美国智能手机出货量上首次超越苹果。如果苹果有新机型，哪怕是低端iPhone，那也会令用户眼前一亮，挽回一定的市场份额。
2.智能手机的胜利取决于生态系统：在上面提到低端iPhone能挽回一定的市场份额，或许不少人会嗤之以鼻地表示，苹果要的是利润率而不是市场份额，有再高的市场份额而无利润率也是废品一个。实际上利润率确实重要，但能获得这么高的利润率取决于良好的用户体验和开发者为其开发众多应用，而这又取决于具有一定市场份额的生态系统。随着Windows Phone 8慢慢发展和Android不断扩大，必然会进一步压缩iOS系统份额，而当iOS市场份额下降到一定程度时，开发者就会考虑开发应用是否还是优先为iOS开发？如果不是，用户就会想Android系统上有这应用，而iOS上为什么没有？这必然带来用户体验的下降，而推出低端iPhone不仅可以避免这一切，还可以增加App Store的收入。
3.低端手机≠垃圾手机 不会影响苹果品牌：实际上这一点不属于苹果必然会推出iPhone手机的理由，但鉴于很多人质疑低端手机会降低苹果其高端品牌，笔者认为苹果的低端手机≠垃圾手机，它仍然有完善的iOS系统和较好的用户体验，所降级的不过是硬件而已，这样的一部手机会影响苹果品牌吗？另外应该有人会接着表示，如果苹果推出低端手机会影响高端用户心中的品牌，实际上这种好面子的心理只有中国才这么普及，不能因中国就以偏概全地认为苹果品牌会在全球受影响。再者，就算苹果不推低端iPhone，国内用两三个月工资买一部iPhone撑面子的人也大有人在。
4.推出低端iPhone也是苹果自身发展需要：苹果优秀而又高端地品牌是大量创新所造就的，而现在苹果早已无法带来颠覆式创新，所以苹果只能进行渐进式地微创新，这从最近刚发布的iOS7系统上便可略见一斑。无法带来颠覆式创新，这种渐进式地微创新必然导致苹果与其他品牌智能手机差距越来越小，这样便无从保证iPhone较高的利润率，因此推出低端iPhone实现利益最大化，这也是苹果自身需要。
5.低端iPhone可以细分市场：三星在智能手机领域获得成功，可以说是细分市场的功劳。细心的朋友可以发现，不论用户需要什么价位、多大屏幕的手机，总是可以找到一部适合自己的三星手机，这铸就了三星的霸主地位。在如今的市场形势下，既然无法带来颠覆性创新拉开差距，与其被Android手机蚕食手机市场份额，还不如学习当初推出iPad Mini一样，自己推出另外的产品细分市场，因此苹果也需要在新旧iPhone之外，再推出一部拥有合适价位和屏幕尺寸不同的手机。
此外，同时是否也可以大胆想下，这样的低端iPhone是否也会用来取代iPod呢？根据2013年苹果发布的Q2财报显示，iPod销量和营收都同期下滑，结合这款产品已走向没落、进化空间已经很小，与其这样没落被其他人替代，还不如自己推出替代品，当然这只是猜想。
6.可以挖掘iOS系统价值：如果顺利推出低端iPhone的话，市场份额扩大的苹果则可以进一步挖掘iOS系统价值，比如向用户提供免费的增值服务，挖掘和分析其中的各种数据与第三方公司进行合作等等。
7.苹果需要向软件服务转变：以前那个硬件为主软件为辅的时代已逐渐远去，在如今云计算快速发展的今天，苹果需要向服务方向转变。因为现在的苹果不太可能向之前那样，每隔几年就重新定义或开辟一个行业，现在的苹果的产品大多数也只是在配置上进行升级，它只能说很酷很不错，而没有了那种给人惊喜的感觉。既然颠覆和引导世界潮流的可能性变小，那么库克也必然会将苹果公司的重心向软件和服务方向转变。那么它靠什么提高市场份额来提供自己的软件服务？考虑到苹果封闭的生态系统，提供低端iPhone是不得不考虑的问题。
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/scrollplay.js"></script>
<script type="text/javascript">
$('#arrow').scrollplay({
attachevent:true, //切换方向
onmousewheel:false //是否鼠标滚动
});
</script>
</body>
</html>
scrollplay.js
;(function($){
$.fn.scrollplay=function(options){
var defaults={
onmousewheel:false,
attachevent:false
};
var opt=$.extend(defaults,options);
var slider= $('#slider'),
arrow= $(this),
contain= $('#contain'),
inner= $('#inner'),
iMaxHeight = slider.outerHeight() - arrow.outerHeight();
if(opt.onmousewheel){
slider.onmousewheel = fn1;
contain.onmousewheel = fn1;
}
if(opt.attachevent){
$('#arrow').delegate('this','DOMMouseScroll',function(ev){
$(this).fn1(ev);
});
$('#inner').delegate('this','DOMMouseScroll',function(ev){
$(this).fn1(ev);
});
}
function fn1(ev) {
var ev = ev || event;
var that=$(this).offset();
var iBtn = true;
if (ev.wheelDelta) {
iBtn = ev.wheelDelta > 0 ? true : false;
} else {
iBtn = ev.detail < 0 ? true : false;
}
var T = 0;
if (iBtn) {
T = that.top - 10;
} else {
T = that.top + 10;
}
if (T < 0) {
T = 0;
} else if (T > iMaxHeight) {
T = iMaxHeight;
}
var iScale = parseInt((T / iMaxHeight)*100);
document.title = iScale;
inner.css('top','((contain.outerHeight() - inner.outerHeight()) * iScale)'+' px');
arrow.css('top','T'+ 'px');
if (ev.preventDefault) {
ev.preventDefault();
}
return false;
}
arrow.mousedown(function(ev){
var ev = ev || event;
var that=$(this).offset();
var disY = ev.clientY - that.top;
var iMaxHeight = slider.outerHeight() - arrow.outerHeight();
arrow.mousemove(function(ev){
var ev = ev || event;
var T = ev.clientY - disY;
if (T < 0) {
T = 0;
} else if (T > iMaxHeight) {
T = iMaxHeight;
}
var contain= $('#contain'),
inner= $('#inner');
var iScale =parseInt((T / iMaxHeight)*100);
document.title = iScale;
var dsHeight=-(contain.outerHeight() - inner.outerHeight());
inner.css('top','(dsHeight * iScale)'+' px');
arrow.css('top','T'+ 'px');
});
$(document).mouseup(function(ev){
$(document).mousemove=null;
});
return false;
});
};
})(jQuery);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条</title>
<style type="text/css">
body { background: #eee; font-size: 12px; margin: 0; padding: 0;}
ul,li,ol{ list-style: none; margin: 0; padding: 0;}
#scrollplay{ width: 707px; height: 194px; position: relative; margin: 20px auto;}
#slider { width: 30px; height: 400px; background: black; position: absolute; right: 10px; top: 10px; }
#arrow { width: 30px; height: 30px; background: red; position: absolute; right: 0; top: 0;}
#contain { width: 398px; height: 398px; position: absolute; left: 50px; top: 10px; border: 1px solid green; overflow: hidden; }
#inner { position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<div id="scrollplay">
<div id="slider">
<div id="arrow"></div>
</div>
<div id="contain">
<div id="inner">
自上周五晚上，微博突然曝出微软正式发布iOS版Office后，这个周末互联网上几乎都充斥着与之相关的报道，看到这些报道笔者脑海中首先想到的不是微软怎么样怎么样，而是苹果，觉得苹果必然也是水到渠成将会推出低端iPhone。
由微软发布iOS版Office联想到苹果必然会推出低端iPhone，笔者一开始也挺莫名其妙为什么会有这个观点，直到后来才后知后觉的想明白这两家公司是如此地相像。正如苹果一样，微软一开始也是否定不会推出iOS版Office，并声称通过iPhone和iPad，Office 365足可以给苹果用户带来极佳的服务，而结果呢？
再回到苹果身上，苹果全球副总裁利普·席勒在今年接受采访时确实表示，苹果不会像其他公司一样推出很多产品，因为这不是苹果公司产品发展方向，他们要做智能手机领导者，对市场份额不是特别关心……但这是不是百分百打包票确定苹果不会推出低端iPhone？这真的很难说！
苹果推出低端iPhone手机的必然性
上面说了这么多，虽然只是引子，但全是主观的意见，为了令人信服，笔者给出以下理由：
1.低端iPhone有存在的必要：一旦有人表示苹果可能真的会发布低端iPhone，很多人都称低端iPhone没有存在的必要，他们称，包括以前的iPhone 3GS以及一直在售的iPhone4和iPhone 4S就是低端iPhone，但实际上此一时非彼一时，为什么这么讲呢？以前苹果一部手机可以打天下，主要还是那时Android表现还不算强劲，而现在Android新机不断，在相同价格下，有谁还愿意去买一两年前的老手机而不去选购Android新机？尤其是在现在智能手机领域竞争如此激烈，如果苹果还是坚持每年推出一款iPhone的话，人们会逐渐忘记苹果。特别是在三星成为全球最大手机厂商后，今年5月份三星超越苹果成为美国市场最大智能手机厂商，而这也是自iPhone在美国上市后，三星在美国智能手机出货量上首次超越苹果。如果苹果有新机型，哪怕是低端iPhone，那也会令用户眼前一亮，挽回一定的市场份额。
2.智能手机的胜利取决于生态系统：在上面提到低端iPhone能挽回一定的市场份额，或许不少人会嗤之以鼻地表示，苹果要的是利润率而不是市场份额，有再高的市场份额而无利润率也是废品一个。实际上利润率确实重要，但能获得这么高的利润率取决于良好的用户体验和开发者为其开发众多应用，而这又取决于具有一定市场份额的生态系统。随着Windows Phone 8慢慢发展和Android不断扩大，必然会进一步压缩iOS系统份额，而当iOS市场份额下降到一定程度时，开发者就会考虑开发应用是否还是优先为iOS开发？如果不是，用户就会想Android系统上有这应用，而iOS上为什么没有？这必然带来用户体验的下降，而推出低端iPhone不仅可以避免这一切，还可以增加App Store的收入。
3.低端手机≠垃圾手机 不会影响苹果品牌：实际上这一点不属于苹果必然会推出iPhone手机的理由，但鉴于很多人质疑低端手机会降低苹果其高端品牌，笔者认为苹果的低端手机≠垃圾手机，它仍然有完善的iOS系统和较好的用户体验，所降级的不过是硬件而已，这样的一部手机会影响苹果品牌吗？另外应该有人会接着表示，如果苹果推出低端手机会影响高端用户心中的品牌，实际上这种好面子的心理只有中国才这么普及，不能因中国就以偏概全地认为苹果品牌会在全球受影响。再者，就算苹果不推低端iPhone，国内用两三个月工资买一部iPhone撑面子的人也大有人在。
4.推出低端iPhone也是苹果自身发展需要：苹果优秀而又高端地品牌是大量创新所造就的，而现在苹果早已无法带来颠覆式创新，所以苹果只能进行渐进式地微创新，这从最近刚发布的iOS7系统上便可略见一斑。无法带来颠覆式创新，这种渐进式地微创新必然导致苹果与其他品牌智能手机差距越来越小，这样便无从保证iPhone较高的利润率，因此推出低端iPhone实现利益最大化，这也是苹果自身需要。
5.低端iPhone可以细分市场：三星在智能手机领域获得成功，可以说是细分市场的功劳。细心的朋友可以发现，不论用户需要什么价位、多大屏幕的手机，总是可以找到一部适合自己的三星手机，这铸就了三星的霸主地位。在如今的市场形势下，既然无法带来颠覆性创新拉开差距，与其被Android手机蚕食手机市场份额，还不如学习当初推出iPad Mini一样，自己推出另外的产品细分市场，因此苹果也需要在新旧iPhone之外，再推出一部拥有合适价位和屏幕尺寸不同的手机。
此外，同时是否也可以大胆想下，这样的低端iPhone是否也会用来取代iPod呢？根据2013年苹果发布的Q2财报显示，iPod销量和营收都同期下滑，结合这款产品已走向没落、进化空间已经很小，与其这样没落被其他人替代，还不如自己推出替代品，当然这只是猜想。
6.可以挖掘iOS系统价值：如果顺利推出低端iPhone的话，市场份额扩大的苹果则可以进一步挖掘iOS系统价值，比如向用户提供免费的增值服务，挖掘和分析其中的各种数据与第三方公司进行合作等等。
7.苹果需要向软件服务转变：以前那个硬件为主软件为辅的时代已逐渐远去，在如今云计算快速发展的今天，苹果需要向服务方向转变。因为现在的苹果不太可能向之前那样，每隔几年就重新定义或开辟一个行业，现在的苹果的产品大多数也只是在配置上进行升级，它只能说很酷很不错，而没有了那种给人惊喜的感觉。既然颠覆和引导世界潮流的可能性变小，那么库克也必然会将苹果公司的重心向软件和服务方向转变。那么它靠什么提高市场份额来提供自己的软件服务？考虑到苹果封闭的生态系统，提供低端iPhone是不得不考虑的问题。
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/scrollplay.js"></script>
<script type="text/javascript">
$('#arrow').scrollplay({
attachevent:true, //切换方向
onmousewheel:false //是否鼠标滚动
});
</script>
</body>
</html>
scrollplay.js
;(function($){
$.fn.scrollplay=function(options){
var defaults={
onmousewheel:false,
attachevent:false
};
var opt=$.extend(defaults,options);
var slider= $('#slider'),
arrow= $(this),
contain= $('#contain'),
inner= $('#inner'),
iMaxHeight = slider.outerHeight() - arrow.outerHeight();
if(opt.onmousewheel){
slider.onmousewheel = fn1;
contain.onmousewheel = fn1;
}
if(opt.attachevent){
$('#arrow').delegate('this','DOMMouseScroll',function(ev){
$(this).fn1(ev);
});
$('#inner').delegate('this','DOMMouseScroll',function(ev){
$(this).fn1(ev);
});
}
function fn1(ev) {
var ev = ev || event;
var that=$(this).offset();
var iBtn = true;
if (ev.wheelDelta) {
iBtn = ev.wheelDelta > 0 ? true : false;
} else {
iBtn = ev.detail < 0 ? true : false;
}
var T = 0;
if (iBtn) {
T = that.top - 10;
} else {
T = that.top + 10;
}
if (T < 0) {
T = 0;
} else if (T > iMaxHeight) {
T = iMaxHeight;
}
var iScale = parseInt((T / iMaxHeight)*100);
document.title = iScale;
inner.css('top','((contain.outerHeight() - inner.outerHeight()) * iScale)'+' px');
arrow.css('top','T'+ 'px');
if (ev.preventDefault) {
ev.preventDefault();
}
return false;
}
arrow.mousedown(function(ev){
var ev = ev || event;
var that=$(this).offset();
var disY = ev.clientY - that.top;
var iMaxHeight = slider.outerHeight() - arrow.outerHeight();
arrow.mousemove(function(ev){
var ev = ev || event;
var T = ev.clientY - disY;
if (T < 0) {
T = 0;
} else if (T > iMaxHeight) {
T = iMaxHeight;
}
var contain= $('#contain'),
inner= $('#inner');
var iScale =parseInt((T / iMaxHeight)*100);
document.title = iScale;
var dsHeight=-(contain.outerHeight() - inner.outerHeight());
inner.css('top','(dsHeight * iScale)'+' px');
arrow.css('top','T'+ 'px');
});
$(document).mouseup(function(ev){
$(document).mousemove=null;
});
return false;
});
};
})(jQuery);
...全文
请发表友善的回复…
发表回复
