经验分享程序开发文档资料数据资源其它资源

jQuery鼠标经过文字链接浮动代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标经过文字链接浮动代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery鼠标经过文字链接浮动代码

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>jQuery鼠标经过文字链接浮动代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body>
<div class="Container-parent">
	<div class="Container">
	  <div class="Container-content">
		<div class="buttons">
		  <button class="button button--secondary" touch-action="none">Oh, my !</button>
		  <button class="button button--primary" touch-action="none">Sticky buttons</button>
		</div>
	  </div>
	  <div class="Container-footer options">
		<div class="options-inner">
		  <h2>Control</h2>
		  <p>Play with controls to adjust effect</p>
		  <div class="inputs">
			<div class="input">
			  <label for="inputX">Horizontal stickiness</label>
			  <input id="inputX" type="range" min="0" max="10" step="0.1">
			</div>
			<div class="input">
			  <label for="inputY">Vertical stickiness</label>
			  <input id="inputY" type="range" min="0" max="10" step="0.1" value="6">
			</div>
			<div class="input">
			  <label for="inputDuration">Duration</label>
			  <input id="inputDuration" type="range" min="0" max="2000" step="50" value="700">
			</div>
		  </div>
		</div>
	  </div>
	  <script src="js/pep.js"></script>
	  <script src="js/stickyelements-animate.js"></script>
	  <script src="js/ui.js"></script>
	</div>
  </div>
</body>
</html>

JS代码(stickyElements.js):

import StickyElement from './StickyElement';
	export default (() =>{
	return (selector,opts) =>{
	const stickyElementsTab = [];
	const elements = [].slice.call(document.querySelectorAll(selector));
	for (let i = 0;
	i < elements.length;
	i++){
	stickyElementsTab.push(new StickyElement(elements[i],opts));
}
;
	return stickyElementsTab;
}
;
}
)();

CSS代码(css.css):

