Xlink锚SVG的活动

时间：2015-03-17 01:51:39

标签： javascript jquery svg fullpage.js

我的xlink中有4个SVG锚点，我希望得到每个的活动事件，我怎样才能在JS中调用它？

看起来像那样：

＆＃13;
＆＃13; 
$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
				menu: '#timeline',
				scrollingSpeed: 1000,
	            onLeave: function(index, nextIndex, direction){
                  $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));            
        		}
				});
				});
＆＃13; 
html {
	image-rendering: optimizeQuality;
	-webkit-font-smoothing: antialiased;
	-ms-interpolation-mode: nearest-neighbor
}
body {
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	font-family: 'source_sans_prolight';
}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
ul, a {
	list-style:none;
	text-decoration:none;
}

.intro{
	font-size:20px;

}

/********** menu ************/
#header {
	position: fixed;
	right: -60px;
	top: 0;
	width: 60px;
	height: 100%;
	-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-webkit-transition-property: -webkit-transform, right; 
	-webkit-backface-visibility: hidden;
	z-index:120;
}

#menu-burger-wrapper {
	position: absolute;
	left:-66px;
	top: 0;
	-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
}

/********** essai************/
#menu-burger-wrappr.is-opened {
	-webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
	transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
	-webkit-transform: translateX(-276px);
	-moz-transform:translateX(-276px);
	-ms-transform: translateX(-276px);
	-o-transform:translateX(-276px);
	transform:translateX(-276px);
}

#menu-burger-wrappr.is-closed {
	-webkit-transform: translateX(0px);
	-moz-transform:translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform:translateX(0px);
	transform:translateX(0px);
	-webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
	/**********essai************/

#menu-burger-wrapper.is-opened .line-burger {
	top: -35px;
}
#menu-burger-wrapper.is-opened .line-1 {
	-webkit-transform: translate(7px, 9px) rotate(45deg);
	-moz-transform: translate(7px, 9px) rotate(45deg);
	-ms-transform: translate(7px, 9px) rotate(45deg);
	-o-transform: translate(7px, 9px) rotate(45deg);
	transform: translate(7px, 9px) rotate(45deg)
}
#menu-burger-wrapper.is-opened .line-2 {
	width: 0px;
	-webkit-transform: translateX(22px);
	-moz-transform: translateX(22px);
	-ms-transform: translateX(22px);
	-o-transform: translateX(22px);
	transform: translateX(22px)
}
#menu-burger-wrapper.is-opened .line-3 {
	-webkit-transform: translate(7px, -9px) rotate(-45deg);
	-moz-transform: translate(7px, -9px) rotate(-45deg);
	-ms-transform: translate(7px, -9px) rotate(-45deg);
	-o-transform: translate(7px, -9px) rotate(-45deg);
	transform: translate(7px, -9px) rotate(-45deg)
}
.line-burger {
	position: relative;
	left: 0;
	top: 0;
	width: 1px;
	height: 35px;
	margin: 0 auto 10px auto;
	background-color: #c8c8c8;
	-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
}
#menu-burger {
	width: 44px;
	background:#2C75FF;
	height: 32px;
	padding-top: 12px;
	cursor: pointer;
}

#menu-burger.is-opened{
	z-index:999;
}
#menu-burger .line {
	width: 30px;
	height: 2px;
	margin-bottom: 7px;
	background-color: #fff;
	-webkit-transform: translateX(7px);
	-moz-transform: translateX(7px);
	-ms-transform: translateX(7px);
	-o-transform: translateX(7px);
	transform: translateX(7px);
	-webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)
}
#menu-burger:hover .line-1 {
	width: 20px;
	-webkit-transform: translateX(12px);
	-moz-transform: translateX(12px);
	-ms-transform: translateX(12px);
	-o-transform: translateX(12px);
	transform: translateX(12px)
}
#menu-burger:hover .line-2 {
	width: 10px;
	-webkit-transform: translateX(27px);
	-moz-transform: translateX(27px);
	-ms-transform: translateX(27px);
	-o-transform: translateX(27px);
	transform: translateX(27px)
}
#menu-burger:hover .line-3 {
	width: 15px;
	-webkit-transform: translateX(7px);
	-moz-transform: translateX(7px);
	-ms-transform: translateX(7px);
	-o-transform: translateX(7px);
	transform: translateX(7px)
}

