<!-- 为页面添加爱心特效 -->
<script type="text/javascript"> (function (window, document, undefined) {
var hearts = []; window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
})(); init(); function init() {
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
} function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
} hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
} requestAnimationFrame(gameloop);
} function attachEvent() {
var old = typeof window.onclick === "function" && window.onclick;
window.onclick = function (event) {
old && old();
createHeart(event);
}
} function createHeart(event) {
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
}); document.body.appendChild(d);
} function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
}
catch (ex) {
style.styleSheet.cssText = css;
} document.getElementsByTagName('head')[0].appendChild(style);
} function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
} })(window, document);
</script>
<!--侧边结束-->

爱心特效

<!-- <script>
window.onload = function () {
var ooo = document.getElementById("leftmenu");
var isOnPc = (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent));
if (!isOnPc) { ooo.innerHTML = "这是电脑"; } else {
ooo.innerHTML = "暂不支持手机端"
}
}
</script>-->

判断手机端

原生js为页面添加爱心特效和判断手机端还是电脑端登录的更多相关文章

  1. js给页面添加滚动事件并判断滚动方向

    <script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...

  2. JS判断手机端和PC端自动跳转

    <script type="text/javascript">     function browserRedirect() {     var sUserAgent ...

  3. js判断手机端和pc端

    var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; retu ...

  4. js判断浏览设备是 手机端,电脑端还是平板端

    console.log(navigator.userAgent); var os = function() { var ua = navigator.userAgent, isWindowsPhone ...

  5. js 判断用户是手机端还是电脑端访问

    通过userAgent 判断,网页可以直接使用 navigation对象 node端 可以通过请求头的 ctx.request.header['user-agent'] const browser = ...

  6. PHP项目实现手机端和PC端的页面切换

    目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...

  7. js判断手机端操作系统(Andorid/IOS)

    非常实用的js判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL = "http://xxx/xxx.apk"; var browser = ...

  8. CSS3及JS简单实现选项卡效果(适配手机端和pc端)

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  9. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

随机推荐

  1. jenkins容器内修改root密码--ubuntu系统

    http://www.voidcn.com/article/p-yvnoogkc-ng.html 由于jenkins官方镜像是ubuntu系统,所有啥的都用 sudo 换到root账号,然后登陆har ...

  2. Hbase 学习记录

    说明: 公司最近要使用HBase 用于(冷)历史数据 存储,和简单离线计算.在一次讨论会上,我发表意见,为什么把近期数据流程热点数据库中,并且继续异步流入到 历史数据库HBase 里面.提供高效查询等 ...

  3. 最新 鹏博士java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.鹏博士等10家互联网公司的校招Offer,因为某些自身原因最终选择了鹏博士.6.7月主要是做系统复习.项目复盘.LeetCo ...

  4. hdoj4276(树形dp+分组背包)

    题目链接:https://vjudge.net/problem/HDU-4276 题意:给出一棵树,起点为1,时间为V,终点为n,每个点有一个价值a[u],每条边有一个时间花费w,求在时间V内到达终点 ...

  5. confluence导出PDF格式文件不显示中文解决

    由于confluence导出PDF格式文件需要应用字体文件,下载字体文件在confluence管理员界面安装即可. 我这里使用从simhei.ttf楷体,可以从windowns主机里下载(c:/win ...

  6. [转帖]关于USB3.0以及type-C

    忘记来源页面了.. 但是昨天晚上 usb 4.0 发布了 跟雷电C 安全一样的标准 双向40gb 的带宽. 而且 以后只有usb type-C的接口了. 我们办公机器上面的 typeC 同事用 ngf ...

  7. 【转贴】NUMA的取舍与优化设置

    NUMA的取舍与优化设置 https://www.cnblogs.com/tcicy/p/10191505.html 在os层numa关闭时,打开bios层的numa会影响性能,QPS会下降15-30 ...

  8. React—组件生命周期详解

    React—组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...

  9. S02_CH01_Hello World实验

    S02_CH01_Hello World实验 ZYNQ是一款SOC芯片,在前面第一季的学习当中,我们只是粗略的学习了ZYNQ的PL部分,对于ZYNQ最突出的功能,其内部的双核Cortex-A9内核并未 ...

  10. git bash配置SSH远程连接阿里云ECS

    1.连接配置 1-1.添加安全组规则 1-2.使用GitHub的话本地都会有id_rsa.pub(公钥),id_rsa(私钥),一般保存在C盘用户目录下.ssh文件夹. 把公钥内容复制下来(ssh-r ...