SVG點選實現動態放大的圓效果
分享一段程式碼例項,它利用svg實現了點選生成動態放大的圓效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <svg id="svg" width="500px" height="500px" style="background-color: #f2f2f2"></svg> <script> var svg = document.getElementById("svg"); svg.onclick = function(event) { var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); circle.setAttribute("cx", event.offsetX); circle.setAttribute("cy", event.offsetY); circle.setAttribute("r", 10); circle.setAttribute("fill", randomColor()); circle.setAttribute("opacity", 1); svg.appendChild(circle); var t = setInterval(function() { var r = parseInt(circle.getAttribute("r")); r++; circle.setAttribute("r", r); var opacity = parseFloat(circle.getAttribute("opacity")); opacity -= 0.005; circle.setAttribute("opacity", opacity); if (opacity <= 0) { circle.parentNode.removeChild(circle); clearInterval(t); } }, 10); } function randomColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; } </script> </body> </html>
相關文章
- SVG實現動態模糊動畫效果SVG動畫
- SVG 實現動態模糊動畫效果SVG動畫
- CSS3實現的圓球放大縮小效果CSSS3
- 圓形放大的hover效果
- SVG圓形鐘錶效果SVG
- 點選按鈕實現狀態切換效果
- svg實現矩形水平運動動畫效果SVG動畫
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- javascript實現的放大效果程式碼JavaScript
- canvas實現的圓形走動鐘錶效果Canvas
- SVG實現的圓環旋轉效果SVG
- SVG使用滑鼠點選繪製折線效果SVG
- canvas實現的圖片放大鏡效果Canvas
- 通過xml檔案實現自定義圓角按鈕,以及點選效果XML
- UIImageView 實現圓角效果UIView
- svg實現路徑自己動態繪製的功能SVG
- 點選按鈕實現文字放大和縮小功能
- JS互動 點選WKWebView中的圖片實現預覽效果JSWebView
- iOS 實現點選微信頭像效果iOS
- 網頁點選實現下載效果網頁
- css3實現的水平立體動態導航選單效果CSSS3
- android短影片開發,點選兩次實現不同點選效果的實現方式Android
- canvas實現的圓形時鐘效果Canvas
- javascript實現的動態時間日期效果JavaScript
- JavaScript動態圓形鐘錶效果詳解JavaScript
- css3動態圓形鐘錶效果CSSS3
- SVG格式圖片的放大SVG
- SVG 動畫實現彈性的頁面元素效果SVG動畫
- 如何實現點選連結不跳轉效果
- 點選按鈕實現數字增加效果
- 一個比想象中更騷氣的圓-svg實現SVG
- css實現圓角按鈕效果CSS
- javascript實現的點選當前元素隱藏效果JavaScript
- jquery實現在滑鼠點選處的炫酷效果jQuery
- 滑鼠放在連結上實現字型放大效果
- 利用 OmniGraffle 實現放大鏡標註效果
- iOS實現點選圖片放大&長按儲存圖片iOS
- android 自定義ImageView實現圖片手勢滑動,多點觸控放大縮小效果AndroidView