炫酷的网页特效展示分享
3、左下角探头效果
PS:这个图片在网页的左下角,鼠标移动上去探头效果,代码如下
<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>
4、文字翻转效果(点击翻转,一开始加载页面也翻转)
代码如下:
<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:自定义的,下面会贴出来)</script>
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);
5、在离开网页时,触发事件(这里以改变标题为例)
注:这里鼠标移开时,同时改变网页 title 和 icon 图标,代码如下:
<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>
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, p, 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>
7、文字向上滚动效果(PS:鼠标悬停停止滚动)
代码如下:
<div align="center" id="demo"> <div id="demo1"> 我是滚动内容<br/> 你来抓我啊<br/> 嗖嗖嗖<br/> 2333333333333333333333333 </div> <div id="demo2"></div></div><style> #demo { overflow: hidden; height: 200px; width: 250px; border: 1px solid #6699cc; font-size: 14px; color: #336699; line-height: 22px; text-align: left; padding: 10px; }</style><script> //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 = d emo1.innerHTML //克隆demo2为demo1 function Marquee() { if(demo2.offsetTop - demo.scrollTop <= 0) //当滚动至demo1与demo2交界时,demo跳到最顶端 demo.scrollTop -= demo1.offsetHeight else { demo.scrollTop++ //如果是横向的 将 所有的 height top 改成 width left } } var MyMar = s etInterval(Marquee, speed); //设置定时器,鼠标经过时清除定时器达到滚动停止的目的 demo.onmouseover = f unction() { clearInterval(MyMar) } //鼠标移开时重设定时器 demo.onmouseout = f unction() { MyMar = s etInterval(Marquee, speed) }</script>
炫酷的网页特效展示分享相关推荐
- 好看又炫酷的网页特效例子收集
1.鼠标点击系列 1.1鼠标点击弹出爱心 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- canvas炫酷3d网页背景动画js特效
下载地址canvas画布实现的炫酷3d网页背景动画特效 dd:
- 炫酷canvas网页背景动画效果
下载地址非常炫酷的网页背景旋转特效,基于canvas画布实现的网页背景动画效果 dd:
- 小白也能写前端?推荐一款超实用的app----JsHD调试器,助你写出炫酷的网页!
文章目录 前言 一.JsHD调试器是什么? 二.JsHD调试器的功能 1. 自动生成Js代码,告别手写代码的苦恼 2.调制网页元素样式, 丰富的样式任你选择 3.调制网页架构,轻轻点击一目了然 三.J ...
- 制作炫酷AR卡片特效——小技巧
制作炫酷AR卡片特效--小技巧 本帖最后由 仅为年时 于 2016-7-9 08:28 编辑 gif展示.gif (2.82 MB, 下载次数: 11) 下载附件 保存到相册 2016-7-9 01 ...
- H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
- html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
- 炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体 想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点 形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...
- 153.炫酷粒子背景特效
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...
最新文章
- Jmeter(二十二)_jenkins配置gitlab插件与ant插件
- Third week-homework(员工管理系统)
- 使用WSO2 ESB进行邮件内容过滤
- Unity3D热更新之LuaFramework篇[06]--Lua中是怎么实现脚本生命周期的
- 学生群体中奖励制度的马太效应
- python-study-09
- Qt之QtCreator Qt5示例丢失解决方案
- 大学的最后一年有一门课程叫“人生”。
- 华容道6×6图解_华容道(带图解)
- vsto 批量删除列
- 关于mac打开互联网下载应用提示的解决方法
- opencv配置环境吐血经验
- 笔记本电脑CPU选型与插槽型号
- 第三章第九题(商业:检验ISBN-10)((Business: check ISBN-10))
- 马王堆汉墓帛书‧老子甲本——德经
- Tampermonkey 高级API的使用 附Demo
- windows10系统设置选项里没有触摸板选项
- 展讯LOG抓取及简单分析
- .Net CLR运行时是如何编译函数的
- 解决 torchtext 无法下载 glove
热门文章
- 第十四届蓝桥杯(Web 应用开发)模拟赛 1 期-大学组-线上模拟赛-第一题-数据类型检测
- 172.mybatisPlus的实际应用
- 【PHP注入01】PHP语言常见可注入函数(eval、assert、preg_replace、call_user_func、$a($b)等)
- linux备份文件到ftp上,Linux如何利用ssh传送文件至FTP空间进行备份
- [ZT]系统学习Linux的11点建议
- (ElasticSearch02)day80分布式查漏补缺
- 2021年这些高频面试知识点最后再发一次,跳槽薪资翻倍
- Makefile教程(超级详细)
- 华为OBS通过ObjectKey生成临时的url地址
- 下一代互联网实验:IPv6静态路由和路由汇总 IPv6 to IPv4 隧道 IPv6 NAT-PT 配置