^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望可以帮到你
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

让你的网站high起来

阿里云服务器9.9

让你的网站 high 起来

试试本页右上角我要嗨,是不是很炫酷呢,要实现这种效果也不难,跟着陌小雨一步一步做吧:

1、在主题 css 最后面增加如下代码:

.btn-link{border-radius:0;color:#428BCA;cursor:pointer;font-weight:normal;}.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:rgba(0,0,0,0);box-shadow:none;}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:rgba(0,0,0,0);}.btn-link:hover,.btn-link:focus{background-color:rgba(0,0,0,0);color:#2A6496;text-decoration:none;}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#999999;text-decoration:none;}

2、新建 hi.css 文件,加入如下代码

@charset "utf-8";
/* CSS Document */

.mw-strobe_light{position:fixed;width:100%;height:100%;top:0;left:0;z-index:100000;background-color:rgba(250,250,250,0.8);display:block;}.mw-harlem_shake_me{transition:all 0.8s ease-in-out;-moz-transition:all 0.8s ease-in-out;-webkit-transition:all 0.8s ease-in-out;-o-transition:all 0.8s ease-in-out;-ms-transition:all 0.8s ease-in-out;animation:spin 1s infinite linear;-moz-animation:spin 1s infinite linear;-webkit-animation:spin 1s infinite linear;-o-animation:spin 1s infinite linear;-ms-animation:spin 1s infinite linear;}.mw-harlem_shake_slow{transition:all 3.2s ease-in-out;-moz-transition:all 3.2s ease-in-out;-webkit-transition:all 3.2s ease-in-out;-o-transition:all 3.2s ease-in-out;-ms-transition:all 3.2s ease-in-out;animation:spin 4s infinite linear;-moz-animation:spin 4s infinite linear;-webkit-animation:spin 4s infinite linear;-o-animation:spin 4s infinite linear;-ms-animation:spin 4s infinite linear;}body{-webkit-backface-visibility:hidden;}.mw-harlem_shake_me{-webkit-animation-duration:.4s;-moz-animation-duration:.4s;-o-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}.mw-harlem_shake_slow{-webkit-animation-duration:1.6s;-moz-animation-duration:1.6s;-o-animation-duration:1.6s;animation-duration:1.6s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}.flash,.mw-strobe_light{-webkit-animation-name:flash;-moz-animation-name:flash;-o-animation-name:flash;animation-name:flash;}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}20%,40%,60%,80%{-webkit-transform:translateX(10px);}}@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0);}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}20%,40%,60%,80%{-moz-transform:translateX(10px);}}@-o-keyframes shake{0%,100%{-o-transform:translateX(0);}10%,30%,50%,70%,90%{-o-transform:translateX(-10px);}20%,40%,60%,80%{-o-transform:translateX(10px);}}@keyframes shake{0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-10px);}20%,40%,60%,80%{transform:translateX(10px);}}.shake,.im_baked{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake;}.swing,.im_drunk{-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;-moz-animation-name:swing;-o-animation-name:swing;animation-name:swing;}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);}15%{-webkit-transform:translateX(-15%) rotate(-4deg);}30%{-webkit-transform:translateX(12%) rotate(3deg);}45%{-webkit-transform:translateX(-9%) rotate(-2deg);}60%{-webkit-transform:translateX(6%) rotate(2deg);}75%{-webkit-transform:translateX(-3%) rotate(-1deg);}100%{-webkit-transform:translateX(0%);}}@-moz-keyframes wobble{0%{-moz-transform:translateX(0%);}15%{-moz-transform:translateX(-15%) rotate(-5deg);}30%{-moz-transform:translateX(12%) rotate(3deg);}45%{-moz-transform:translateX(-9%) rotate(-3deg);}60%{-moz-transform:translateX(6%) rotate(2deg);}75%{-moz-transform:translateX(-3%) rotate(-1deg);}100%{-moz-transform:translateX(0%);}}@-o-keyframes wobble{0%{-o-transform:translateX(0%);}15%{-o-transform:translateX(-15%) rotate(-5deg);}30%{-o-transform:translateX(12%) rotate(3deg);}45%{-o-transform:translateX(-9%) rotate(-3deg);}60%{-o-transform:translateX(6%) rotate(2deg);}75%{-o-transform:translateX(-3%) rotate(-1deg);}100%{-o-transform:translateX(0%);}}@keyframes wobble{0%{transform:translateX(0%);}15%{transform:translateX(-15%) rotate(-5deg);}30%{transform:translateX(12%) rotate(3deg);}45%{transform:translateX(-9%) rotate(-3deg);}60%{transform:translateX(6%) rotate(2deg);}75%{transform:translateX(-3%) rotate(-1deg);}100%{transform:translateX(0%);}}.wobble,.im_first{-webkit-animation-name:wobble;-moz-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble;}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);}50%{-webkit-transform:scale(1.1);}100%{-webkit-transform:scale(1);}}@-moz-keyframes pulse{0%{-moz-transform:scale(1);}50%{-moz-transform:scale(1.1);}100%{-moz-transform:scale(1);}}@-o-keyframes pulse{0%{-o-transform:scale(1);}50%{-o-transform:scale(1.1);}100%{-o-transform:scale(1);}}@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}.pulse,.im_blown{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse;}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);}50%{opacity:1;-webkit-transform:scale(1.05);}70%{-webkit-transform:scale(.9);}100%{-webkit-transform:scale(1);}}@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3);}50%{opacity:1;-moz-transform:scale(1.05);}70%{-moz-transform:scale(.9);}100%{-moz-transform:scale(1);}}@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3);}50%{opacity:1;-o-transform:scale(1.05);}70%{-o-transform:scale(.9);}100%{-o-transform:scale(1);}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(.9);}100%{transform:scale(1);}}.bounceIn,.im_trippin{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn;}

