一, GooGle 浏览器: 使用插件 User Agent Switcher, URL sniffer 0.9.3.9 或者使用 User Agent Switcher, 调整用户设备请求头
1. 获取用户设备请求头的意义, QQ 的空间动态, 会有手机类型的显示, 其实现原理就是获取设备的请求头文件, 使用方法或正则匹配出来显示到用户的客户端; 还可以通过进行判断让其再不同的终端中显示不同的页面, 实现多终端多效果.
2. 安装 User Agent Switcher, URL sniffer 0.9.3.9 方法有两种:
(1) 谷歌内部应用商店安装, 直接在谷歌应用商店搜索, 添加到扩展程序中即可
(2) 百度下载, 下载到的文件后缀名是. crx 文件, 使用时先把后缀名改成. rar 或. zip 的压缩包, 然后解压导入创建好的文件夹, 再以谷歌的拓展程序打开即可使用
二, 点赞效果
1. 通过 jQuery 的使用实现动态的点赞效果图, 主要涉及两个方法, dom 中的 document.createElement() 方法添加 span 块, 和 setInterval 设置时间动态显示
- //JavaScript 部位代码块
- $(function(){
- $(".zan").click(function(){
- var fz = 12; //font-size
- var tp = 5; //top
- var lf = 5; //left
- var op = 1; //opacity
- var tag = document.createElement("span");
- tag.innerhtml = "+1"; // 因为是文本所以 innerText 与 innerHtml 的使用效果相同
- tag.style.color = "red";// 字体颜色
- tag.style.fontSize = fz+ "px";// 字体大小
- tag.style.top = lf + "px";// 移动方向
- tag.style.opacity = op; // 透明度
- $(this).append(tag);// 把 span 标签添加到 class 属性值为 zan 的 div 的后面
- var tim = setInterval(function(){ // 自动进行循环, 直到条件达到 clearInterval(tim) 时停止
- fz += 5; //font-size
- tp += 5; //top
- lf += 5; //left
- op -= 0.2; //opacity
- tag.innerHTML = "+1";
- tag.style.color = "red";
- tag.style.fontSize = fz+ "px";
- tag.style.top = lf + "px";
- tag.style.opacity = op; // 透明度
- if (op<0){ // 判定计时停止的条件
- clearInterval(tim);
- $("tag").remove();
- }
- },50)
- });
- })
- <!-- 全部代码块 -->
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="/static/js/jquery-2.1.4.min.js">
- </script>
- </head>
- <style type="text/CSS">
- .item{ height: 100px; border: 1px solid rebeccapurple; } .zan{ height:
- 35px; width: 35px; background-color: #000000; color: white; position: relative;
- cursor: pointer; } .zan span{ position: absolute; font-weight: bold; }
- </style>
- <script>
- $(function() {
- $(".zan").click(function() {
- var fz = 12; //font-size
- var tp = 5; //top
- var lf = 5; //left
- var op = 1; //opacity
- var tag = document.createElement("span");
- tag.innerHTML = "+1"; // 因为是文本所以 innerText 与 innerHtml 的使用效果相同
- tag.style.color = "red"; // 字体颜色
- tag.style.fontSize = fz + "px"; // 字体大小
- tag.style.top = lf + "px"; // 移动方向
- tag.style.opacity = op; // 透明度
- $(this).append(tag); // 把 span 标签添加到 class 属性值为 zan 的 div 的后面
- var tim = setInterval(function() { // 自动进行循环, 直到条件达到 clearInterval(tim) 时停止
- fz += 5; //font-size
- tp += 5; //top
- lf += 5; //left
- op -= 0.2; //opacity
- tag.innerHTML = "+1";
- tag.style.color = "red";
- tag.style.fontSize = fz + "px";
- tag.style.top = lf + "px";
- tag.style.opacity = op; // 透明度
- if (op < 0) { // 判定计时停止的条件
- clearInterval(tim);
- $("tag").remove();
- }
- },
- 50)
- });
- })
- </script>
- <body>
- <!-- <form action="/userp/">
- <input type="text">
- </form>
- -->
- <div>
- <div class="item">
- <div class="zan">
- 赞
- < span>
- +1
- </span>
- </div>
- </div>
- <div class="item">
- <div class="zan">
- 赞
- </div>
- </div>
- <div class="item">
- <div class="zan">
- 赞
- </div>
- </div>
- <div class="item">
- <div class="zan">
- 赞
- </div>
- </div>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3346794.html