如何使用CSS&HTML实现类似音量控制的拖动条

html-css084

如何使用CSS&HTML实现类似音量控制的拖动条,第1张

提供两种处理方式:

1.使用jplayer,需要额外引入几个脚本文件和样式文件即可搞定,可以自定义样式,具体参考相关文档;

2.使用audio标签实现,将其隐藏(透明处理),拖曳操作实际是操作的audio标签,但是事件回调控制显示,这种方式可以很少的代码来控制;

如果仅仅是一个点击播放,暂停之类的简单功能,推荐使用方式2.如果操作复杂,还要设计播放列表啥的,推荐方式1.

很简单啊! 先获得滑动条的滑动事件,再里面调节音量就行了啊!

给个例子吧

先添加消息映射ON_WM_HSCROLL()

void CPlayerVideoDlg::OnHScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar)

{//滑动 控件 响应

switch(pScrollBar->GetDlgCtrlID())//处理多个CSliderCtrl控件

{

case IDC_SLIDER1://调节音量的CSliderCtrl的ID

UpdateData()

//m_volume是你自己关联好的CSliderCtrl控件,m_settings是播放器控制音量的

m_settings.put_volume(m_volume.GetPos())

UpdateData(FALSE)

break

default:

break

}

CDialog::OnHScroll(nSBCode, nPos, pScrollBar)

}