html中的那些炫酷吊炸天的操作

最新推荐文章于 2024-07-25 11:26:35 发布

Cynicism_Kevin

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量1.4w

点赞数 11

文章标签： html css javascript

1.evanyou 效果-彩带的实现，效果如下

注：这个主要用的是 Canvas 画布实现的，点击背景绘制新的图形，代码如下：

/*Html代码:*/
<canvasid="evanyou" width="1920" height="934"></canvas>
/*CSS代码:*/
<styletype="text/css">
  #evanyou{
   position:fixed;
   width:100%;
   height:100%;
   left:0;
   top:0;
  }
</style>

/*JS代码:*/
//evanyou效果
   var c = document.getElementById('evanyou'),
   x = c.getContext('2d'),
   pr = window.devicePixelRatio || 1,
   w = window.innerWidth,
   h = window.innerHeight,
   f = 90,
   q,
   m = Math,
   r = 0,
   u = m.PI * 2,
   v = m.cos,
   z = m.random;
   c.width = w * pr;
   c.height = h * pr;
   x.scale(pr, pr);
   x.globalAlpha = 0.6;
   function evanyou() {
   x.clearRect(0, 0, w, h)
   q = [{ x: 0, y: h * .7 + f }, { x: 0, y: h * .7 - f }]
   while (q[1].x < w + f) d(q[0], q[1])
   }
   function d(i,j) {
   x.beginPath()
   x.moveTo(i.x, i.y)
   x.lineTo(j.x, j.y)
   var k = j.x + (z() * 2 - 0.25) * f,
   n = y(j.y)
   x.lineTo(k, n)
   x.closePath()
   r -= u / -50
   x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u/ 3) * 127 + 128 << 8 | v(r + u/ 3 * 2) * 127 + 128).toString(16)
   x.fill()
   q[0] = q[1]
   q[1] = { x: k, y: n }
   }
   function y(p) {
   var t = p + (z() * 2 - 1.1) * f
   return (t > h || t < 0) ? y(p) : t
   }
   document.onclick = evanyou
   document.ontouchstart = evanyou
   evanyou();

View Code

2. 返回顶部特效（滚动条上移或者点击会自动隐藏和显示），效果如下:

//Html代码:
body>
  
  <div id="back-to-top" class="red" data-scroll="body" style="top:-46px;color:red;">回到顶部 </div>

  <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
  <p>hello</p><p>hello</p><p>hello</p>
  <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
   <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
   <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>

//CSS样式
#back-to-top{
   position:fixed;
   right:50px;
   z-index:9;
   width:70px;
   height:900px;
   background:url('/Content/Images/scroll.png');
   transition:0.5s;
   cursor:pointer;
   }
//JS部分:
  <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script type="text/javascript">
   window.onload = function () {
   // 利用 data-scroll 属性，滚动到任意 dom 元素
   $.scrollto = function (scrolldom, scrolltime) {
   $(scrolldom).click(function () {
   var scrolltodom =$(this).attr("data-scroll");
   $(this).addClass("active").siblings().removeClass("active");
   $('html, body').animate({
   scrollTop: $(scrolltodom).offset().top
   }, scrolltime);
   return false;
   });
   };
   //判断位置控制返回顶部的显隐
   if ($(window).width() > 800) {//如果窗体的宽度大于800
   var backTo = $("#back-to-top");//获取back-to-top对象
   var backHeight = $(window).height() - 980 + 'px';//让window高度减980
   $(window).scroll(function () {
   if ($(window).scrollTop()> 700 && backTo.css('top') === '-900px') {
     backTo.css('top', backHeight);
   }
   else if ($(window).scrollTop()<= 700 && backTo.css('top') !== '-900px') {
     backTo.css('top', '-900px');
   }
   });

   }
   //启用
   $.scrollto("#back-to-top", 800);

   }
  </script>

View Code

3. 左下角探头效果

PS：这个图片在网页的左下角，鼠标移动上去探头效果，代码如下

//Html代码
<div class="xm">
   <img src="/Content/Images/xiaomai.png" />
  </div>
//CSS代码
<style>
   .xm{
   position:fixed;
   bottom:0;
   left:0;
   z-index:1;
   font-size:0;
   transition:all .3s ease-in-out;
   transform:translateY(3px);
   }
   .xm:hover{
   -webkit-transform:translateY(0);
   -ms-transform:translateY(0);
   }
   .xm img{
   width:50px;
   }
  </style>

View Code

4. 文字翻转效果（点击翻转，一开始加载页面也翻转）

代码如下：

//Html代码
<header class="header-description">
   <div id="site-header">
   <h1>
   <a href="@Url.Action("JianJIe", "Home")" title="Anneke.cn">日月君地带</a>
   </h1>
   <p class="typed"><a href="@Url.Action("JianJIe", "Home")" title="Anneke.cn">日月君地带</a><span class="typed-cursor">|</span></p>
   </div>
  </header>
//CSS代码
<style type="text/css">
   #site-header {
   font-size: 40px !important;
   font-weight: 700;
   z-index: 1;
   text-align: center;
   position: relative;
   top: 180px;
   font-family: kilsonburg,"Avenir Next",Helvetica,Arial,"LantingheiSC","MicrosoftYaHei",sans-serif;
   font-size: 34px;
   text-shadow: 0 1px 1px #47456d;
   margin-bottom: 130px;
   animation: show-site-title 1s ease-out;
   -o-animation: show-site-title 1s ease-out;
   -moz-animation: show-site-title 1s ease-out;
   -webkit-animation: show-site-title 1s ease-out;
   }
   #site-header h1 {
   display: none;
   }
   #site-header a {
   color: #fff;
   font-weight: 400;
   }
   body {
   background-color:#0094ff;
   }

  </style>

