html jquery 绘制svg,jQuery - Drawsvg.js

jQuery - Drawsvg.js

Advertisements

Drawsvg.js is a jQuery plugin to draw svg images

A Simple of drawsvg example as shown below −

href = "https://fonts.googleapis.com/css?family=Open+Sans:400,600">

jQuery DrawSVG Sample

style = "background-color:#ffffff00"

xmlns = "https://www.w3.org/2000/svg" width = "201"

height = "146">

xmlns = "https://www.w3.org/2000/svg" width = "207"

height = "105">

xmlns = "https://www.w3.org/2000/svg" width = "201"

height = "116">

xmlns = "https://www.w3.org/2000/svg" width = "200"

height = "155">

$(function() {

var $doc = $(document),

$win = $(window);

var $intro = $('.intro'),

$items = $intro.find('.item'),

itemsLen = $items.length,

svgs = $intro.find('svg').drawsvg({

callback: animateIntro,

easing: 'easeOutQuart'

}),

currItem = 0;

function animateIntro() {

$items.removeClass('active').eq( currItem++ % itemsLen

).addClass('active').find('svg').drawsvg('animate');

}

animateIntro();

var $header = $('header'),

headerOffTop = $header.offset().top,

isFixed = false;

function menu() {

if ( $win.scrollTop() >= headerOffTop ) {

if ( !isFixed ) {

isFixed = true;

$header.addClass('affix');

}

} else if ( isFixed ) {

isFixed = false;

$header.removeClass('affix');

}

}

$win.on('scroll', menu);

menu();

$header.on('click', 'a[href^="#"]', function(e) {

e.preventDefault();

var hash = this.hash,

offset = $(hash).offset().top;

$('body, html').animate({

scrollTop: offset

}, 600, 'easeInOutQuart', function() {

document.location.hash = hash;

});

});

});

This should produce following result −

Click here

Advertisements