js效果代码
来源:互联网 发布:vmware如何安装mac os 编辑:程序博客网 时间:2024/06/05 09:29
HTML代码:
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Language" content="zh-CN"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="keywords" content=""> <meta name="Description" content=""> <meta name="Author" content=""> <title>js效果代码</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body class=" pace-done"><div class="blog-body"><canvas id="canvas-banner" style="background: #393D49; " width="1256" height="308"></canvas><script type="text/javascript"> var canvas = document.getElementById('canvas-banner'); canvas.width = window.document.body.clientWidth; canvas.height = window.innerHeight * 2 / 7; window.onload = function () { var script = document.createElement('script'); script.src = './static/homeindex.js'; document.getElementsByTagName('body')[0].appendChild(script); }</script></div><script src="./static/homeindex.js"></script></body></html>
JS代码:
$(function () { DrawCanvas(); }); function DrawCanvas() { var canvas = document.getElementById('canvas-banner'); var ctx = canvas.getContext('2d'); ctx.strokeStyle = (new Color(150)).style; var screenWidth = screen.width; canvas.width = window.document.body.clientWidth; canvas.height = window.innerHeight * 2 / 7; var dotCount = 20; var dotRadius = 70; var dotDistance = 70; if (screenWidth >= 768 && screenWidth < 992) { dotCount = 170; dotRadius = 90; dotDistance = 60; canvas.height = window.innerHeight / 3; } else if (screenWidth >= 992 && screenWidth < 1200) { dotCount = 120; dotRadius = 140; dotDistance = 70; canvas.height = window.innerHeight * 1 / 3; } else if (screenWidth >= 1200 && screenWidth < 1700) { dotCount = 140; dotRadius = 150; dotDistance = 80; canvas.height = window.innerHeight * 1 / 3; } else if (screenWidth >= 1700) { dotCount = 200; dotRadius = 150; dotDistance = 80; canvas.height = window.innerHeight * 1 / 3; } var mousePosition = { x: 50 * canvas.width / 100, y: 50 * canvas.height / 100 }; var dots = { count: dotCount, distance: dotDistance, d_radius: dotRadius, array: [] }; function colorValue(min) { return Math.floor(Math.random() * 255 + min); } function createColorStyle(r, g, b) { return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)'; } function mixComponents(comp1, weight1, comp2, weight2) { return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2); } function averageColorStyles(dot1, dot2) { var color1 = dot1.color, color2 = dot2.color; var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius), g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius), b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius); return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b)); } function Color(min) { min = min || 0; this.r = colorValue(min); this.g = colorValue(min); this.b = colorValue(min); this.style = createColorStyle(this.r, this.g, this.b); } function Dot() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = -.5 + Math.random(); this.vy = -.5 + Math.random(); this.radius = Math.random() * 2; this.color = new Color(); } Dot.prototype = { draw: function () { ctx.beginPath(); ctx.fillStyle = "#fff"; ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fill(); } }; function createDots() { for (i = 0; i < dots.count; i++) { dots.array.push(new Dot()); } } function moveDots() { for (i = 0; i < dots.count; i++) { var dot = dots.array[i]; if (dot.y < 0 || dot.y > canvas.height) { dot.vx = dot.vx; dot.vy = -dot.vy; } else if (dot.x < 0 || dot.x > canvas.width) { dot.vx = -dot.vx; dot.vy = dot.vy; } dot.x += dot.vx; dot.y += dot.vy; } } function connectDots1() { var pointx = mousePosition.x; for (i = 0; i < dots.count; i++) { for (j = 0; j < dots.count; j++) { i_dot = dots.array[i]; j_dot = dots.array[j]; if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) { if ((i_dot.x - pointx) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - pointx) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) { ctx.beginPath(); ctx.strokeStyle = averageColorStyles(i_dot, j_dot); ctx.moveTo(i_dot.x, i_dot.y); ctx.lineTo(j_dot.x, j_dot.y); ctx.stroke(); ctx.closePath(); } } } } } function drawDots() { for (i = 0; i < dots.count; i++) { var dot = dots.array[i]; dot.draw(); } } function animateDots() { ctx.clearRect(0, 0, canvas.width, canvas.height); moveDots(); connectDots1() drawDots(); requestAnimationFrame(animateDots); } $('canvas').on('mousemove', function (e) { mousePosition.x = e.pageX; mousePosition.y = e.pageY; }); $('canvas').on('mouseleave', function (e) { mousePosition.x = canvas.width / 2; mousePosition.y = canvas.height / 2; }); createDots(); requestAnimationFrame(animateDots); }
0 0
- js:打字效果代码
- js效果代码汇总
- js效果代码
- 多种流行效果JS代码
- js弹出层,效果代码
- js 返回顶部效果代码
- zencart JS倒计时效果代码
- 一个JS分页效果代码
- js常用效果代码封装
- JS,旋转轮播图效果代码
- 对联广告JS代码效果大全
- 广告效果通用JS代码下载
- js 动画效果代码,主要运用setTimeout
- 网页flash效果的js代码
- 调用图片幻灯切换效果js代码
- 非常不错js弹出层效果代码
- html+Js [在线演示代码效果]
- js展开闭合效果演示代码
- webpack2 打包后生成的js目录根打包前目录一样
- Ceph RGW远程同步(multisite)配置
- 小圆点的绘制
- CF745C_Hongcow Builds A Nation(并查集+贪心)
- Android Studio2.3 All com.android.support libraries must use the exact same version specification...
- js效果代码
- ionic开发——获取手机唯一标识imei码
- nvprof查询bank冲突
- JAVA_面向对象高级特性
- fastJson中 JSON.toJSONString(list,true) 和 JSON.toJSONString(list)的区别
- 数据库字符串的用法
- 前端面试一般会问到的问题
- how to force global variable which define in a static library to initialize?
- 不为人知的UIScrollView 的contentSize属性发现