记录多种常用的前端样式界面代码

1.返回顶部特效(滚动条上移或者点击会自动隐藏和显示),效果如下:


//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>

2. 左下角探头效果



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>

3. 文字翻转效果(点击翻转,一开始加载页面也翻转)


代码如下:

//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,"Lantinghei SC","Microsoft YaHei",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:自定义的,下面会贴出来)

typed.min.js 代码:

!function (t) { "use strict"; var s = function (s, e) { this.el = t(s), this.options = t.extend({}, t.fn.typed.defaults, e), this.isInput = this.el.is("input"), this.attr = this.options.attr, this.showCursor = this.isInput ? !1 : this.options.showCursor, this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text(), this.contentType = this.options.contentType, this.typeSpeed = this.options.typeSpeed, this.startDelay = this.options.startDelay, this.backSpeed = this.options.backSpeed, this.backDelay = this.options.backDelay, this.stringsElement = this.options.stringsElement, this.strings = this.options.strings, this.strPos = 0, this.arrayPos = 0, this.stopNum = 0, this.loop = this.options.loop, this.loopCount = this.options.loopCount, this.curLoop = 0, this.stop = !1, this.cursorChar = this.options.cursorChar, this.shuffle = this.options.shuffle, this.sequence = [], this.build() }; s.prototype = { constructor: s, init: function () { var t = this; t.timeout = setTimeout(function () { for (var s = 0; s < t.strings.length; ++s) t.sequence[s] = s; t.shuffle && (t.sequence = t.shuffleArray(t.sequence)), t.typewrite(t.strings[t.sequence[t.arrayPos]], t.strPos) }, t.startDelay) }, build: function () { var s = this; if (this.showCursor === !0 && (this.cursor = t('<span class="typed-cursor">' + this.cursorChar + "</span>"), this.el.after(this.cursor)), this.stringsElement) { s.strings = [], this.stringsElement.hide(); var e = this.stringsElement.find("p"); t.each(e, function (e, i) { s.strings.push(t(i).html()) }) } this.init() }, typewrite: function (t, s) { if (this.stop !== !0) { var e = Math.round(70 * Math.random()) + this.typeSpeed, i = this; i.timeout = setTimeout(function () { var e = 0, r = t.substr(s); if ("^" === r.charAt(0)) { var o = 1; /^\^\d+/.test(r) && (r = /\d+/.exec(r)[0], o += r.length, e = parseInt(r)), t = t.substring(0, s) + t.substring(s + o) } if ("html" === i.contentType) { var n = t.substr(s).charAt(0); if ("<" === n || "&" === n) { var a = "", h = ""; for (h = "<" === n ? ">" : ";"; t.substr(s).charAt(0) !== h;) a += t.substr(s).charAt(0), s++; s++, a += h } } i.timeout = setTimeout(function () { if (s === t.length) { if (i.options.onStringTyped(i.arrayPos), i.arrayPos === i.strings.length - 1 && (i.options.callback(), i.curLoop++, i.loop === !1 || i.curLoop === i.loopCount)) return; i.timeout = setTimeout(function () { i.backspace(t, s) }, i.backDelay) } else { 0 === s && i.options.preStringTyped(i.arrayPos); var e = t.substr(0, s + 1); i.attr ? i.el.attr(i.attr, e) : i.isInput ? i.el.val(e) : "html" === i.contentType ? i.el.html(e) : i.el.text(e), s++, i.typewrite(t, s) } }, e) }, e) } }, backspace: function (t, s) { if (this.stop !== !0) { var e = Math.round(70 * Math.random()) + this.backSpeed, i = this; i.timeout = setTimeout(function () { if ("html" === i.contentType && ">" === t.substr(s).charAt(0)) { for (var e = ""; "<" !== t.substr(s).charAt(0) ;) e -= t.substr(s).charAt(0), s--; s--, e += "<" } var r = t.substr(0, s); i.attr ? i.el.attr(i.attr, r) : i.isInput ? i.el.val(r) : "html" === i.contentType ? i.el.html(r) : i.el.text(r), s > i.stopNum ? (s--, i.backspace(t, s)) : s <= i.stopNum && (i.arrayPos++, i.arrayPos === i.strings.length ? (i.arrayPos = 0, i.shuffle && (i.sequence = i.shuffleArray(i.sequence)), i.init()) : i.typewrite(i.strings[i.sequence[i.arrayPos]], s)) }, e) } }, shuffleArray: function (t) { var s, e, i = t.length; if (i) for (; --i;) e = Math.floor(Math.random() * (i + 1)), s = t[e], t[e] = t[i], t[i] = s; return t }, reset: function () { var t = this; clearInterval(t.timeout); var s = this.el.attr("id"); this.el.after('<span id="' + s + '"/>'), this.el.remove(), "undefined" != typeof this.cursor && this.cursor.remove(), t.options.resetCallback() } }, t.fn.typed = function (e) { return this.each(function () { var i = t(this), r = i.data("typed"), o = "object" == typeof e && e; r || i.data("typed", r = new s(this, o)), "string" == typeof e && r[e]() }) }, t.fn.typed.defaults = { strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"], stringsElement: null, typeSpeed: 0, startDelay: 0, backSpeed: 0, shuffle: !1, backDelay: 500, loop: !1, loopCount: !1, showCursor: !0, cursorChar: "|", attr: null, contentType: "html", callback: function () { }, preStringTyped: function () { }, onStringTyped: function () { }, resetCallback: function () { } } }(window.jQuery);

4. 在离开网页时,触发事件(这里以改变标题为例)

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

//Head部分

<head>

   <meta name="viewport" content="width=device-width" />

   <title>IT发烧友,一个真正的技术交流群</title>

   <link rel="shortcut icon" 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="shortcut icon"]').attr('href', "/Content/Images/fail.ico");

                   document.title = '(●—●)喔哟,崩溃啦!';

                   clearTimeout(titleTime);

               }

               else {

                   $('[rel="shortcut icon"]').attr('href', "/Content/Images/icon.png");

                   document.title = '(/≧▽≦/)咦!又好了!' + OriginTitile;

                   titleTime = setTimeout(function () {

                       document.title = OriginTitile;

                   }, 2000);

               }

           });

       }

   </script>

5. 文字向上滚动效果(PS:鼠标悬停停止滚动)

代码如下:

//HTML代码

<div align="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.onmouseover = function(){clearInterval(MyMar)}    //鼠标经过时清除定时器达到滚动停止的目的

demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}    //鼠标移开时重设定时器

6. 鼠标移入效果

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>

7. 点击弹出指定的内容 

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>

利用上面的插件还可以实现 confirm 选择效果

实现代码:

layer.confirm('确定要删除?', { icon: 3, title: '提示' }, function () {

                   alert("当然确定了~");

                   

               });


免责声明

文章来源于网络,纯作记录存档用,如侵犯您的权益请联系删除!
转载本文请保留链接,谢谢!

评论