让你的网站high起来

最初是在陌小雨的网站上看见这个功能，赶脚很牛逼的样子，于是给自己的网站加上了。在我网站首页的轮播图上面那个按钮就能实现这个功能，当然这里你点击右边的这个链接也可以看到效果——>点此嗨一下。
效果就是你点击了这个按钮就会播放背景音乐，同时会让你网页的内容有节奏的跳动，很有逼格啊有木有？！网上很多代码都有一些问题，我做了一些修改，不多说，下面是实现方法：
1、在主题css最后面增加如下代码：

展开/收缩


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

.btn-link {

    border-radius: 0;

    color: #428BCA;

    cursor: pointer;

    font-weight: normal;

}

.btn-link, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {

    

    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文件，加入如下代码:

展开/收缩


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

@charset "utf-8";

/* CSS Document */

.mw-strobe_light {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 100000;

    

    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、新建hi.js文件，加入如下代码：

展开/收缩


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

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>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</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 = 1;

        var t = 1;

        var n = 1100;

        var r = 1100;

        var i = "http://7xnarc.com1.z0.glb.clouddn.com/Bar%20Bar%20Bar.mp3";

        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 f = "http://www.shenjieblog.com/wp-content/themes/hueman/hi.css";

        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) {

            console.warn("Could not find a node of the right size. Please try a different page.");

            return

        }

        c();

        S();

        var O = [];

        for (var L = 0; L < C.length; L++) {

            var A = C[L];

            if (v(A)) {

                O.push(A)

            }

        }

    })()

}

4、修改上面代码中的音乐链接和css链接，保存后上传至主题js目录下
5、在footer.php中，在前加入一下代码：


1

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

6、在网站相应位置添加high一下链接：这里提供两种
（1）按钮


1

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

（2）超链接


1

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

当然如果你觉得麻烦的话，我这里也提供了一个我打包好的所有文件和我使用的音乐，如果你需要的话可以下载试试。
下载地址：http://yunpan.cn/cFb3YTNRqSW8A 访问密码 71b0

本文转载自：http://www.dedewp.com/577.html【部分内容有修改更正过】

时间： 2024-10-05 20:06:29

让你的网站high起来的相关文章

Win10下IIS配置、项目发布、添加网站

Win10下IIS配置 1.找到控制面板:[开始]菜单鼠标右击,打开[控制面板] 2.打开控制面板,点击[程序],点击[启用或关闭Windows功能] 下一步,点击[启用虎关闭Windows功能] 3. 开始修改IIS了,我是这样勾上的,有可能比较多. 4. 验证IIS是否正确安装,等待几分钟后IIS配置完成.在浏览器输入http://localhost/iisstart.htm会出现 IIS安装成功页面.第一次修改的时候出现了成功页面,但是后来删除了IIS中默认的网站就打不开了,但是不影响的.

有趣的网站-第二弹

1.预测您的死亡时间,通过输入出生日期,选择性别.BMI范围(可以通过页面下方输入身高.体重计算出).生活态度和是否抽烟,点击查看按钮就可以得出结果. 我测了我还能活52多年..不过看着时间越来越少,心理感觉毛毛的.好恐怖 死亡时间预测: http://www.deathclock.com/ 2.很有意思的广告,第一次看到这种广告...太有意思了.哈哈. 你会觉得很惊喜!鼠标控制人物的动作,点击左右箭头可以更换广告哦. 入口:http://www.kokokaka.com/demo/bluebe

防止恶意解析——禁止通过IP直接访问网站

一.什么是恶意解析 一般情况下,要使域名能访问到网站需要两步,第一步,将域名解析到网站所在的主机,第二步,在web服务器中将域名与相应的网站绑定.但是,如果通过主机IP能直接访问某网站,那么把域名解析到这个IP也将能访问到该网站,而无需在主机上绑定,也就是说任何人将任何域名解析到这个IP就能访问到这个网站.可能您并不介意通过别人的域名访问到您的网站,但是如果这个域名是未备案域名呢?一旦被查出,封IP.拔线甚至罚款的后果都是需要您来承担的.某些别有用心的人,通过将未备案域名解析到别人的主机上,使其

