注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery SVG图像插件SVGMagic

媒体 fishcity 4045浏览

jQuery SVG图像插件SVGMagic

SVGMagic是一款用来在网站中创建SVG图像jquery插件,插件可自动判断浏览器是否支持SVG,如果支持,SVGMagic会把信息交由服务器脚本来创建图片,然后再把生成图像的地址更新到网页中,如果不支持,SVGMagic只能是回家睡觉了,网页调用的只是原来的图片。

为什么要使用SVG?

SVG是矢量图形格式,它是完全可扩展的,无论图像大小都不会失真,也就是说任何屏幕需要显示,一个SVG将可以完美适应,而图片不会失真,更重要的时图像文件小。这意味着你可以使用PC和移动(包括视网膜)端,无需关注图像的大小了,因为他们都会得到完美清晰的,文件体积小的图像。

使用方法:

插件的使用非常的简单,只需引入SVGMagic库,然后初始化就可以了。

引入核心库文件,为了兼容所有浏览器,本例事引入了html5shiv.js

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="SVGMagic.min.js"></script>
<script src="html5shiv.js"></script>

构建html,只需把图片把成svg格式就OK了

<img class='seconddemo' src='style/resizeicon_1.svg'>
<img class='seconddemo' src='style/resizeicon_2.svg'>
<img class='seconddemo' src='style/resizeicon_3.svg'>

写入JS,初始化插件

 $(document).ready(function(){
        $('img .seconddemo').svgmagic();
    });

SVGMagic插件也可以使用于背景图片,只需设置一下参数就OK了

  $(document).ready(function(){
        $('.bgimage').svgmagic({
            backgroundimage: true
        });
    });

更多的参数选项

$('img').svgmagic({
    preloader: {url-to-preloader/false}, // 加载时显示图片的路径
    testmode: {false/true}, // SVGMagic 是否在所有浏览器中加载运行
    secure: {false/true}, //图像是否通过https模式发送
    backgroundimage: {false/true}, // 背景图片是否使用SVG
    callback: {false/function} // 图像变动后调用的方法
    dumpcache: {false/true} // 强制清除缓存,重新生成新的png图像
});

转载请注明:jQ酷 » jQuery SVG图像插件SVGMagic

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。