3、新建 js 文件,加入如下代码

function hig(){(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML=" <p>如果你正在读这篇文章,那是因为你的浏览器不支持音频元素。我们建议你得到一个新的浏览器。</p> <p>";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("\\b"+s+"\\b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;
var i="http://cdndedewp.qiniudn.com/xiaopingguo.mp3";
var f="https://dy.dedewp.com/wp-content/themes/xiu2.1/css/hi.css";
var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()}

4、修改上面代码第 2 行和第三行中的音乐链接、css 链接,保存后上传至主题 js 目录下

5、在 footer.php 中,在前加入一下代码:

<script src="<?php bloginfo('template_url'); ?>/js/hi.js"></script>

6、在网站相应位置添加 high 一下链接:这里提供两种

(1)、按钮

<button type="button" class="btn btn-link" onclick="hig();">High 一下</button>

(2)、超链接

<span style="color: #ff00ff;"><strong><a href="javascript:void(0);" onclick="hig();javascript:alert('你点了 High 一下,你要是 High 够了,刷新页面即停止!^_^');">点此嗨一下</a></strong></span>

赶快试试吧,如果喜欢,就给陌小雨点个赞吧!土豪打赏来者不拒哈!

来源:http://www.landiannews.com/archives/1340.html

2015 年 1 月 13 日更新:升级创意版の各种折腾

1、让音乐随机播放(来源:友链无主题博客)

//var i="http://cdndedewp.qiniudn.com/xiaopingguo.mp3";
//将此代码替换为如下代码
var arr=["http://cdndedewp.qiniudn.com/xiaopingguo.mp3","http://cdndedewp.qiniudn.com/1.mp3","http://cdndedewp.qiniudn.com/2.mp3","http://cdndedewp.qiniudn.com/3.mp3"];
var i=arr[Math.floor(Math.random()*Number(arr.length))];

注意替换其中的音乐地址。

2、之前的代码点击【high 一下】之后,需要手动刷新页面才能让音乐和动画停止。很不理想,也不人性化,又显得我没有“情怀”;那么今天升级之后的代码即:“单击按钮开始 high,双击任意位置停止 high”。(来源:友链无主题博客)

步骤(1):下面代码根据前文中提供的代码修改,找一个合适的位置添加红色代码

function hig(){(function(){
  //....function.....
  //找到一个合适的位置
  window._hig=true;
  //.........
})}

步骤(2):给 body 增加双击事件

jQuery("body").bind("dblclick",function(e){
  if(window._hig)//判断 hig()方法是否被执行
    location.reload(true);
  e.stopPropagation();//阻止事件冒泡
});

3、让高潮来得更快点(来源:基友张戈同学)

将 js 代码中的15500修改为5000即可,高潮会来的更快些!如果你是个急性子,相信很适合你。

最后再一次强调,文章中的音乐和 css 文件地址需要替换为自己的,因为陌小雨是一个爱折腾的孩子,所以不能保证这些文件一直会在原来的位置。

历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来
小雨导购

如有疑问,请前往问答中心反馈!

反馈
  1. 番茄薯片
    小雨博主为什么换了主题了,xiu主题不好吗?
    • 陌小雨网站管理员
      @番茄薯片 xiu主题好,只怪我当初接触这个主题的时候是别人发给我的,不是正版,所以用着感觉怪怪的,不知道你能否懂这种感觉。
  2. 小小吴
    亲,刚添加上了,结果只随机播一首,播完了就结束了。。那个尴尬,意犹未尽啊。 在有多首歌的情况下,如何播放完了一首随机下一首呢?只要没有刷新页面,就一直播,怎么实现呢,不懂JS,博主有没有什么好方法。
    • 陌小雨网站管理员
      @小小吴 这个我还真没想过。。
      • 小小吴
        @陌小雨 我自己琢磨下吧,可否来个友链。新博客,文章太少,不过更新频率很高。
        • 陌小雨网站管理员
          @小小吴 过一段时间吧 保持互访
        • 陌小雨网站管理员
          @小小吴 突然想了一个思路 在你还没想好怎么弄这个连续播放的问题,你可以先把所有的音乐用编辑软件串在一起 就Ok了。看你也是喜欢折腾的人,多交流!
  3. 淘站目录网站提交
    js代码太多了,会不会影响访问速度啊
  4. 陈玟予
    网站做的好棒哦
  5. 森林之家
    可以了哈哈,折腾一天不如你搞几分钟。大神!能友链么? :mrgreen:
  6. 森林之家
    我的不行啊你看看。点击右上角的那女孩看书的图片。音乐播出几秒就卡死了。
  7. 助推博客
    哈哈 挺不错,玩了两次,不错,有时间试试
  8. boke112导航
    到底是什么效果,我还看真看不出来啊???
    • 陌小雨网站管理员
      @boke112导航 不是吧,本博客已经撤下了,想体验的话安装一个wp-dialog插件,该插件已经集成了这个high功能,很炫很酷很风骚。
    • 陌小雨网站管理员
      @boke112导航 特意为你添加了high一下,来体验下吧 :grin:
  9. 匿名
    OK,学习啦,博主的网站很不错哦
    • 陌小雨网站管理员
      @匿名 你这邮箱后面一大串是啥玩意,本博客所有评论一律博主亲自审核,对有广告嫌疑的一概归为垃圾评论,喜欢就多来逛逛,如果发一些广告,我情愿你不要评论。
  10. 凯凯
    好坑啊,代码好长,又复制不了,新窗口打开不管用,必须要鼠标一点点复制 。
    • moxiaoyu网站管理员
      @凯凯 刚换主题,如果 ,可以加我QQ
  11. GRE代攷
  12. 陌小雨网站管理员
    文章标题下面最后面有个:点此嗨一下,你可以试试!
  13. VKoos
    我艹,显示器震坏了、这个很有创意,谢谢分享。
  14. 李阳博客
    哈哈,我的主题被加密了,无法修改了
  15. 小武
    好玩的东西. .. 第一次见. . 果断拿走. . 感谢博主分享. .
    • 陌小雨网站管理员
      @小武 再给你个思路,音乐地址可以换成随机播放
      • 小武
        @陌小雨 不知道去哪找 无版权音乐. .. 我直接下载了你的音乐上传到我空间了. .
      • 小武
        @陌小雨 回家没事闲的,找了几个歌曲,把随机播放实现了。 http://www.wuzhuti.cn/201402!1728!12!195218.html
  16. 淡忘~浅思
    赞一个
  17. 夏日博客
    点击显示加数字是怎么实现的。。。
    • 陌小雨网站管理员
      @夏日博客 喜欢就点个赞,明天下午来看我博客最新文章。
    • 陌小雨网站管理员
      @夏日博客 已发表 http://www.dedewp.com/579.html,小伙伴,快来抢吧!
  18. Han
    很棒的功能
    • 陌小雨网站管理员
      @Han 有事没事high一下,想high就high,布置到首页会更high,哈哈!
      • Han
        @陌小雨 确实很不错,很炫,你主题加个背景会更炫
        • 陌小雨网站管理员
          @Han 你的事宽屏?没找到好的背景!求推荐!
          • Han
            @陌小雨 我之前加了个素雅的碎花背景,还不错,背景图片才不到10K
  19. 梦想网络
    不错的效果。
  20. 山野愚人居游客
    有demo吗?
    • 陌小雨网站管理员
      @山野愚人居 文章标题下面最后面有个:点此嗨一下,你可以试试!
  21. 汉克人生
    不错不错

登录

忘记密码 ?

切换登录

注册