*{box-sizing:border-box;}
html{background:#222;}
@media (max-width:500px){html{font-size:.9em;}
}
@-webkit-keyframes wheelHue{from,to{background-color:hsl(324,70%,55%);}
10%{background-color:hsl(360,65%,55%);}
20%{background-color:hsl( 36,80%,55%);}
30%{background-color:hsl( 72,75%,45%);}
40%{background-color:hsl(108,65%,45%);}
50%{background-color:hsl(144,75%,45%);}
60%{background-color:hsl(180,75%,45%);}
70%{background-color:hsl(216,60%,55%);}
80%{background-color:hsl(252,65%,60%);}
90%{background-color:hsl(288,60%,50%);}
}
@keyframes wheelHue{from,to{background-color:hsl(324,70%,55%);}
10%{background-color:hsl(360,65%,55%);}
20%{background-color:hsl( 36,80%,55%);}
30%{background-color:hsl( 72,75%,45%);}
40%{background-color:hsl(108,65%,45%);}
50%{background-color:hsl(144,75%,45%);}
60%{background-color:hsl(180,75%,45%);}
70%{background-color:hsl(216,60%,55%);}
80%{background-color:hsl(252,65%,60%);}
90%{background-color:hsl(288,60%,50%);}
}
@-webkit-keyframes wheelHueColor{from,to{color:hsl(324,70%,45%);}
10%{color:hsl(360,65%,45%);}
20%{color:hsl( 36,80%,45%);}
30%{color:hsl( 72,75%,35%);}
40%{color:hsl(108,65%,35%);}
50%{color:hsl(144,75%,35%);}
60%{color:hsl(180,75%,35%);}
70%{color:hsl(216,60%,45%);}
80%{color:hsl(252,65%,50%);}
90%{color:hsl(288,60%,40%);}
}
@keyframes wheelHueColor{from,to{color:hsl(324,70%,45%);}
10%{color:hsl(360,65%,45%);}
20%{color:hsl( 36,80%,45%);}
30%{color:hsl( 72,75%,35%);}
40%{color:hsl(108,65%,35%);}
50%{color:hsl(144,75%,35%);}
60%{color:hsl(180,75%,35%);}
70%{color:hsl(216,60%,45%);}
80%{color:hsl(252,65%,50%);}
90%{color:hsl(288,60%,40%);}
}
body{margin:0;font:300 1em/1.6 Trebuchet MS,sans-serif;font-size-adjust:.5;letter-spacing:-.02em;}
.wf-active body{font-family:Catamaran,Trebuchet MS,sans-serif;letter-spacing:0;}
.Container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;background-color:hsl(324,70%,55%);}
@media (min-width:1000px){.Container{-webkit-animation:wheelHue 100s infinite;animation:wheelHue 100s infinite;}
}
@supports (background-blend-mode:overlay){.Container{background-size:cover;background-image:-webkit-linear-gradient(bottom left,white 10%,black 90%);background-image:linear-gradient(to top right,white 10%,black 90%);background-blend-mode:overlay;}
}
@media (min-width:1000px){.Container{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
}
.Container-content{-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}
.Container-footer{-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}
.Container-parent{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
h1{text-align:center;color:#fff;font-size:3em;font-weight:300;margin:0;padding:6rem 0 0 0;}
h1 span{font-weight:600;display:inline-block;}
h1 + p{margin-top:0;color:rgba(0,0,0,.7);font-weight:600;}
h2{color:#fff;}
p{text-align:center;color:#fff;margin:.5em .2em;}
a{color:inherit;font-weight:600;display:inline-block;}
.buttons{padding:3rem 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
@media (max-width:500px){.buttons{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}
}
.button{display:block;text-decoration:none;text-align:center;margin:20px;font-family:inherit;font-size:1.4em;font-weight:600;padding:1em 2em;/* text */
 color:hsl(324,70%,45%);text-shadow:0 1px 3px white;/* background */
 background:white;background:-webkit-linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.7));background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.7));border:none;border-radius:5px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.2),0 1px 1px rgba(0,0,0,.7),0 5px 8px rgba(0,0,0,.2);cursor:pointer;-webkit-transition:background-color .3s;transition:background-color .3s;}
@media (min-width:1000px){.button{-webkit-animation:wheelHueColor 100s infinite;animation:wheelHueColor 100s infinite;}
}
.button:hover,.button.is-sticky{position:relative;z-index:1;}
.button::-moz-focus-inner{border:none;padding:0;}
.button--secondary{background:none;box-shadow:none;text-shadow:none;color:rgba(0,0,0,.5);border:5px solid;-webkit-animation:none;animation:none;}
@media (max-width:500px){.button--secondary{font-size:1.2em;margin:20px 50px;padding:1em;}
}
.options{padding:2rem;margin-top:6rem;padding-bottom:4rem;background:-webkit-linear-gradient(left,rgba(0,0,0,.7),rgba(0,0,0,.55));background:linear-gradient(to right,rgba(0,0,0,.7),rgba(0,0,0,.55));text-shadow:0 1px 2px rgba(0,0,0,.9);}
@media (max-width:500px){.options{padding:2rem .5rem 4rem .5rem;}
}
@media (min-width:1000px){.options{padding:6rem 2rem;max-width:25vw;margin-top:0;}
}
.options h2{margin-bottom:0;}
.options p{margin-top:0;margin-left:0;text-align:left;color:rgba(255,255,255,0.7);text-shadow:none;font-size:.8em;}
.options-inner{color:#FFF;}
.inputs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
@media (min-width:500px) and (max-width:1000px){.inputs{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
}
.input{margin:1rem;-webkit-box-flex:1;-webkit-flex:1 1 25%;-ms-flex:1 1 25%;flex:1 1 25%;min-width:180px;min-height:30px;}
@media (min-width:1000px){.input{margin:1rem 0;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}
}
input[type='range']{display:block;border:none;margin:0 auto;padding:0;width:100%;height:2em;background:none;font-size:1em;cursor:pointer;outline:none;color:hsl(324,70%,45%);}
@media (min-width:1000px){input[type='range']{-webkit-animation:wheelHueColor 100s infinite;animation:wheelHueColor 100s infinite;}
}
input[type='range'],input[type='range']::-webkit-slider-runnable-track,input[type='range']::-webkit-slider-thumb{-webkit-appearance:none;}
input[type='range']::-webkit-slider-runnable-track{position:relative;width:100%;height:0.75em;border-radius:0.25em;background-image:-webkit-linear-gradient(#000,#000);background-image:linear-gradient(#000,#000);background-repeat:no-repeat;background-color:currentColor;background-position:right;}
input[type='range']::-moz-range-track{width:100%;height:0.75em;border-radius:0.25em;background-image:linear-gradient(#000,#000);background-repeat:no-repeat;background-color:currentColor;background-position:right;}
input[type='range']::-ms-track{border:none;width:100%;height:0.75em;border-radius:0.25em;background-image:linear-gradient(#000,#000);background-repeat:no-repeat;background-color:currentColor;background-position:right;color:transparent;}
@supports (background-blend-mode:overlay){input[type='range']::-webkit-slider-runnable-track{background-image:-webkit-linear-gradient(#000,#000),-webkit-linear-gradient(45deg,#fff,#000 170%);background-image:linear-gradient(#000,#000),linear-gradient(45deg,#fff,#000 170%);background-position:right,left;background-blend-mode:normal,overlay;}
input[type='range']::-moz-range-track{background-image:linear-gradient(#000,#000),linear-gradient(45deg,#fff,#000 170%);background-position:right,left;background-blend-mode:normal,overlay;}
input[type='range']::-ms-track{background-image:linear-gradient(#000,#000),linear-gradient(45deg,#fff,#000 170%);background-position:right,left;background-blend-mode:normal,overlay;}
}
input[type='range']::-moz-range-progress{height:0.75em;border-radius:0.25em;background-color:currentColor;}
input[type='range']::-ms-fill-lower{border-radius:0.25em;background-color:currentColor;}
input[type='range']::-webkit-slider-thumb{margin-top:-0.25em;box-sizing:border-box;border:solid 0.125em rgba(0,0,0,.9);width:1.25em;height:1.25em;border-radius:50%;background:white;cursor:ew-resize;}
input[type='range']::-moz-range-thumb{box-sizing:border-box;border:solid 0.125em rgba(0,0,0,.9);width:1.25em;height:1.25em;border-radius:50%;background:white;cursor:ew-resize;}
input[type='range']::-ms-thumb{box-sizing:border-box;border:solid 0.125em rgba(0,0,0,.9);width:1.25em;height:1.25em;border-radius:50%;background:white;cursor:ew-resize;}
input[type='range']:focus::-webkit-slider-thumb{background-image:-webkit-linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));background-color:currentColor;border-color:white;}
input[type='range']:focus::-moz-range-thumb{background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));background-color:currentColor;border-color:white;}
input[type='range']:focus::-ms-thumb{background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));background-color:currentColor;border-color:white;}

CSS代码(default.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{font-size:150%;padding:1em 0;}
.htmleaf-content h2{margin:0 0 2em;opacity:0.1;}
.htmleaf-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
/* Header */
.htmleaf-header{padding:0.2em 90px 0.2em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#fff;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
32.05 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
32.05 KB
立即下载
侯纯瑞
了解
打赏作者 鼓励作者
jquery特效9
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章