以下是 jQuery鼠标移动星星跟随显示特效js代码 的示例演示效果:
部分效果截图:
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.0">
<title>jQuery鼠标移动星星跟随显示特效 </title>
<link rel="stylesheet" href="css/foundation.min.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link media="all" rel="stylesheet" href="css/all.css">
</head>
<body>
<div class="zzsc-container">
<section id="examples" class="example-box blue">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 visible-md-block visible-lg-block">
<pre><code class="javascript">
jQuery('#example-1').jstars({
image_path: 'images'
});
</code></pre>
</div>
<div class="col-md-6 col-sm-12">
<h2>Example 1: White</h2>
<p>This example illustrates "white" style. As you can see we do not specify any parameters, so style and frequency are set to "white" and "12" automatically.</p>
</div>
<div class="col-md-6 col-sm-12 visible-xs-block visible-sm-block">
<pre><code class="javascript">
jQuery('#example-1').jstars({
image_path: 'images'
});
</code></pre>
</div>
</div>
</div>
</section>
<section id="example-blue" class="example-box white">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h2 style="color: #fff;">Example 2: Blue</h2>
<p style="color: #fff;">This one illustrates "blue" style.</p>
<p style="color: #fff;">Also we increased frequency a bit.</p>
</div>
<div class="col-md-6 col-sm-12">
<pre><code class="javascript">
jQuery('#example-blue').jstars({
image_path: 'images',
style: 'blue',
frequency: 15
});
</code></pre>
</div>
</div>
</div>
</section>
<section id="example-yellow" class="example-box green">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 visible-md-block visible-lg-block">
<pre><code>
jQuery('#example-yellow').jstars({
image_path: 'images',
style: 'yellow',
frequency: 20
});
</code></pre>
</div>
<div class="col-md-6 col-sm-12">
<h2>Example 3: Yellow</h2>
<p>This example illustrates "yellow" style.</p>
<p>And the frequency is set to max value.</p>
</div>
<div class="col-md-6 col-sm-12 visible-xs-block visible-sm-block">
<pre><code>
jQuery('#example-yellow').jstars({
image_path: 'images',
style: 'yellow',
frequency: 20
});
</code></pre>
</div>
</div>
</div>
</section>
<section id="example-red" class="example-box white">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h2 style="color: #fff;">Example 4: Red</h2>
<p style="color: #fff;">This example illustrates "red" style.</p>
<p style="color: #fff;">The frequency is low here, so the stars shine rarely.</p>
</div>
<div class="col-md-6 col-sm-12">
<pre><code class="javascript">
jQuery('#example-red').jstars({
image_path: 'images',
style: 'red',
frequency: 5
});
</code></pre>
</div>
</div>
</div>
</section>
<section id="example-green" class="example-box blue">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 visible-md-block visible-lg-block">
<pre><code class="javascript">
jQuery('#example-green').jstars({
image_path: 'images',
style: 'green'
});
</code></pre>
</div>
<div class="col-md-6 col-sm-12">
<h2>Example 5: Green</h2>
<p>This example illustrates "green" style.</p>
</div>
<div class="col-md-6 col-sm-12 visible-xs-block visible-sm-block">
<pre><code class="javascript">
jQuery('#example-green').jstars({
image_path: 'images',
style: 'green'
});
</code></pre>
</div>
</div>
</div>
</section>
<section id="example-rand" class="example-box green">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h2>Example 6: Red</h2>
<p>Our plugin has tricky mode - to show all stars colors randomly.</p>
<p>You should use style "rand" for this feature.</p>
</div>
<div class="col-md-6 col-sm-12">
<pre><code class="javascript">
jQuery('#example-rand').jstars({
image_path: 'images',
style: 'rand'
});
</code></pre>
</div>
</div>
</div>
</section>
<section id="custom" class="example-box blue">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h2>Customize the image</h2>
<p>You can try to prepare your own asset to display different image instead of stars.</p>
<p>To do that you should make a sprite of 9 images, each next part is differ from previous with 40 degrees angle.</p>
<p>Let's try how candy cane looks... It will be good for Xmas eve :)</p>
</div>
<div class="col-md-6 col-sm-12">
<pre><code class="javascript">
jQuery('#example-rand').jstars({
image_path: 'images',
image: 'candy-cane-stars.png',
style: 'white',
width: 34,
height: 34,
delay: 700,
frequency: 5
});
</code></pre>
</div>
</div>
</div>
</section>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/highlight.min.js"></script>
<script type="text/javascript" src="js/jquery-stars.js"></script>
<script type="text/javascript" src="js/smothscrool.js"></script>
<script type="text/javascript" src="js/jquery.main.js"></script>
</body>
</html>
JS代码(jquery.main.js):
$(document).ready(function(){
hljs.initHighlightingOnLoad();
initAnchors();
initStars();
}
)// initialize smooth anchor linksfunction initAnchors(){
new SmoothScroll({
anchorLinks:'.nav > li > a',extraOffset:function(){
var totalHeight = 0;
jQuery('.navbar-fixed-top').each(function(){
totalHeight += jQuery(this).outerHeight();
}
);
return totalHeight;
}
,activeClasses:'link'}
);
}
// initialize starsfunction initStars(){
$('#examples').jstars({
image_path:'images'}
);
$('#example-blue').jstars({
image_path:'images',style:'blue',frequency:15}
);
$('#example-yellow').jstars({
image_path:'images',style:'yellow',frequency:19}
);
$('#example-green').jstars({
image_path:'images',style:'green'}
);
$('#example-red').jstars({
image_path:'images',style:'red',frequency:5}
);
$('#example-rand').jstars({
image_path:'images',style:'rand'}
);
$('#custom').jstars({
image_path:'images',image:'candy-cane-stars.png',style:'white',width:34,height:34,delay:700,frequency:5}
);
}
JS代码(smothscrool.js):
/*! * SmoothScroll module */
;
(function($,exports){
// private variablesvar page,win = $(window),activeBlock,activeWheelHandler,wheelEvents = ('onwheel' in document || document.documentMode >= 9 ? 'wheel':'mousewheel DOMMouseScroll');
// animation handlersfunction scrollTo(offset,options,callback){
// initialize variablesvar scrollBlock;
if (document.body){
if (typeof options === 'number'){
options ={
duration:options}
;
}
else{
options = options ||{
}
;
}
page = page || $('html,body');
scrollBlock = options.container || page;
}
else{
return;
}
// treat single number as scrollTopif (typeof offset === 'number'){
offset ={
top:offset}
;
}
// handle mousewheel/trackpad while animation is activeif (activeBlock && activeWheelHandler){
activeBlock.off(wheelEvents,activeWheelHandler);
}
if (options.wheelBehavior && options.wheelBehavior !== 'none'){
activeWheelHandler = function(e){
if (options.wheelBehavior === 'stop'){
scrollBlock.off(wheelEvents,activeWheelHandler);
scrollBlock.stop();
}
else if (options.wheelBehavior === 'ignore'){
e.preventDefault();
}
}
;
activeBlock = scrollBlock.on(wheelEvents,activeWheelHandler);
}
// start scrolling animationscrollBlock.stop().animate({
scrollLeft:offset.left,scrollTop:offset.top}
,options.duration,function(){
if (activeWheelHandler){
scrollBlock.off(wheelEvents,activeWheelHandler);
}
if ($.isFunction(callback)){
callback();
}
}
);
}
// smooth scroll contstructorfunction SmoothScroll(options){
this.options = $.extend({
anchorLinks:'a[href^="#"]',// selector or jQuery objectcontainer:null,// specify container for scrolling (default - whole page)extraOffset:null,// function or fixed numberactiveClasses:null,// null,"link","parent"easing:'swing',// easing of scrollinganimMode:'duration',// or "speed" modeanimDuration:800,// total duration for scroll (any distance)animSpeed:1500,// pixels per secondanchorActiveClass:'anchor-active',sectionActiveClass:'section-active',wheelBehavior:'stop',// "stop","ignore" or "none"useNativeAnchorScrolling:false // do not handle click in devices with native smooth scrolling}
,options);
this.init();
}
SmoothScroll.prototype ={
init:function(){
this.initStructure();
this.attachEvents();
}
,initStructure:function(){
var self = this;
this.container = this.options.container ? $(this.options.container):$('html,body');
this.scrollContainer = this.options.container ? this.container:win;
this.anchorLinks = jQuery(this.options.anchorLinks).filter(function(){
return document.getElementById(this.getAttribute('href').slice(1));
}
);
}
,getAnchorTarget:function(link){
// get target block from link hrefvar targetId = $(link).attr('href');
return $(targetId.length > 1 ? targetId:'html');
}
,getTargetOffset:function(block){
// get target offsetvar blockOffset = block.offset().top;
if (this.options.container){
blockOffset -= this.container.offset().top - this.container.prop('scrollTop');
}
// handle extra offsetif (typeof this.options.extraOffset === 'number'){
blockOffset -= this.options.extraOffset;
}
else if (typeof this.options.extraOffset === 'function'){
blockOffset -= this.options.extraOffset(block);
}
return{
top:blockOffset}
;
}
,attachEvents:function(){
var self = this;
// handle active classesif (this.options.activeClasses && this.anchorLinks.length){
// cache structurethis.anchorData = [];
for (var i = 0;
i < this.anchorLinks.length;
i++){
var link = jQuery(this.anchorLinks[i]),targetBlock = self.getAnchorTarget(link),anchorDataItem;
$.each(self.anchorData,function(index,item){
if (item.block[0] === targetBlock[0]){
anchorDataItem = item;
}
}
);
if (anchorDataItem){
anchorDataItem.link = anchorDataItem.link.add(link);
}
else{
self.anchorData.push({
link:link,block:targetBlock}
);
}
}
;
// add additional event handlersthis.resizeHandler = function(){
self.recalculateOffsets();
}
;
this.scrollHandler = function(){
self.refreshActiveClass();
}
;
this.recalculateOffsets();
this.scrollContainer.on('scroll',this.scrollHandler);
win.on('resize',this.resizeHandler);
}
// handle click eventthis.clickHandler = function(e){
self.onClick(e);
}
;
if (!this.options.useNativeAnchorScrolling){
this.anchorLinks.on('click',this.clickHandler);
}
}
,recalculateOffsets:function(){
var self = this;
$.each(this.anchorData,function(index,data){
data.offset = self.getTargetOffset(data.block);
data.height = data.block.outerHeight();
}
);
this.refreshActiveClass();
}
,refreshActiveClass:function(){
var self = this,foundFlag = false,containerHeight = this.container.prop('scrollHeight'),viewPortHeight = this.scrollContainer.height(),scrollTop = this.options.container ? this.container.prop('scrollTop'):win.scrollTop();
// user function instead of default handlerif (this.options.customScrollHandler){
this.options.customScrollHandler.call(this,scrollTop,this.anchorData);
return;
}
// sort anchor data by offsetsthis.anchorData.sort(function(a,b){
return a.offset.top - b.offset.top;
}
);
function toggleActiveClass(anchor,block,state){
anchor.toggleClass(self.options.anchorActiveClass,state);
block.toggleClass(self.options.sectionActiveClass,state);
}
// default active class handler$.each(this.anchorData,function(index){
var reverseIndex = self.anchorData.length - index - 1,data = self.anchorData[reverseIndex],anchorElement = (self.options.activeClasses === 'parent' ? data.link.parent():data.link);
if (scrollTop >= containerHeight - viewPortHeight){
// handle last sectionif (reverseIndex === self.anchorData.length - 1){
toggleActiveClass(anchorElement,data.block,true);
}
else{
toggleActiveClass(anchorElement,data.block,false);
}
}
else{
// handle other sectionsif (!foundFlag && (scrollTop >= data.offset.top - 1 || reverseIndex === 0)){
foundFlag = true;
toggleActiveClass(anchorElement,data.block,true);
}
else{
toggleActiveClass(anchorElement,data.block,false);
}
}
}
);
}
,calculateScrollDuration:function(offset){
var distance;
if (this.options.animMode === 'speed'){
distance = Math.abs(this.scrollContainer.scrollTop() - offset.top);
return (distance / this.options.animSpeed) * 1000;
}
else{
return this.options.animDuration;
}
}
,onClick:function(e){
var targetBlock = this.getAnchorTarget(e.currentTarget),targetOffset = this.getTargetOffset(targetBlock);
e.preventDefault();
scrollTo(targetOffset,{
container:this.container,wheelBehavior:this.options.wheelBehavior,duration:this.calculateScrollDuration(targetOffset)}
);
}
,destroy:function(){
if (this.options.activeClasses){
win.off('resize',this.resizeHandler);
this.scrollContainer.off('scroll',this.scrollHandler);
}
this.anchorLinks.off('click',this.clickHandler);
}
}
;
// public API$.extend(SmoothScroll,{
scrollTo:function(blockOrOffset,durationOrOptions,callback){
scrollTo(blockOrOffset,durationOrOptions,callback);
}
}
);
// export moduleexports.SmoothScroll = SmoothScroll;
}
(jQuery,this));
CSS代码(all.css):
body{font-family:Verdana,sans-serif;color:#2c3e50;}
.navbar{background:#2c3e50;color:#fff;text-transform:uppercase;border:none;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.navbar-default .navbar-nav > li > a,.navbar-default .navbar-nav > li > a:focus,.navbar-default .navbar-nav > li > a:visited,.navbar-default .navbar-brand,.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:visited{color:#fff;}
.navbar-default .navbar-brand{font-size:22px;font-weight:bold;}
.navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-brand:hover{color:#18bc9c;}
.info-box{text-align:center;padding:70px 0;background:#18bc9c;color:#fff;margin:50px 0 0;font-size:24px;}
.info-box h1{font-size:50px;line-height:44px;margin:0 0 60px;}
.example-box{padding:80px 0;font-size:18px}
pre{border:none;padding:0;margin:50px 0 0;background:none;overflow:auto;}
.example-box.green{background:#18bc9c;color:#fff;}
.example-box.blue{background:#2c3e50;color:#fff;}
.example-box.dark{background:#233140;color:#fff;}
.example-box.gray{background:#18bc9c;color:#fff;}
#usage pre,.example-single pre{margin-top:20px;}
.examples h1,.examples h2{text-align:center;margin:0 0 30px;}
.example-box h2{margin:0 0 10px;}
hr.star-light,hr.star-primary{margin:25px auto 50px;padding:0;max-width:250px;border:0;border-top:solid 5px;color:#fff;text-align:center}
hr.star-light:after,hr.star-primary:after{content:"\f005";display:inline-block;position:relative;top:-.8em;padding:0 .25em;font-family:FontAwesome;font-size:2em;}
hr.star-light{border-color:#fff}
hr.star-light:after{color:#fff;background-color:#18bc9c}
hr.star-primary{border-color:#2c3e50}
hr.star-primary:after{color:#2c3e50;background-color:#fff}
.navbar-nav a{outline:none;}
.navbar-nav .anchor-active{color:#20ba95 !important;}
#footer{background:#233140;color:#fff;padding:20px 0 10px;font-size:12px;}
.navbar-default .navbar-toggle .icon-bar{background-color:#fff;}
@media only screen and (max-width:980px){.info-box{font-size:16px;line-height:18px;padding:45px 0;}
.info-box h1{font-size:34px;line-height:38px;margin:0 0 27px;}
hr.star-light:after,hr.star-primary:after{font-size:1em;}
hr.star-light,hr.star-primary{margin:20px auto;border-width:3px 0 0;}
.example-box{padding:40px 0;font-size:16px;text-align:center;}
pre{margin:20px 0;text-align:left;}
}
@media only screen and (max-width:767px){.info-box h1{font-size:30px;line-height:34px;}
.info-box p{margin:0 0 20px;}
#footer{padding:10px 0;text-align:center;}
.examples h1,.examples h2{font-size:30px;}
.example-box{padding-bottom:20px;}
#footer p{margin:0;}
}
CSS代码(zzsc-demo.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:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.zzsc-container{margin:0 auto;overflow:hidden;}
.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*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.zzsc-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;background:#66677c;}
.zzsc-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.zzsc-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.zzsc-demo a{color:#fff;text-decoration:none;}
.zzsc-demo{width:100%;padding-bottom:1.2em;}
.zzsc-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.zzsc-demo a:hover{opacity:0.6;}
.zzsc-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.zzsc-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.zzsc-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);}
.zzsc-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.zzsc-icon span{display:none;}
.zzsc-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 */
.zzsc-footer{width:100%;padding-top:10px;}
.zzsc-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;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:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.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-zzsc-home-outline:before{content:"\e5000";}
.icon-zzsc-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.zzsc-header{padding:3em 10% 4em;}
.zzsc-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.zzsc-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.zzsc-header h1{font-size:1.2em;}
}
分享到QQ
分享到微博
微信扫一扫
