js拖動滑塊瀏覽圖片功能
分享一段程式碼例項,它實現了拖動滑塊瀏覽圖片的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; list-style: none; } .box { width: 800px; height: 230px; border: 1px solid #000; box-sizing: border-box; position: relative; overflow: hidden; margin: 100px auto; } .box ul { width: 1950px; height: 200px; background-color: green; position: absolute; left: 0; top: 0px; } .box ul li { width: 130px; height: 100%; background-color: goldenrod; border: 1px solid #000; box-sizing: border-box; float: left; text-align: center; font-size: 28px; } .box .bottom { width: 100%; height: 30px; background-color: gainsboro; position: absolute; left: 0px; bottom: 0px; } .box span { width: 100px; height: 30px; border-radius: 15px; background-color: green; position: absolute; left: 0; bottom: 0px; } </style> <script> window.onload = function() { var fatherBox = document.getElementById('fatherBox'); var picBox = document.getElementById('picBox') var sliderSpan = document.getElementById('slider'); var sRatio=(fatherBox.offsetWidth-sliderSpan.offsetWidth)/(picBox.offsetWidth-fatherBox.offsetWidth); sliderSpan.onmousedown = function(event) { var event = event || window.event; var startX = event.clientX - sliderSpan.offsetLeft; document.onmousemove = function(event) { var event = event || window.event; var spanLeft = event.clientX - startX; if (spanLeft <= 0) { spanLeft = 0; } else if (spanLeft >= (fatherBox.offsetWidth - sliderSpan.offsetWidth)) { spanLeft = fatherBox.offsetWidth - sliderSpan.offsetWidth; } sliderSpan.style.left = spanLeft + 'px'; picBox.style.left = -spanLeft / sRatio + 'px'; return false; } document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; } return false; } } </script> </head> <body> <div id="fatherBox" class="box"> <ul id="picBox"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> <li>螞蟻部落七</li> <li>螞蟻部落八</li> <li>螞蟻部落九</li> <li>螞蟻部落十</li> <li>螞蟻部落十一</li> <li>螞蟻部落十二</li> <li>螞蟻部落十三</li> <li>螞蟻部落十四</li> <li>螞蟻部落十五</li> </ul> <div class="bottom"></div> <span id="slider"></span> </div> </body> </html>
相關文章
- 短視訊直播原始碼,拖動滑塊實現圖片驗證效果原始碼
- js 圖片瀏覽外掛原生JS
- 不同瀏覽器下圖片滾動效果的js瀏覽器JS
- js拖動實現左右圖片對比效果JS
- 直播平臺原始碼,圖片放大瀏覽功能原始碼
- 23.Quick QML-簡單且好看的圖片瀏覽器-支援多個圖片瀏覽、縮放、旋轉、滑輪切換圖片UI瀏覽器
- js 滾輪控制圖片縮放大小和拖動JS
- iOS圖片瀏覽器 - XLPhotoBrowser(類似微信多圖片瀏覽效果)iOS瀏覽器
- iOS圖片瀏覽器(功能強大/效能優越)iOS瀏覽器
- JXImageBrowser (圖片瀏覽器)瀏覽器
- js實現移動端圖片預覽:手勢縮放, 手勢拖動,雙擊放大...JS
- ApolloOne for mac(圖片瀏覽工具)Mac
- Swift 3 圖片瀏覽工具Swift
- ABase ImageBrowserActivity之圖片瀏覽
- 一起擼個朋友圈吧 - 圖片瀏覽(中)【圖片瀏覽器】瀏覽器
- 滾動滑鼠縮放圖片相容所有瀏覽器瀏覽器
- iSee Pro for Mac圖片瀏覽器Mac瀏覽器
- GraphicConverter for Mac(圖片瀏覽器)Mac瀏覽器
- 幻燈片式圖片瀏覽器瀏覽器
- js上傳圖片預覽,相容IE6以上各大主流瀏覽器JS瀏覽器
- 配合滑塊圖片驗證的JS來了,一行js引入即可實現JS
- 10個超讚的jQuery圖片滑塊動畫jQuery動畫
- angular 拖動功能Angular
- 【opencv五】利用opencv給讀入的視訊新增拖動滑塊OpenCV
- 高效圖片瀏覽器:Pixea Plus for Mac瀏覽器Mac
- Mac圖片瀏覽軟體——XnViewMP for MacMacView
- GKPhotoBrowser--自定義圖片瀏覽器瀏覽器
- 圖片瀏覽器--學習筆記瀏覽器筆記
- JS相容各個瀏覽器的本地圖片上傳即時預覽效果JS瀏覽器地圖
- 安卓圖片瀏覽(支援超大圖,附原始碼)安卓原始碼
- chrome瀏覽器不能顯示本地圖片辦法解決(圖片預覽)Chrome瀏覽器地圖
- js圖片上傳預覽JS
- 9個精巧絢麗的jQuery圖片滑塊動畫jQuery動畫
- 前端不容錯過的jQuery圖片滑塊外掛前端jQuery
- axure教程|axure之圖片拖動放大縮小
- UIScrollView瀏覽一組圖片,且圖片與圖片之間有間隔UIView
- JavaScript左右拖動滑動的按鈕效果JavaScript
- 瀏覽器 Web 訪問剪下板圖片瀏覽器Web