搜索到
147
篇与
的结果
-
给页面添加点击页面出现富强、民主、文明这类文字动画效果 JS代码放到全局内容页尾（全局 : html > body ( footer_js_after )）<script> !function() { var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"], index = Math.floor(Math.random() * coreSocialistValues.length); document.body.addEventListener('click', function(e) { if (e.target.tagName == 'A') { return; } var x = e.pageX, y = e.pageY, span = document.createElement('span'); span.textContent = coreSocialistValues[index]; index = (index + 1) % coreSocialistValues.length; span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #1976d2; top: ', y - 20, 'px; left: ', x, 'px;'].join(''); document.body.appendChild(span); animate(span); }); function animate(el) { var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7); function frame() { if (i > 180) { clearInterval(id); el.parentNode.removeChild(el); } else { i += 2; el.style.top = top - i + 'px'; el.style.opacity = (180 - i) / 180; } } } }() </script> -
给页面添加下雪花的效果 代码可放到全局内容页尾（全局 : html > body ( footer_js_after )）或者某个页面<canvas id="Snow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: rgba(125,137,95,0.1);pointer-events: none;"></canvas> <script> if(true){ (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame; })(); (function() { var flakes = [], canvas = document.getElementById("Snow"), ctx = canvas.getContext("2d"), flakeCount = 200, mX = -100, mY = -100; canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < flakeCount; i++) { var flake = flakes[i], x = mX, y = mY, minDist = 150, x2 = flake.x, y2 = flake.y; var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), dx = x2 - x, dy = y2 - y; if (dist < minDist) { var force = minDist / (dist * dist), xcomp = (x - x2) / dist, ycomp = (y - y2) / dist, deltaV = force / 2; flake.velX -= deltaV * xcomp; flake.velY -= deltaV * ycomp; } else { flake.velX *= .98; if (flake.velY <= flake.speed) { flake.velY = flake.speed } flake.velX += Math.cos(flake.step += .05) * flake.stepSize; } ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; flake.y += flake.velY; flake.x += flake.velX; if (flake.y >= canvas.height || flake.y <= 0) { reset(flake); } if (flake.x >= canvas.width || flake.x <= 0) { reset(flake); } ctx.beginPath(); ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(snow); }; function reset(flake) { flake.x = Math.floor(Math.random() * canvas.width); flake.y = 0; flake.size = (Math.random() * 3) + 2; flake.speed = (Math.random() * 1) + 0.5; flake.velY = flake.speed; flake.velX = 0; flake.opacity = (Math.random() * 0.5) + 0.3; } function init() { for (var i = 0; i < flakeCount; i++) { var x = Math.floor(Math.random() * canvas.width), y = Math.floor(Math.random() * canvas.height), size = (Math.random() * 3) + 2, speed = (Math.random() * 1) + 0.5, opacity = (Math.random() * 0.5) + 0.3; flakes.push({ speed: speed, velY: speed, velX: 0, x: x, y: y, size: size, stepSize: (Math.random()) / 30 * 1, step: 0, angle: 180, opacity: opacity }); } snow(); }; document.addEventListener("mousemove", function(e) { mX = e.clientX, mY = e.clientY }); window.addEventListener("resize", function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); init(); })(); } </script>
-
-
新年倒计时代码 <style type="text/css"> .deng-box{position:fixed;top:-40px;right:-20px;z-index:9999;pointer-events:none} .deng-box1{position:fixed;top:-30px;right:10px;z-index:9999;pointer-events:none} .deng-box2{position:fixed;top:-40px;left:-20px;z-index:9999;pointer-events:none} .deng-box3{position:fixed;top:-30px;left:10px;z-index:9999;pointer-events:none} .deng-box1 .deng,.deng-box3 .deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px #fc903d} .deng{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px #fa6c00} .deng-a{width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:12px 8px 8px 8px;border-radius:50% 50%;border:2px solid #dc8f03} .deng-b{width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:-4px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03} .xian{position:absolute;top:-20px;left:60px;width:2px;height:20px;background:#dc8f03} .shui-a{position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50% -45px;background:orange;border-radius:0 0 5px 5px} .shui-b{position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%} .shui-c{position:absolute;top:18px;left:-2px;width:10px;height:35px;background:orange;border-radius:0 0 0 5px} .deng:before{position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .deng:after{position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .deng-t{font-family:华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center} .night .deng-box,.night .deng-box1,.night .deng-t{background:0 0!important}@-moz-keyframes swing{0%{-moz-transform:rotate(-10deg)}50%{-moz-transform:rotate(10deg)}100%{-moz-transform:rotate(-10deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg)}100%{-webkit-transform:rotate(-10deg)}} </style> <article> <div class="gn_box wow zoomIn"> <h1> <center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>1</font><font color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font> </center> </h1> <center> <div id="CountMsg" class="HotDate" style="margin-bottom: 10px;"> <font color="red"><span id="t_d">* 天</span></font> <font color="red"><span id="t_h">* 时</span></font> <font color="red"><span id="t_m">* 分</span></font> <font color="red"><span id="t_s">* 秒</span></font> </div> </center> <script type="text/javascript"> function getRTime() { var EndTime = new Date("2021/02/11 00:00:00"); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 1000); </script> </div> </article> <!--新年倒计时结束-->
-
-
-
Xiuno BBS 模板风格开发参考 修罗BBS系统可以用来搞CMS，可以通过自己做模版的方式搞一下文章系统下面是从零开发模版所需要用到的信息首先Xiuno的模板是要放在 plugin 文件夹下, 当做一个插件来使用的关于默认风格的参考模板在 view 文件夹下, 其中 htm 文件夹是主要模板文件如果在原默认模板的基础上开发修改, 就直接复制view/htm这个文件夹到 plugin/你的主题/overwrite/view 下就行样式什么的可以在htm文件里重新定义下overwrite文件夹的意思就是将这里的文件覆盖原始模板, 这个官方文档里有提到.模板文件index.htm : 首页模板 header.inc.htm : 头部模板 footer.inc.htm : 尾部模板 thread_list.inc.htm : 帖子列表模板 (循环) thread.htm : 帖子内容模板 post_list.inc.htm : 留言列表模板 (循环) post.htm : 发布帖子模板 forum.htm : 板块模板 user_create.htm : 用户注册模板 user_login.htm : 用户登录模板 my.htm : 个人中心模板 my_profile.htm : 个人中心 – 资料 模板 user_profile.htm : 用户个人中心 – 资料 模板 browser.htm : 浏览器提示信息属性网站头部必须引用( header.inc.htm )<?php $conf = G(‘conf’);?> <?php $header = G(‘header’);?> <?php $user = G(‘user’);?> <?php $uid = G(‘uid’);?> <?php $gid = G(‘gid’);?> <?php $fid = G(‘fid’);?> <?php $tid = G(‘tid’);?> <?php $pid = G(‘pid’);?> <?php $route = G(‘route’);?> <?php $forumlist_show = G(‘forumlist_show’);?> <?php $static_version = $conf[‘static_version’];?> header.inc.htm : 头部模板常用属性 <?php echo $header[‘title’];?> : 网站名称 <?php echo $header[‘keywords’];?> : 网站关键词 <?php echo $header[‘description’];?> : 网站描述 <?php%20echo%20url(‘user-login’);?> : 网站登录链接地址 <?php%20echo%20url(‘user-create’);?> : 网站注册链接地址 <?php%20echo%20url(‘user-logout’);?> : 注销地址 <?php%20echo%20url(‘my’);?> : 个人中心链接地址 <?php echo $user[‘username’];?> : 当前登录用户名 thread_list.inc.htm : 帖子列表模板常用属性 <?php echo $_thread[‘forumname’];?> : 帖子板块名称 <?php%20echo%20url(“forum-$_thread[fid]”);?> : 板块链接地址 <?php%20echo%20url(“thread-$_thread[tid]”);?> : 帖子链接地址 <?php echo $_thread[‘subject’];?> : 帖子标题 <?php echo $_thread[‘username’];?> : 作者名字 <?php%20echo%20url(“user-$_thread[uid]”);?> : 作者个人中心链接地址 <?php echo $_thread[‘create_date_fmt’];?> : 帖子发布时间( 格式为 几分钟前, 几小时前, 几天前.. ) <?php echo $_thread[‘views’];?> : 帖子浏览数 <?php echo $_thread[‘posts’];?> : 帖子回复数 <?php if($_thread[‘top’] > 0) { ?>[置顶]<?php } ?> : 如果是置顶帖子, 则显示”[置顶]” <?php if($_thread[‘files’] > 0) { ?>[附件]<?php } ?> : 如果是带有附件的帖子, 则显示”[附件]” <?php if($_thread[‘closed’] > 0) { ?>[锁定]<?php } ?> : 如果是锁定的帖子, 则显示”[锁定]” thread.htm : 帖子内容模板常用属性 <?php echo $forum[‘name’];?> : 帖子板块名称 <?php%20echo%20url(“forum-$thread[fid]”);?> : 板块链接地址 <?php%20echo%20url(‘thread-create-‘.$fid);?> : 发布帖子链接地址 <?php echo $thread[‘subject’];?> : 帖子标题 <?php echo $thread[‘username’];?> : 作者名字 <?php%20echo%20url(“user-$thread[uid]”);?> : 作者个人中心链接地址 <?php echo $thread[‘create_date_fmt’];?> : 帖子发布时间( 格式为 几分钟前, 几小时前, 几天前.. ) <?php echo $thread[‘views’];?> : 帖子浏览数 <?php echo $thread[‘posts’];?> : 帖子回复数 <?php if($thread[‘top’] > 0) { ?>[置顶]<?php } ?> : 如果是置顶帖子, 则显示”[置顶]” <?php if($thread[‘files’] > 0) { ?>[附件]<?php } ?> : 如果是带有附件的帖子, 则显示”[附件]” <?php if($thread[‘closed’] > 0) { ?>[锁定]<?php } ?> : 如果是锁定的帖子, 则显示”[锁定]” post_list.inc.htm : 留言列表模板头部引用<?php empty($allowupdate) AND $allowupdate = 0; empty($allowdelete) AND $allowdelete = 0; empty($allowpost) AND $allowpost = 0; ?> <?php echo $_post[‘pid’];?> : 回复ID <?php echo $_post[‘username’];?> : 回复人的名称 <?php%20echo%20url(“user-$_post[uid]”);?> : 回复人的个人中心链接地址 <?php echo $_post[‘floor’];?> : 回复楼数 <?php echo $_post[‘subject’];?> : 引用文字 <?php echo $_post[‘message_fmt’];?> : 回复内容 <?php echo post_file_list_html($_post[‘filelist’]);?> : 附件 方法 循环显示论坛板块 <?php foreach($forumlist_show as $_forum) { ?> <div fid=”<?php echo $_forum[‘fid’];?>”> <a href=”<?php%20echo%20url(“forum-$_forum[fid]”);?>”><?php echo $_forum[‘name’];?></a> </div> <?php } ?>引用( footer.inc.htm ) 其中 bootstrap.js 是必不可少的, 牵扯到实时回帖..<script src=”lang/<?php%20echo%20$conf[‘lang’];?>/bbs.js<?php%20echo%20$static_version;?>”></script> <script src=”<?php%20echo%20$conf[‘view_url’];?>js/jquery-3.1.0.js<?php%20echo%20$static_version;?>”></script> <script src=”<?php%20echo%20$conf[‘view_url’];?>js/tether.js<?php%20echo%20$static_version;?>”></script> <script src=”<?php%20echo%20$conf[‘view_url’];?>js/bootstrap.js<?php%20echo%20$static_version;?>”></script> <script src=”<?php%20echo%20$conf[‘view_url’];?>js/bootstrap-plugin.js<?php%20echo%20$static_version;?>”></script> <script src=”<?php%20echo%20$conf[‘view_url’];?>js/async.js<?php%20echo%20$static_version;?>”></script> <script src=”<?php%20echo%20$conf[‘view_url’];?>js/xiuno.js<?php%20echo%20$static_version;?>”></script> <script src=”<?php%20echo%20$conf[‘view_url’];?>js/form.js<?php%20echo%20$static_version;?>”></script> <script> var debug = DEBUG = <?php echo DEBUG; ?>; var url_rewrite_on = <?php echo $conf[‘url_rewrite_on’];?>; var forumarr = <?php echo xn_json_encode($forumarr);?>; var fid = <?php echo $fid;?>; </script> <script src=”<?php%20echo%20$conf[‘view_url’];?>js/bbs.js<?php%20echo%20$static_version;?>”></script>
-
typecho美化小功能，添加后台开关 开启关闭按钮有时候我们发现一个好玩的效果将它放在自己的博客里，但是过一段时间看腻了又把它删掉了，然后再过一段时间又脑残的又想要那种效果，于是再添加进来，这样不用就删，用了再添加非常的麻烦。不如直接弄了开启关闭的按钮，用的时候点开启，不用的时候点关闭，这样就简单的多了，那么怎么实现呢？在主题文件夹中找到functions.php文件，在里面最下面添加以下代码： $xiaxue（可以是英文、数字、组合等，比如我弄个下雪的开启关闭按钮就写成下雪的拼音：xiaxue） = new Typecho_Widget_Helper_Form_Element_Select('xiaxue（和前面的英文标识要一致）',array(0=>'不开启',1=>'开启'),0,'按钮功能标题','按钮功能介绍'); $form->addInput($xiaxue（和前面的英文标识要一致）);接着在需要展示的特效代码前面加以下代码： <?php if($this -> options -> xiaxue（和前面的英文标识要一致） == '1'): ?> 特效代码 <?php endif; ?>自定义内容有时候想在博客里加一些自定义内容，如运行时间，公告，提醒等等，该怎么实现呢？还是在主题文件夹中找到functions.php文件，在里面最下面添加以下代码： $gonggao（可以是英文、数字、组合等，比如我弄个公告的内容按钮就写成公告的拼音：gonggao） = new Typecho_Widget_Helper_Form_Element_Text( 'gonggao（和前面的英文标识要一致）', NULL, NULL, '内容说明', '内容介绍' ); $form->addInput($gonggao（和前面的英文标识要一致）);然后在需要些内容的地方加入以下代码： <?php if ($this->options->gonggao（和前面的英文标识要一致）) : ?> <?php $adContent1 = $this->options->JADContent1; $adContent1Counts = explode("||", $adContent1); ?> 特效代码中需要输出内容的地方替换成<?php echo $adContent1Counts[0] ?>，如果需要写多处内容的话可以用<?php echo $adContent1Counts[1] ?>、<?php echo $adContent1Counts[2] ?>、<?php echo $adContent1Counts[3] ?>表示 <?php endif; ?>上面的内容用||隔开，例如想加一个图片链接： <?php if ($this->options->gonggao（和前面的英文标识要一致）) : ?> <?php $adContent1 = $this->options->JADContent1; $adContent1Counts = explode("||", $adContent1); ?> <a href="<?php echo $adContent1Counts[1] ?>"> <img src="<?php echo $adContent1Counts[0] ?>"> </a> <?php endif; ?>内容写:图片地址||链接地址 如：https://2025ly.cn/img/ico.png||https://2025ly.cn/自定义宽度隐藏有的时候我们放一段特效代码希望只在电脑端显示，手机端不显示（或者手机端显示，电脑都不显示），该如何实现呢？首先要确保改特效代码有class属性，如果没有的话就新建一个class。如：我像要一张图片在电脑端显示，手机端不显示，那就先在图片代码里加一个class，如下： <img class="haha(随便写，只要和其他CLASS重复就可以)" src="图片地址" >然后在主题的style.CSS文件（不同的主题CSS文件不一样，如JOE主题的CSS文件是在assets/css/joe.min.css）里最下面加以下代码： @media (max-width: 768px) { .haha(和上面的class标识一致） { display: none !important; } }{alert type="info"}以上代码中768px是最大宽度，意思是大于768px显示代码，小于768px就不显示，可以根据自己的情况修改宽度，当然也可以改成高度:max-width{/alert}
-
xiuno程序在主题文章页中加入上一篇、下一篇功能教程 修罗xiuno程序在主题文章页中加入上一篇、下一篇功能教程<!--在内容页增加上一篇和下一篇--> <div class="updown"> <?php $arrlist_n = db_find_one('thread', array('fid'=>$fid, 'tid'=>array('>'=>$tid)), array('tid'=>1)); $arrlist_p = db_find_one('thread', array('fid'=>$fid, 'tid'=>array('<'=>$tid)), array('tid'=>-1)); if($arrlist_p){ echo '<a href="'.url("thread-".$arrlist_p['tid']).'"> <span>上一篇：'.$arrlist_p['subject'].'</span></a>';}else{echo '<span>上一篇：没了</span>';} if($arrlist_n){ echo '<a href="'.url("thread-".$arrlist_n['tid']).'"> <span>下一篇：'.$arrlist_n['subject'].'</span></a>';}else{echo '<span>下一篇：没了</span>';}?> </div> <!--//可直接hook在帖子结尾-->
