js拖動實現左右圖片對比效果
分享一段程式碼例項,它實現了通過拖動實現左右圖片光線對比效果。
先不說這樣的功能有沒有實用性,不過看起來挺不錯的,就分享一下。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } .left { float: left; } #topDiv { width: 540px; height: 295px; position: relative; margin-right: 30px; } #original { width: 100%; height: 100%; background: url(demo/js/img/serenity.JPG) no-repeat; } #effect { position: absolute; top: 0; left: 0; width: 300px; height: 295px; z-index: 100; background: url(demo/js/img/cinematic.JPG) no-repeat; border-right: 1px solid #fff; } #effect > span { display: inline-block; width: 20px; height: 20px; position: absolute; top: 150px; right: -10px; z-index: 200; cursor: pointer; background: url("demo/js/img/drag.png") no-repeat; } #effectImageDiv li { float: left; width: 55px; height: 70px; cursor: pointer; list-style: none; } #effect1 { background: url(demo/js/img/cinematic.png) no-repeat; } #effect2 { background: url(demo/js/img/mono.png) no-repeat; } #effect3 { background: url(demo/js/img/analog.png) no-repeat; } </style> <script> window.onload = function() { function getId(id) { var ele = document.getElementById(id); return ele; } getId("drag").onmousedown = function(e) { e = e || window.event; document.onmousemove = function(e) { e = e || window.event; if (e.clientY < 290 && e.clientX < 540 && e.clientY > 0 && e.clientX > 0) { getId("drag").style.top = e.clientY + "px"; getId("effect").style.width = e.clientX + 'px'; } } } document.onmouseup = function() { document.onmousemove = null; document.onmosuseup = null; } getId("effect1").onclick = function() { getId("effect").style.background = "url(demo/js/img/cinematic.JPG) no-repeat" } getId("effect2").onclick = function() { getId("effect").style.background = "url(demo/js/img/mono.JPG) no-repeat" } getId("effect3").onclick = function() { getId("effect").style.background = "url(demo/js/img/analog.JPG) no-repeat" } } </script> </head> <body> <div id="topDiv" class="left"> <div id="original"></div> <div id="effect"><span id="drag" class="left"></span> </div> </div> <div id="effectImageDiv" class="left"> <h2>點選這裡切換圖片效果 </h2> <br /> <br /> <ul> <li class="effect" id="effect1"></li> <li class="effect" id="effect2"></li> <li class="effect" id="effect3"></li> </ul> </div> </body> </html>
相關文章
- JS圖片滾動(無縫、平滑、上下左右滾動)效果JS
- JavaScript表格tr行左右拖動效果JavaScript
- JavaScript左右拖動滑動的按鈕效果JavaScript
- JS實現馬賽克圖片效果JS
- js滑鼠移動實現圖片立體滾動效果JS
- 短視訊直播原始碼,拖動滑塊實現圖片驗證效果原始碼
- js實現的div拖動效果例項程式碼JS
- css實現圖片上下左右居中效果程式碼例項CSS
- vueusejs實現拖動VueJS
- js拖動滑塊瀏覽圖片功能JS
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- JS實現 類似圖片3D效果JS3D
- JS互動 點選WKWebView中的圖片實現預覽效果JSWebView
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- Flutter使用Draggable與自定義RenderObject實現圖片新增標籤,隨意拖動位置效果FlutterObject
- JS實現拖動div層移動JS
- js實現移動端圖片預覽:手勢縮放, 手勢拖動,雙擊放大...JS
- html5拖動上傳圖片效果程式碼例項HTML
- js 滾輪控制圖片縮放大小和拖動JS
- 微信小程式實現卡片左右滑動效果微信小程式
- 圖片模糊效果實現(RenderScript)
- (轉)jquery圖片左右滾動jQuery
- three.js實現的3D球狀拖動旋轉效果JS3D
- JS實現有點炫的圖片展示效果-圖片解體和組合JS
- Qt實現遮罩效果並可以拖動伸縮QT遮罩
- matlab實現調整圖片的對比度Matlab
- Android左右滑動效果的程式碼實現Android
- PHP實現水印效果(文字、圖片)PHP
- 滑鼠放在圖片實現高亮效果
- 拖動滾動條實現側欄導航定位效果
- 圖片實現寬高比
- 拖動滾動條實現內容自動載入效果
- jquery外掛實現圖片可拖動的購物車程式碼jQuery
- asp.net+js方式實現的幻燈圖片效果展示ASP.NETJS
- 只用CSS實現容器內圖片上下左右居中CSS
- 原生javascript實現的水平圖片無縫滾動效果JavaScript
- 直播平臺原始碼,純JS實現左右滑動輪播圖原始碼JS
- js實現圖片上下滾動background-positionJS