写论文会用到的网站

罗列一些论文和资料的网站: 1)Springer link 外文资料网站,可下载PDF https://link.springer.com/ 2)HighWire Press由斯坦福大学HighWire出版社提供,是世界最大的科学免费期刊库,目前可以提供免费全文期刊1000余种,100万多篇免费全文. https://www.highwirepress.com/ 3)国内外会议论文 http://www.ourglocal.com/ 4)https://arxiv.org/   最新论文,论文质

web网站更换新域名

第一步.绑定新的域名到单独的空间 一般我们都是用的VPS或者不限制建站数量的虚拟主机,尽量的保持原有的IP不变,我这边在老站点同IP的VPS主机下新建一个新域名站点,这样我们可以确保原有的站点IP不变,因为站点频繁的更换IP也是会受影响的. 第二步.复制数据到新站点下 把老站点下的网站文件和数据库复制到新站点下,这里其实只需要把文件搬到新站点下.因为我使用的是WORDPRESS程序,所以在数据库中修改2处网址为新的地址,其次,我用批量替换内容把牵扯到内容中的旧的URL地址改成新的网址. 第三步.

了解网站渗透

在百度找到这样一片文章:讲的是渗透的过程,虽然还是有很多不懂,觉得写的不错,留下来慢慢研究: 首先把,主站入手 注册一个账号,看下上传点,等等之类的. 用google找下注入点,格式是 Site:XXX.com inurl:asp|php|aspx|jsp 最好不要带 www,因为不带的话可以检测二级域名. 扫目录,看编辑器和Fckeditor,看下敏感目录,有没有目录遍及, 查下是iis6,iis5.iis7,这些都有不同的利用方法 Iis6解析漏洞 Iis5远程溢出, Iis7畸形解析 Ph

DEDE5.7如何制作网站地图？

DEDE用的人很多,可能大家在使用的过程中会碰到一些问 题,这很正常的,今天我们来讲讲DEDE5.7如何制作网站地图,其实网站地图分两种,一种做给网友看的,方便网友可以方便地找到自己想浏览的内容,另外 一种是做给搜索引擎蜘蛛看,方便蜘蛛在你网站上面抓取内容.    当然,我们这里讲的主要是针对蜘蛛的,因为DEDE默认的就有针对用户的网站地图,主要是以栏目的形式展现,这个可以在DEDE后台自行生成.其实大家印象当中的网站地图是XML格式的,一般命名成sitemap.xml,接下来进入正题.    

使用express vpn导致国内网站无法访问的问题

一直在付费使用express vpn,网速很快. 但是最近发现一个问题,使用express vpnFQ之后,国外的网站访问正常,但是国内的网站却无法访问. 我的使用环境:win 10, 使用express vpn dns, expess vpn auto connect. 为了找到原因,在express vpn连接上的条件下,打开cmd窗口,依次ping baidu.com和163.com,结果为找不到域名对应的IP地址. 然后我再关闭express vpn连接,重新ping,发现IP地址解析正

C# 远程服务器 创建、修改、删除 应用程序池 网站

首先 C# 操作 站点 需要 引用Microsoft.Web.Administration.dll 文件,创建站点我们一般需要 远程服务的IP,网站名称.端口.物理路径:这里默认网站名称和应用程序池名称一致. 应用程序池默认不启动,应为刚创建站点是没有对应真实的物理文件,修改 队列长度.启动模式.回收时间.最大工作进程, 以及日志路径.修改的时候如果修改站点物理路径的话,我们需要把文件 从旧得目录拷贝到新的目录下,删除站点就比较简单了. 但是站点应用程序池的停止 和启动就比较难搞了,不是调用st

(转）625某电商网站数据库宕机故障解决实录（下）

1.4开始进行故障恢复***** 1.重新初始化建库 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 [[email protected] data]# mkdir mysql [[email protected] data]# chown -R mysql.mysql mysql [ro[email protected] data]# /install/mysql/sc