//Script部分
$(document).ready(function($) {
   $(".typed a").typed({
   strings: ["这里是地狱之门", "日月君地带"],
   typeSpeed: 30,
   backSpeed: 30,
   backDelay: 700
   });
   });

//PS：需要引入两个文件：一个是jquery-1.8.2.min.js文件，一个是
//typed.min.js文件（PS：自定义的，下面会贴出来）

View Code

typed.min.js 代码:

View Code

5. 在离开网页时，触发事件（这里以改变标题为例）

注:这里鼠标移开时，同时改变网页 title 和 icon 图标，代码如下

//Head部分
<head>
  <meta name="viewport" content="width=device-width" />
  <title>IT发烧友，一个真正的技术交流群</title>
  <link rel="shortcuticon" href="/Content/Images/icon.png">
</head>
//JS部分
  <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script>
   window.onload = function () {
   var OriginTitile = document.title;
   var titleTime;
   document.addEventListener('visibilitychange', function () {
   if (document.hidden) {
   $('[rel="shortcuticon"]').attr('href', "/Content/Images/fail.ico");
   document.title = '(●—●)喔哟，崩溃啦！';
     clearTimeout(titleTime);
   }
   else {
   $('[rel="shortcuticon"]').attr('href', "/Content/Images/icon.png");
   document.title = '(/≧▽≦/)咦！又好了！' +OriginTitile;
   titleTime =setTimeout(function () {
   document.title =OriginTitile;
   }, 2000);
   }
   });
   }
  </script>

View Code

6. 移入网页时改变鼠标的样式

PS:这个只要在样式里面设置即可，也就是移入时显示一张图片，代码如下：

//css如下所示
<style>
   abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
   margin: 0;
   padding: 0;
   cursor: url('/Content/Image/cursor.ico'),auto;
   }
  </style>

View Code

7. 文字向上滚动效果（PS：鼠标悬停停止滚动）

代码如下:

//HTML代码
<divalign="center" id="demo">
   <div id="demo1">
   我是滚动内容<br/>
   你来抓我啊<br/>
   嗖嗖嗖<br/>
   2333333333333333333333333
   </div>
   <div id="demo2"></div>
   </div>
//CSS代码:
#demo{
   overflow:hidden;
   height:200px;
   width:250px;
   border:1px solid #6699cc;
   font-size:14px;
   color:#336699;
   line-height:22px;
   text-align:left;
   padding:10px;
   }
//JS代码:
var demo=document.getElementById("demo");
  var demo1=document.getElementById("demo1");
  var demo2=document.getElementById("demo2");
  var speed=30;//滚动速度值,值越大速度越慢
  var nnn=200/demo1.offsetHeight;
  for(i=0;i<nnn;i++){demo1.innerHTML+="<br/>"+ demo1.innerHTML}
demo2.innerHTML= demo1.innerHTML //克隆demo2为demo1
function Marquee(){
  if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
   demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
  else{
   demo.scrollTop++   //如果是横向的将所有的 height top改成 width left
  }
}
var MyMar =setInterval(Marquee,speed); //设置定时器
demo.οnmοuseοver= function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的
demo.οnmοuseοut= function(){MyMar =setInterval(Marquee,speed)} //鼠标移开时重设定时器

View Code

8. 鼠标移入效果

PS：鼠标移入，使区域旋转变色

//Style样式
<link href="~/Content/amazeui.min.css" rel="stylesheet" />
<style type="text/css">
   #XuanZhuan li{
   width:200px;
   height:50px;
   background-color:pink;
   margin-left:15px;
   position:relative;
   float:left;
   list-style:none;
   margin-top:15px;
   }
   div{
   width:470px;
   }
   #XuanZhuan li:hover{
   cursor:pointer;
   }
  </style>
//Html标签
<div>
   <ul id="XuanZhuan">
   <li>
   11111111111111111
   </li>
   <li>
   222222222222222
   </li>
     <li>
   333333333333333
     </li>
   <li>
   4444444444444444
   </li>
   </ul>
  </div>
//Script
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script type="text/javascript">
   //在友情链接页面，鼠标放在li上,li旋转效果
   $(function () {
   $("#XuanZhuan li").hover(function () {
   $(this).css("background-color", "yellow");
   $(this).attr("class", "am-animation-spin");
   }, function () {
   $(this).css("background-color", "pink");
   $(this).attr("class", "");
   });
   })
  </script>

9. 旋转星空，点击放烟花效果

实现代码:

//Html代码
<div>
   <canvas id="canvas"></canvas>
   <canvas id="snow"></canvas>

   <div class="am-g" style="position: fixed; bottom:0px;">
   <div class="am-u-sm-12">
   <div style="z-index: 9999" id="player" class="aplayer">
   </div>
   </div>
   </div>
  </div>
//CSS代码
canvas{
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: -1;
   }
//引入JS
<script src="~/Content/assets/js/jquery.min.js"></script>
  <script src="~/Scripts/Blog/universe.js"></script>
  <script src="~/Scripts/Blog/Fireworks.js"></script>

View Code

universe.js

10. 点击弹出指定的内容

PS:点击弹出显示内容，过一会自动消失, 说白了也就是一个弹出内容插件，比 alert 好看些，代码如下

//Html代码
<input type="button" value="显示获取到的内容" id="btn1"/>
//JS代码
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script src="~/Scripts/layer/layer.js"></script>
  <script type="text/javascript">
   $(function () {
   $("#btn1").click(function () {
   layer.msg("我是弹出的内容");
   });
   })
  </script>