Jquery Gallery – 很有特色的响应式 jQuery 相册插件

Jquery Gallery – 很有特色的响应式 jQuery 相册插件

DEMO      下载

1.介绍

  jQuery制作zoom图片全屏放大弹出层插件。

2.使用方法

  1.引入以下的js和css文件

1 <link rel="stylesheet" href="css/zoom.css" media="all" />
2 <script src="js/jquery-1.9.1.min.js"></script>
3 <script src="js/zoom.min.js"></script>

  2.在head标签中加入以下js代码

1 <ul class="gallery">
2     <li><a href="path/to/large1.jpg"><img src="path/to/thumbnail1.jpg" /></a></li>
3     <li><a href="path/to/large2.jpg"><img src="path/to/thumbnail2.jpg" /></a></li>
4     <li><a href="path/to/large3.jpg"><img src="path/to/thumbnail3.jpg" /></a></li>
5     <li><a href="path/to/large4.jpg"><img src="path/to/thumbnail4.jpg" /></a></li>
6 </ul>
时间: 2024-08-12 21:58:16

Jquery Gallery – 很有特色的响应式 jQuery 相册插件的相关文章

10款响应式 jQuery实现图片效果插件

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

在线预览 下载地址 实例代码 <!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=&

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

使用 jQuery Mobile 和 CSS3 实现响应式设计

使用 jQuery Mobile 和 CSS3 实现响应式设计 创建可以适应每个用户的屏幕分辨率的 Web 页面布局 jQuery Mobile 框架就其本身而言就是一个优秀的解决方案,可以快速创建一个可访问的由 HTML5 标记驱动的移动网站.当与 CSS3 配合使用时,工作真的会变得很有趣,因为它使创建一个根据屏幕分辨率来响应用户设备的 Web 页面布局成为可能.本文展示了如何使用 jQuery Mobile 框架和 CSS3 媒体查询在您的 Web 页面中实现响应式设计. jQuery M

SlidesJS - 老牌的响应式 jQuery 幻灯片插件

SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作出优雅的幻灯片效果. 插件下载     效果演示 使用示例: <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style>

带多种过渡动画的响应式jQuery幻灯片插件

Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件.该幻灯片插件内置有16种不同的动画过渡效果.它提供了丰富的参数来控制幻灯片的播放.它使用简单,并且可以兼容IE8浏览器. 在线预览   源码下载 使用方法 使用Nivo-Slider幻灯片需要引入nivo-slider.css,jQuery(1.7+)和jquery.nivo.slider.js文件. 1 2 3 <link rel="stylesheet" href="css/nivo-slider.

Crumpet – 使用很简单的响应式前端开发框架

Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快速创建网站的布局响应式将变成一件轻而易举的事. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 超赞!基于 Bootstrap 的响应式的后台管理模板 太赞了!超炫的页面切换动画效

响应式瀑布流插件Grid-A-Licious

Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度,计算出当前屏幕宽度下应该生成几个等宽列:列生成好之后,再把每项放到等宽列中:当屏幕尺寸改变时,重新计算列表,然后再重新填充项. 使用该插件也很方便.使用实例: <html> <head> <meta charset="utf-8" /> <titl

响应式内容滑动插件bxSlider

响应式WEB设计可以让WEB页面自适应各种尺寸的屏幕,俨然已经成为了当今WEB设计趋势.本文将介绍一款基于jQuery的响应式内容滑动插件以及如何使用这款插件到你的WEB应用中,满足各类WEB设计需求. 查看演示 下载源码 bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,Chrome,Safari,iOS,Android,IE7+ 如何使用bxSl