html富强民主鼠标特效,html鼠标移动点击动画爱国民主文明和谐
var a_idx=0;
jQuery(document).ready(function($){
addTips = function(e){
var a= new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var i=$("").text(a[a_idx]);
a_idx=(a_idx+1)%a.length;
var x=e.pageX,y=e.pageY;
i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top":y-20,
"left":x,
"position":"absolute",
"font-weight":"bold",
"color":"#ff6651"
});
$("body").append(i);
i.animate({"top": y-180,"opacity":0},1500,function(){i.remove()})
return false;
}
//绑定鼠标左键
$("body").click(addTips);
//绑定鼠标左键
$("body").bind("contextmenu",addTips)
});
function o(w,v,i){
return w.getAttribute(v)||i
}
function j(i){
return document.getElementsByTagName(i)
}
function l(){
var i=j("script"),w=i.length,v=i[w-1];
return {l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}
}
function k(){
r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function b(){
e.clearRect(0,0,r,n);
var w=[f].concat(t);
var x,v,A,B,z,y;
t.forEach(function(i){
i.x+=i.xa,
i.y+=i.ya,
i.xa*=i.x>r||i.x<0?-1:1,
i.ya*=i.y>n||i.y<0?-1:1,
e.fillRect(i.x-0.5,i.y-0.5,1,1);
for(v=0;v
x=w[v];
if(i!==x&&null!==x.x&&null!==x.y){
B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;
y=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())
}
}
w.splice(w.indexOf(i),1)
}),m(b)
}
var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,
m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){
window.setTimeout(i,1000/45)
},
a=Math.random,f={x:null,y:null,max:20000};
u.className="particle_canvas";
var browserName = navigator.userAgent.toLowerCase();
if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
u.className += ' ie10_gte';
};
u.id=c;
u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;
j("body")[0].appendChild(u);
k(),window.οnresize=k;
window.οnmοusemοve=function(i){
i=i||window.event,
f.x=i.clientX,
f.y=i.clientY
},
window.οnmοuseοut=function(){
f.x=null,
f.y=null
};
for(var t=[],p=0;s.n>p;p++){
var h=a()*r,
g=a()*n,
q=2*a()-1,
d=2*a()-1;
t.push({x:h,y:g,xa:q,ya:d,max:6000})
}
setTimeout(function(){b()},100)
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%, 100% {
transform: rotate(0)
}
20%, 60% {
transform: rotate(-25deg)
}
40%, 80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
目前在黑马培训javaee ,学到了前端这里,能做出一个自己喜欢的页面还挺开心的,贴一张图吧.
html富强民主鼠标特效,html鼠标移动点击动画爱国民主文明和谐相关推荐
- html富强民主鼠标特效,Canvas鼠标点击特效(富强、民主...)、收藏
/* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) ...
- HTML/CSS/JS 鼠标特效二(鼠标点击WEB页面出现彩色爱心冒泡特效)
1.实际效果 [青树柠檬~旧事老酒] 2.示例代码 /*--鼠标点击特效,不同颜色桃心图案*/ <script type="text/javascript">!func ...
- 博客鼠标特效代码|鼠标特效代码
01 绿色 02 花树枝 03 小点跟随 04 粉红玫瑰 05 钥匙 06 小手 07 短笔 08 太阳花 09 小色杆 10 绿色样式剪头 11 银色样式剪头 12 小老鼠 13 有点像猫 14 美 ...
- 爱国html源码,鼠标点击网页爱国富强民主特效(附代码)
有朋友经常问,网站上点击出现爱国字眼是怎么做出来的,鼠标点击就显示"富强.民主.和谐"等24个词语,这样鼠标点击特效.下面来分享一下如何实现的. 1,效果如下: 添加页面点击特效, ...
- html富强民主鼠标特效,鼠标特效:点击显示富强、民主、文明、和谐、自由、平等.........
/* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) ...
- html富强民主鼠标特效,鼠标点击弹出 “富强 民主 ”特效
代码 /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function ...
- html 获取鼠标参数,js鼠标点击特效,有关参数设置
效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个"红橙黄绿蓝靛 ...
- php点击特效,WordPress鼠标点击特效和粒子插件
鼠标特效 将下面代码复制到外观-主题编辑器-主题页脚(footer.php)代码<?php wp_footer(); ?>上方. var a_idx = 0; jQuery(documen ...
- css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效
这是一款CSS3鼠标hover图片超酷遮罩层动画特效.该特效中,当鼠标悬停在图片上面的时候,左右两个遮罩层会向中间收缩,最后合成一个完整的遮罩层.效果截图如下: HTML代码 Williamson ...
最新文章
- java - 把日志生成到指定目录
- CNN中的卷积操作的参数数计算
- android listview 去掉水波纹效果_CocosCreator之分层管理的ListView
- 一步步学习SPD2010--第二章节--处理SP网站(6)---- 探索SP网站
- python bp神经网络分类预测结果图_深度学习入门(四)BP神经网络——数字分类...
- 互联网+2.0:技术有多强 梦想才有多近
- Java 异常处理(标准抛异常、异常处理、多异常、Finally、多线程异常处理、获取异常的堆栈信息、链试异常、自定义异常)
- html编辑器全角 半角转换,javascript实现全角与半角字符的转换
- 20200202每日一句
- 推荐几个学习JS的站点
- TeeChart学习笔记1:TeeChart控件的注册与基本使用(添加曲线序列、添加数据点)
- 百人计划2.6 伽马校正
- 计算机数据管理阶段,数据管理发展的三个阶段
- 基于Nacos配置中心实现Spring Cloud Gateway的动态路由管理
- Codeforces311D. Interval Cubing 神线段树
- ObjectArx 如何替换CAD本身的命令
- 车联网各领域头部企业排行榜
- java计算机毕业设计绿色生活基于PS、DW的绿色环保宣传网站源程序+mysql+系统+lw文档+远程调试
- TCL/TK文件操作
- Indian_pines 高光谱图像数据集的处理(1)