行业资讯

首页 > 新闻资讯 > 行业资讯 > JavaScript 仿Apple产品展示滑动条效果

JavaScript 仿Apple产品展示滑动条效果

2025-05-03 16:16:45   来源:   阅读:

JavaScript 仿Apple产品展示【应用技巧】

在仿Apple滑动条产品展示效果中,可以看到MaxValue设成了内容容器的scrollWidth和clientWidth之差:

MaxValue: $("idContent").scrollWidth - $("idContent").clientWidth, 其实这个值就是内容容器scrollLeft的比较大值,这样在滑动时要设置的内容容器的scrollLeft刚好就是GetValue方法的值了(预览效果2也一样):

onMove: function(){ $("idContent").scrollLeft = this.GetValue(); } 预览效果2中,滑块的高度也特别设置过:

$("idBar2").style.height = $("idSlider2").clientHeight * Math.min($("idContent2").clientHeight / $("idContent2").scrollHeight, 1) - 4 + "px"; 其实就是使内容跟内容容器的高度之比等于滑块跟滑动容器之比,当然这个比不能大于1,否则就滑块高度就超过容器高度了,里面的4是边框宽度。

这样的好处是滑块会根据实际内容自动设置大小,就像一般的滚动条,内容越多滚动条就越小,反之就越大,这利于用户体验。

ps:仿Apple那个为了突出效果所以没有设置,实际应用中也应该这样设置一下。

预览效果3中,从GetValue和GetPercent取得的数有可能是很长的小数,所以显示时必须处理一下。这里看到程序中parseInt使用了两个参数,而且第二个参数是10,是不是多余的呢?
不是的,因为手册上说了:

如果没有提供,则前缀为 '0x' 的字符串被当作十六进制,前缀为 '0' 的字符串被当作八进制。所有其它字符串都被当作是十进制的。

而对于手动输入的数字,前面加了个0也是很普通的情况,这样无意间就会变成八进制了。

使用说明&源码下载

实例化一个滑动条对象,需要两个参数,分别是滑动容器和滑块(滑块要在容器里面哦):

var sld = new Slider("idSlider", "idBar") 有以下这些可选参数和属性:

属性:默认值//说明

MinValue: 0,//最小值

MaxValue: 100,//比较大值

WheelSpeed: 5,//鼠标滚轮速度,越大越快(0则取消鼠标滚轮控制)

KeySpeed: 50,//方向键滚动速度,越大越慢(0则取消方向键控制)

Horizontal: true,//是否水平滑动

RunTime: 20,//自动滑移的延时时间,越大越慢

RunStep: 2,//自动滑移每次滑动的百分比

Ease: false,//是否缓动

EaseStep: 5,//缓动等级,越大越慢

onMin: function(){},//最小值时执行

onMax: function(){},//比较大值时执行

onMid: function(){},//中间值时执行

onDragStart:function(){},//拖动开始时执行

onDragStop: function(){},//拖动结束时执行

onMove: function(){}//滑动时执行 点击下载此文件

本文《JavaScript 仿Apple产品展示滑动条效果》发布于君君营销文章,作者:admin,如若转载,请注明出处:/news/hyzx/64505.html,否则禁止转载,谢谢配合!

联系我们

18221295083
上海市浦东新区航头镇沪南公路4583号
上海市青浦区蟠龙路899号
18221295083
zhanglongfu@ijunjun.com
  • 联系我们
  • 关于我们
  • 二维码


    官方微信

    小程序
    返回
    顶部
    咨询

    扫描微信二维码,添加好友

    电话

    24小时电话:

    18221295083
    微信

    官方微信