首页 » 技术教程 » 网站特效

这家伙很懒,还没填写该栏目的介绍呢~

简单的返回顶部特效

简单的返回顶部特效

首先引入jQuery js代码如下 $(function(){         //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失         $(function () {             $(window).scroll(function(){                 if ($(window).scrollTop()>100){                     $("#backtop").css("bottom","1px");                 }                 else                 {              &n...

评论(0) 2019-11-15
转载自适应404页面特效html源码

转载自适应404页面特效html源码

HTML+CSS自适应404页面特效源码,思源转载于优梦云<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>错误提示-页面未找到</title>    <style type="text/css"> <!-- body{height: 80vh;display:flex;background-color:#222a30;flex-direction:column;align-items:center;justify-content:center;} .min,.mini{color:#fff;text-indent:12px;letter-spacing:12px;font-size:100px;font-family:Cabin,sans-serif;-webkit-animation:colorText 5s ease-out infinite,nud...

评论(0) 2019-10-1
fancybox3图片浮窗增强jQuery插件

fancybox3图片浮窗增强jQuery插件

介绍:用于呈现各种类型媒体的javascript lightbox库。响应灵敏,触控灵活,可定制。3.0主要就是功能多且美观官方给出的最快使用方法<!-- 1. Add latest jQuery and fancybox files --> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> <!-- 2. Create links --> <a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a> <a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a> <!-- 3. Have fun! -->但是美中不足,我们希望内容文章图片直接增加属性还需要写一句代码<script> $('.message img').paren...

评论(0) 2019-9-30
[JS插件]酷炫的打字机效果: Typed.js

[JS插件]酷炫的打字机效果: Typed.js

文章转载与简书https://www.jianshu.com/p/37ff22decc62 typed.js效果预览地址Type.js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.1.简单介绍饮用方法//script标签导入<script src="./typed.js"></script>//cdn导入   <script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>2. 实例化对象 <span class="element"></span> //目标容器  <script>    var typed = new Typed('.element', {      strings: ["纠正一个错误的方法有很多", "而解决一个错误的终极方法,就是不给它发生的机会。"], //输入内容, 支持html标签       typeSpeed: 100, //打字速度       backSpeed: 50 //回退速度     });</script>如果想加入鼠标闪烁效果, 引入一下样式   .typed-cursor{      opacity: 1;      -webk...

评论(0) 2019-7-5
JS打印机效果代码整理

JS打印机效果代码整理

纯js性 简单快速 功能少<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打字机效果</title> </head> <body> <div id="HotNews"> </div> <script type="text/javascript"> var NewsTime=2000; var TextTime=50; var newsi=0; var txti=0; var txttimer; var newstimer; var newstitle=new Array(); //微博标题 var newshref=new Array(); //微博链接 newstitle[0]="健康是身体的本钱"; newshref[0]="#"; newstitle[1]="关心身体,就是关心自己"; newshref[1]="#"; newstitle[2]="去西藏旅游了"; newshref[2]="#"; newstitle[3]="大雨倾盆,很大呀"; newshref[3]="#"; function shownew(){ var endstr=""; hwnewstr=newstitle[newsi]; newslink=newshref[newsi]; if(txti==(hwnewstr.length-1)){ endstr=""; } if(txti>=hwnewstr.length){ clearInterval(txttimer); cle...

评论(0) 2019-7-5
jQuery电商网站楼层滚动定位

jQuery电商网站楼层滚动定位

转载于前端网<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>jQuery电商网站楼层滚动定位</title>     <style type="text/css">         *{margin: 0;padding: 0;}         i{font-style: normal;}         ul,li,dl,ol{list-style: none;}         #LoutiNav{ border: 1px solid gray; width: 30px; position: fixed; top: 150px; left: 50px; display: none;}         #LoutiNav li{ width: 30px; height: 30px;border-bottom: 1px solid gray; line-height: 30px; text-align: center; cursor: pointer;}     ...

评论(0) 2018-8-10
[JS]文字逐字打出

[JS]文字逐字打出

好久不更新了[JS]文字逐字打出代码如下<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title>Title</title>     </head>     <body>         <div id="content"></div>     </body>     <script>         window.onload = function() {             let word = '我是一个个的文字,慢慢的被打出 ';             let n = 0;             let t = setInterval(function() {   ...

评论(0) 2018-8-10
aos.js超赞页面滚动元素动画特效jQuery动画库

aos.js超赞页面滚动元素动画特效jQuery动画库

简要教程aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。演示http://michalsnik.github.io/aos/安装可以通过bower来安装aos动画库插件。bower install aos --save使用方法在页面中引入aos.css文件,jquery和aos.js文件<link rel="stylesheet" href="dist/aos.css" /><script src="js/jquery.min.js"></script><script src="dist/aos.js"></script>HTML结构要使用aos动画库,你需要做的就是在需要动画的元素上添加aos属性,例如:<div aos="animation_name">aos脚本将会在页面滚动时,在该元素上触发相应的动画。在元素上还可以添加以下一些属性:属性属性属性默认值aos-offset是立刻触发动画还是在指定时间之后触发动画200120aos-duration动画持续时间600400aos-easing动画的easing动画效果ease-in-sineeaseaos-delay动画的延迟时间3000aos-anchor锚元素。使用它的偏移来取代实际元素的偏移来触发动画#selectornullaos-anchor-placement锚位置,触发动画时元素位于屏幕的位置top-centertop-bottomaos-once动画是否只会触发一次,或者每次上下滚动都会触发truefalse注意,aos-duration的动画持续时间的范围从50-3000毫秒,如果你想设置更大的值,可以在页面中添加下面的CSS代码:body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{  transition-duration: 4000ms;}上面的代码将动画的持续...

评论(0) 2017-11-19
网站标题特效集合

网站标题特效集合

js 判断页面切换时,标题改变<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>this is a test</title> <script> document.addEventListener('visibilitychange',function(){ if(document.visibilityState=='hidden') { normal_title=document.title; document.title='(づ ̄ 3 ̄)づ'; } else document.title=normal_title; }); </script> </head> <body> <p>very 66666!</p> </body> </html>此段代码 在切换页面后自动改变标题。js的简单应用。标题闪动,你有新短消息特效简洁版<html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>无标题文档</title> </head> <body> <script language="JavaScript">  step=0  function flash_title()  {   step++   if (step==3) {step=1}&...

评论(2) 2017-11-19
好看的进度环返回按钮

好看的进度环返回按钮

在杨小杰博客看到的在以前某博客的某页面也见过类似效果分享给大家大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布,百分比数字是用data储存并使用css的 content属性实现。Canvas进度环返回按钮实现方法:确保引入了jquery,下面的代码加入到你的js里面var bigfa_scroll = {     drawCircle: function(id, percentage, color) {         var width = jQuery(id).width();         var height = jQuery(id).height();         var radius = parseInt(width / 2.20);         var position = width;         var positionBy2 = position / 2;         var bg = jQuery(id)[0];         id = id.split("#");         var c...

评论(0) 2017-10-16
免费生成网站缩略图

免费生成网站缩略图

在blinky 可以生成4种格式的网站缩略图 来个实例 64x64:http://blinky.nemui.org/shot/small?http://www.isiyuan.net 128x128:http://blinky.nemui.org/shot?http://www.isiyuan.net 256x256:http://blinky.nemui.org/shot/large?http://www.isiyuan.net 512x512:http://blinky.nemui.org/shot/xlarge?http://www.isiyuan.net 不过这个只可以生成一种设备的 分享一下以前写的一个小程序PHP的 点我生成多设备缩略图

评论(3) 2017-9-12
php js 实例分享实现显示网站运行时间 - 显示年月日时分秒

php js 实例分享实现显示网站运行时间 - 显示年月日时分秒

分享两个版本的网站运行时间代码  PHP版本 显示为 本站运行:3年9月10天 <?php date_default_timezone_set('Asia/Shanghai'); function Sec2Time($time){if(is_numeric($time)){$value = array("y"=>0,"m" =>0,"d" =>0,"h" =>0,"i" =>0,"s" =>0,); if($time>=31556926){$value["y"] = floor($time/31556926);$time=($time%31556926);} if($time>=2592000){$value["m"]=floor($time/2592000);$time=($time%2592000);} if($time>=86400){$value["d"]=floor($time/86400);$time=($time%86400);} if($time>=3600){$value["h"]=floor($time/3600);$time = ($time%3600);} if($time>=60){$value["i"] = floor($time/60);$time = ($time%60);} $value["seconds"]=floor($time);return (array) $value;}else{return (bool) FALSE;}} $site_create_time = strtotime('2014-01-01'); $time = time() - $site_create_time; $sltime = Sec2Time($time); echo '本站运行:';if($sltime['y']!='0'){echo $sltime['y'].'年';}if($sltime['m']=='0' && $sltime['d']=='0'){echo '整';}if($sltime['m']!='0'){echo $sltime['m'].'月';}else{if($s...

评论(2) 2017-9-10