开发者社区> 秋天风景> 正文

Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》

简介:   《Web 开发最有用的50款 jQuery 插件集锦》系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,将陆续分享给大家,记得关注和收藏啊。
+关注继续查看

  《Web 开发最有用的50款 jQuery 插件集锦》系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,将陆续分享给大家,记得关注和收藏啊。

您可能感兴趣的相关文章

 

tiltShift.js

  tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜实现移轴镜头的效果。

  使用非常简单,使用 data 属性配置参数,HTML 示例:

<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">
  • -position(0-100),定义对焦点的位置
  • -blur(0 - ?),模糊半径。设置为1或2比较合适。
  • -focus(0-100),焦点的区域大小。
  • -falloff (0-100),完全焦点和完全模糊之间的区域大小
  • -direction(“x”,“y”,或 0-360),方向。

  JavaScript 调用示例:

$(function() {
     $('.tiltshift').tiltShift();
});

   插件下载     效果演示

 

jQuery Picture

  jQuery Picture 是一款用于在网页中添加响应式图片的插件,在不同设备尺寸下显示不同的图片。

  HTML 代码示例:

<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</figure>

  JavaScript 示例:

$(function(){
    $('figure.responsive').picture();
});

   插件下载     效果演示

 

3D Image Slider

  非常非常酷的 3D 图片滑动效果,有五种绚丽的效果演示。使用示例如下:

  HTML 代码:

<ul id="sb-slider" class="sb-slider">
    <li>
        <a href="#" target="_blank">
            <img src="images/1.jpg" alt="image1"/>
        </a>
        <div class="sb-description">
            <h3>Creative Lifesaver</h3>
        </div>
    </li>
    <li>
        <img src="images/2.jpg" alt="image2"/>
        <div class="sb-description">
            <h3>...</h3>
        </div>
    </li>
    <li><!-- ... --></li>
    <!-- ... -->
</ul>

  提供了众多的配置选项,可以根据需要进行调整,下面是默认选项:

$.Slicebox.defaults = {
    orientation : 'v',
    perspective : 1200,
    cuboidsCount : 5,
    cuboidsRandom : false,
    maxCuboidsCount : 5,
    disperseFactor : 0,
    colorHiddenSides : '#222',
    sequentialFactor : 150,
    speed : 600,
    easing : 'ease',
    autoplay : false,
    interval: 3000,
    fallbackFadeSpeed : 300,
    onBeforeChange : function( position ) { return false; },
    onAfterChange : function( position ) { return false; }
};

   插件下载     效果演示

 

Image Transitions

  让人瞠目结舌的图片切换效果,有 Flip、Multi-flip、Rotation、Cube、Unfold 等特效。

  1. Demo 1: Flip
  2. Demo 2: Rotate
  3. Demo 3: Multi-Flip
  4. Demo 4: Cube
  5. Demo 5: Unfold
  6. Demo 6: Others

   插件下载     效果演示

 

Responsive Img

  Responsive Img 这款 jQuery 插件能够根据容器的大小自动更换图片的 src 属性,从而实现响应式的图片展示。

  HTML 示例代码:

<img id="img2" src="images/image.png" style="width:49%;" />
<img id="img3" src="images/image.png" style="max-width:49%;" />

  JavaScript 示例代码:

$("#img2,#img3").responsiveImg({
    breakpoints:{
        "_four":400,
        "_two":200,
        "_eight":800
    }
});

   插件下载     效果演示

 

Portfolio Image Navigator

  精致的图片导航效果,通过四个方向的箭头控制,适合作品展示的应用场合。

  默认参数配置的示例代码如下:

$('#portfolio').portfolio({
    image: {
        width: 600,
        height: 400,
        margin: 20
    },
    path: {
        width: 10,
        height: 10,
        marginTop: 5,
        marginLeft: 5
    },
    animationSpeed: 400
});

  插件下载     效果演示

 

您可能感兴趣的相关文章

 

本文链接:网站开发最有用的50款 jQuery 插件——图片特效篇

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Centos 7配置Docker CE 镜像
Centos 7配置Docker CE 镜像
139 0
〖Docker指南⑤〗学习Dockerfile,看这一篇就够了
Dockerfile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本。
8 0
❤️Android 从源码解读 Apk 的安装过程 ❤️(中)
PackageManagerService installStage() mHandler() HandlerParams.startCopy() InstallParams FileInstallArgs.copyApk() PackageManagerServiceUtils.copyPackage()
14 0
在Centos 7上配置Pouch 镜像方法
在Centos 7上配置Pouch 镜像方法
137 0
万字长文丨7个经典问题,助你拿下Java面试(建议收藏)
万字长文丨7个经典问题,助你拿下Java面试(建议收藏)
9 0
Java项目:CRM客户关系管理系统(Spring+SpringMVC+MyBatis + maven)(二)
Java项目:CRM客户关系管理系统(Spring+SpringMVC+MyBatis + maven)(二)
10 0
〖Docker指南⑥〗快速入门Docker的五种网络模式
Docker 使用Linux bridge 技术,当Docker server启动时,会在主机上创建一个名为docker0的虚拟网桥,此主机上启动的Docker容器会连接到这个虚拟网桥上。虚拟网桥的工作方式和物理交换机类似,这样主机上的所有容器就通过交换机连在了一个二层网络中。
7 0
深度学习模型实战-深度学习模型在各大公司实际生产环境的应用讲解文章
建这个仓库的是因为工作之后发现生产环境中应用的模型需要做到速度和效果的平衡,并不是越复杂越好。所以一味的追求新的模型效果不大(并不是不追,也要多看新东西)。学到模型最终是要用,而且要用好,于是就建了这么个仓库,积累一下深度学习模型在各个公司中的应用以及细节,这样在自己工作中可以做到借鉴。主要是罗列一些各大公司分享的文章,涉及到搜索/推荐/自然语言处理(NLP),持续更新... 仓库地址:https://github.com/DA-southampton/Tech_Aarticle/edit/master/README.md
5 0
Java JVM知识汇总
1、JVM 是什么? Java虚拟机(Java virtual machine,JVM)是 Java 程序运行基础,Java虚拟机有自己完善的硬件架构,如处理器、堆栈等,还具有相应的指令系统。 Java虚拟机本质上就是一个程序,当它在命令行上启动的时候,就开始执行保存在某字节码文件中的指令。Java语言的可移植性正是建立在Java虚拟机的基础上。任何平台只要装有针对于该平台的Java虚拟机,字节码文件(.class)就可以在该平台上运行。这就是“一次编译,多次运行”。
6 0
〖Docker指南⑦〗docker-compose快速入门
由Docker引领先锋,容器在过去的一年里得到了飞速发展。容器技术提供了组件化环境,帮助应用在云之间轻松迁移而无需显著的返工。当谈到构建云以及非云的应用时,容器的战斗口号是可移植性和简单性。
8 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2393
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载