javascript簡單練習 - 模仿圖片視覺差展示效果
阿新 • • 發佈：2018-12-03
兩張圖片展示視覺差效果，效果如下，通過滑鼠在圖片上滑動，形成兩張圖切換展示
全部程式碼如下~樣式簡單，可能問題還很多，僅供簡單練手~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>小米手機視覺差展示圖片</title> <style> .content{ width: 860px; height: 520px; margin: 20px auto; position: relative; } .bar{ width:5px; height:100%; background:rebeccapurple; position: absolute; left:50%; top:0; z-index: 2; } /* 起始位置白色的手機在上層寬一半 */ .whitePhone{ width:50%; height:100%; position:absolute; left:0; top :0; z-index:1; overflow:hidden; } </style> <script type="text/javascript" src="../common/jquery-3.1.1.min.js"></script> <script> $(function(){ // 獲取三個元素 var whitePhone = $(".whitePhone") ; var blackPhone = $(".blackPhone") ; var bar = $(".bar") ; // 當滑鼠在圖片上移動事件 $(".content").mousemove(function(event){ var e = event || window.event ; // 要讓bar隨著滑鼠的位置移動 // bar距離content左邊:滑鼠相對與瀏覽器的橫座標 - 當前元素相對於父元素body的左邊的距離 let leftDistance = e.clientX - this.offsetLeft ; if(leftDistance < 0){ //移除圖片位置 leftDistance = 0 }else if(leftDistance >= $(this).width()-bar.width()){ leftDistance = $(this).width()-bar.width() ; } // 將移動條的位置改變，將白色圖片的寬度改變 bar.css("left",leftDistance+'px'); whitePhone.css("width",leftDistance+'px'); }) }) </script> </head> <body> <div class="content"> <div class="whitePhone top"> <img src="img/1.jpg" alt="white"> </div> <div class="blackPhone bottom"> <img src="img/2.jpg" alt="black"> </div> <div class="bar"></div> </div> </body> </html>