.is-opened #menu-burger:hover .line-1 {
	width: 20px;
	-webkit-transform: translate(12px, 9px) rotate(45deg);
	-moz-transform: translate(12px, 9px) rotate(45deg);
	-ms-transform: translate(12px, 9px) rotate(45deg);
	-o-transform: translate(12px, 9px) rotate(45deg);
	transform: translate(12px, 9px) rotate(45deg);
}
.is-opened #menu-burger:hover .line-2 {
	width: 0px;
	-webkit-transform: translateX(22px);
	-moz-transform: translateX(22px);
	-ms-transform: translateX(22px);
	-o-transform: translateX(22px);
	transform: translateX(22px)
}
.is-opened #menu-burger:hover .line-3 {
	width: 20px;
	-webkit-transform: translate(12px, -9px) rotate(-45deg);
	-moz-transform: translate(12px, -9px) rotate(-45deg);
	-ms-transform: translate(12px, -9px) rotate(-45deg);
	-o-transform: translate(12px, -9px) rotate(-45deg);
	transform: translate(12px, -9px) rotate(-45deg);
}


.menu-base{
	background:#2C75FF;
	position: fixed;
	width: 300px;
	height: 100%;
	top: 0;
	z-index:110;
	right: -300px;
}



.menu-base-open {
	right: 0px;
}

/**********push (class sur le body)************/

.push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.push-toright {
	left: 240px;
}

.push-toleft {
	left: -240px;
}


.menu-base,
.push {
	-webkit-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
	transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
/**********push (class sur le body)************/
	
.menu-item{
	position:absolute;
	margin-top:200px;
	width:100%;
	height:100%;
	text-align: center;
	font-size:100%; 
	overflow:hidden;
}
.menu-item a {
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	-webkit-transition:color 0.4s ease-in;
}

.menu-item a:hover, #en-cours{
	color: rgba(255,255,255,1);
}

.menu-item li {
	position:relative;
	width:100%;
	margin-bottom:30px;
	margin-left:0px;
	vertical-align:middle;
	overflow:hidden;
	}


 /********** timeline ************/
#timeline{
	position:fixed;
	width:500px;
	height:500px;
	top:50%;
	left:50%;
	margin-top:-250px;
	margin-left:-250px;
	pointer-events: all;
	z-index:99;
}

#titre{
	position:fixed;
	width:300px;
	height:100px;
	margin-top:-80px;
	margin-left:-150px;
	top:50%;
	left:50%;
	color:#FFF;
	text-align:center;
}

h3 {
	text-transform:uppercase;
	font-size:50px;
}

#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
	stroke:rgba(204,204,204,1);
}
#bluecircle{
	stroke-dasharray:1510;
	stroke-dashoffset:1510;
	-webkit-transition:all 1s ease;
	transition:all 1s ease;
}

#smallblueleft, #smallbluebottom, #smallblueright{
	  stroke-dasharray:40;
	stroke-dashoffset:40;
		-webkit-transition:all 1s ease;
	transition:all 1s ease;
}

#smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
	stroke-dashoffset:0;
}
 /********** section ************/
 

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}

h2{
	font-size: 2em;
}

#don{
	background-image: url(../image/1.jpg);
	background-size:cover;
}

#tri{
}




 /********** footer ************/
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>

<!---------- timeline ----------->
   <div id="timeline">
   
 
			<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>

<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>

<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>

<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>

<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>

<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>

<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>

<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>

<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>

<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
      </svg>

	</div>
  
  <div id="fullpage">
	<div class="section " id="don">
		<h2></h2>
		<p></p>
	</div>
	<div class="section" id="tri">
	  <h2>fullPage.js</h2>
		<p>Create Beautiful Fullscreen Scrolling Websites</p>
	</div>
	<div class="section" id="emploi">
			<h2>Example</h2>
			<p>HTML markup example to define 4 sections.</p>
	</div>
	<div class="section" id="recycle">
			<h2>Working On Tablets</h2>
			<p>Designed to fit to different screen</p>
			</div>
            
            <div class="section" id="vente">
			<h2>Working On Tablets</h2>
			<p>Designed to fit to different screen</p>
			</div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我最终拉入了（几乎）无处不在的jQuery库，以使其在浏览器中工作（在IE上添加和删除类实际上是违反直觉的）。基本思想是声明一个函数，该函数将检查用户是否已滚动传递给定Xlink的感兴趣部分的顶部，然后在每次用户滚动时在每个链接上调用该函数。在代码中，这可能看起来像：

var svg = $("#svg");
var main = $("#main");
var links = $("a");
var numLinks = links.length;

function setXlinkActive(xlink, scrollY) {
  var section = $(xlink.attr("xlink:href"));
  var clientY = section.offset().top;
  if (scrollY > clientY) {
     xlink.show().addClass("active");
  } else {
     xlink.removeClass("active").hide();
  }
}

现在，需要为Xlink元素内的每个scroll事件的每个main调用此函数：

main.bind("scroll", function() {
    var scrollY = main.scrollTop() + main.offset().top;
    links.each(function(idx, link) {
        setXlinkActive($(link), scrollY);
    });
});

与my fiddle混在一起看看哪些对您有用。

相关问题
最新问题