这是一款js和CSS3复选框美化特效。该复选框美化特效通过HTML来构建复选框，并通过js和css3代码来执行复选框的勾选和取消动画效果。
幻灯片和轮播图
sliderBox.js是一款jQuery新闻类轮播图插件。该jQuery新闻类轮播图插件可以创建兼容ie8、带缩略图导航、以及多种过渡效果的轮播图。
布局和界面
这是一款js和CSS3商品展示和不规则网格菜单特效。该特效采用轮播图的方式来展示商品。在每个页面的右上角，有一个主菜单按钮。当点击这个按钮时，会展开一个不规则的网格菜单，显示商品的尺寸、价格等信息。
布局和界面
这是一款基于jQuery和bootstrap4进度条的计时器插件。该插件通过bootstrap4的进度条来显示计时的进度，并提供倒计时结束后的回调函数。
布局和界面
TourJS是一款tooltip风格高级jquery分步引导插件。TourJS通过在关键位置显示tooltip信息，来分步引导用户进行页面操作，功能非常实用。
幻灯片和轮播图
jSlider是一款兼容IE8的高级jQuery轮播图插件。jSlider轮播图插件的特点是轻量级，使用简单，跨平台。通过jSlider你可以非常容易的而在网页中实现任何轮播图效果。
瀑布流插件
sortableJs是一款带排序功能的js masonry瀑布流插件。sortableJs能够使元素以卡片形式显示，并以masonry瀑布流方式进行布局，通过点击分类按钮，可以将卡片按指定的方式动态排序。
幻灯片和轮播图
这是一款带详情页的js动画轮播图特效。该轮播图点击前后导航按钮可以以炫酷动画的方式来展示图片和文字。当点击向下展开按钮时，会全屏展示对应页面的详情。
这是一款jQuery和CSS3斑马线样式range滑块特效。该range滑块通过css3将普通的range滑块渲染成斑马线样式，并通过jquery代码来控制滑块数值的显示。
菜单和导航
hc-mobile-nav是一款适合移动手机的jQuery多级侧边栏菜单插件。它可以创建移动优先的、多级的隐藏滑动侧边栏菜单，支持折叠菜单、向下展开菜单和完全展开菜单等多种展示方式。
布局和界面
slowNumber.js是一款简单快速的js的数字动画插件。slowNumber.js插件以最简单的方式快速的执行数字动画特效，你甚至还可以控制每秒钟的动画帧数。
UI界面设计
这是一款效果非常炫酷的css3火焰文字特效。该css3火焰文字特效仅用10行代码就可以实现，效果特别炫酷。
菜单和导航
pushbar.js是一款带模糊效果的js隐藏滑动侧边栏插件。pushbar.js能制作上下左右四个方向的滑动侧边栏效果，并且在侧边栏菜单显示的时候，主页面会带有炫酷的模糊特效。
exzoom是一款jquery商城商品放大镜插件。该jquery放大镜插件,自带缩略图导航和自动播放功能,也提供了手动修改大图的方法。
布局和界面
wizzy是一款jquery响应式向导插件。该jquery向导插件提供漂亮的ui效果，可以按步骤引导用户进行操作。界面十分漂亮，并且使用非常简单。
html5 canvas
jQuery-canvas-sparkles是一款jquery和canvas炫酷星星闪烁特效插件。该插件可以在DOM元素上制作出漂亮的星星闪烁效果。你可以指定星星的数量、颜色、尺寸和运动方向等。
布局和界面
这是一款基于bootstrap4的jQuery消息通知插件。该消息通知插件使用简单，可生成多种主题的toast消息通知，可设置为自动消失或固定时间消失等，非常实用。
菜单和导航
这是一款基于bootstrap4的滑动侧边栏特效。该滑动侧边栏使用bootstrap4框架，通过css和jquery来完成隐藏侧边栏，当点击打开侧边栏按钮时，侧边栏会以动画的方式滑动出来。
野草云（原野草主机），成立于2012年。我们定位于为有一定技术的IT从业人员、中小企业提供 稳定/快速/高性价比 的海外主机产品。...
对于元素间的空格，IE9以前的版本不会返回文本节点，而其他浏览器都会将空格当做是文本节点返回。这就导致了在使用childNodes和firstChild的属性时行为的不一致。为了弥补这一差异，而...
在传统的javascript中，要完成类名的删除非常麻烦。在HTML5中新增了一个操作类名的方式，可以让操作更加简单安全，这个方式就是为所有的元素添加classList属性。...
viewport是什么？通俗的讲，viewport是用户网页的可视区域。移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。...
ECMAScript5为数组提供了类似栈结构的方法。栈是一种LIFO（Last-In-First-Out）的数据结构，即最先添加到容器中的项目最早被移出。这种数据结构可以限制插入和删除项目。...
ECMAScript5为数组定义了2个归并方法：reduce()和reduceRight()。这两个方法都会迭代数组的随意项，然后构建一个最终返回的值。...
ECMAScript5为数组定义了5个迭代方法。分别是every()、filter()、forEach()、map()和some()方法。...
在上传图片到服务器之前，我们希望可以预览一下要上传的图片。这个功能可以通过HTML5 的FileReader()方法来实现。...
在文件上传到服务器之前，我们可以通过jquery来获取上传文件的名称，类型和尺寸大小。...
Webkit内核的浏览器支持CSS3的background-clip属性，它能够完成和photoshop相同的文字遮罩效果。...
有很多种方法可以达到这种图片转换的效果，包括使用CSS3滤镜，HTML5 Canvas和jquery插件等。...
在HTML5中新增了许多新特性，其中placeholder就是其中之一。placeholder属性规定可描述输入字段预期值的简短的提示信息。该提示会在用户输入值之前显示在输入字段中。...jQuery和css3超酷图片预览插件
当前位置： >
> jQuery和css3超酷图片预览插件
这是一款效果很酷的jquery图片预览插件。该插件当用户点击预览图片的时候，会弹出模态窗口，图片会放大并滑出图片说明文本。当点击关闭图片按钮后，图片缩小回到原来的位置。
浏览器兼容性
这是一款使用css3和Velocity.js制作的jquery图片预览插件。
电子商务网站设计的宗旨是通过简化的设计提高用户体验，提高转化率也有一定的模式。另外一种模式是在需要的地方提供更多的信息来达到同样的目的。这款jquery图片预览插件使用的就是第二种模式。
这个插件的操作十分简单：点击quick view按钮触发模态窗口来显示大图和图片的信息。
一个插件程序的设计理念是为用户提供最好的体验，有很多工具可以帮助我们制作平滑的动画效果，例如：Joel Besada 的 和 Julian Shapiro 的。
回到我们的教程，下面是一张显示该插件功能的gif图片：
html结构中图片画廊使用一个无序列表制作。.cd-quick-view &div&是插件的重点部分，它包含一个slider .cd-slider-wrapper和图片信息 .cd-item-info。
&ul class=&cd-items cd-container&&
&li class=&cd-item&&
&img src=&img/item-1.jpg& alt=&Item Preview&&
&a href=�& class=&cd-trigger&&Quick View&/a&
&/li& &!-- cd-item --&
&li&&!-- ... --&&/li&
&/ul& &!-- cd-items --&
&div class=&cd-quick-view&&
&div class=&cd-slider-wrapper&&
&ul class=&cd-slider&&
&li class=&selected&&&img src=&img/item-1.jpg& alt=&Product 1&&&/li&
&li&&img src=&img/item-2.jpg& alt=&Product 2&&&/li&
&li&&img src=&img/item-3.jpg& alt=&Product 3&&&/li&
&/ul& &!-- cd-slider --&
&ul class=&cd-slider-navigation&&
&li&&a class=&cd-next& href=�&&Prev&/a&&/li&
&li&&a class=&cd-prev& href=�&&Next&/a&&/li&
&/ul& &!-- cd-slider-navigation --&
&/div& &!-- cd-slider-wrapper --&
&div class=&cd-item-info&&
&h2&Produt Title&/h2&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing...&/p&
&ul class=&cd-item-action&&
&li&&button class=&add-to-cart&&Add to cart&/button&&/li&
&li&&a href=�&&Learn more&/a&&/li&
&/ul& &!-- cd-item-action --&
&/div& &!-- cd-item-info --&
&a href=�& class=&cd-close&&Close&/a&
&/div& &!-- cd-quick-view --&
首先需要注意的是，该插件的效果在移动设备和手机上隐藏的。原因是使用手机很容易就可以进入到产品页面。
大部分的动画效果都使用jQuery和来完成。半透明的遮罩层使用body::after伪元素来制作。
body::after {
/* dark overlay layer - visible when we fire .cd-quick-view */
width: 100%;
height: 100%;
background: rgba(71, 55, 78, 0.8);
visibility:
opacity: 0;
transition: opacity .3s 0s, visibility 0s .3s;
@media only screen and (min-width: 1024px) {
body.overlay-layer::after {
visibility:
opacity: 1;
transition: opacity .3s 0s, visibility 0s 0s;
插件中很多元素的动画都带有CSS3 transition。为了是插件性能更好，我们使用了translateZ(0) hack技术。
.cd-quick-view {
max-width: 900
visibility:
/* Force Hardware Acceleration in WebKit */
transform: translateZ(0);
-webkit-backface-visibility:
backface-visibility:
will-change: left, top,
z-index: 1;
J***ASCRIPT
当用户点击了.cd-trigger元素，我们获取被选择图片的top、left和宽度值，并将它放入到.cd-quick-view元素中（该元素是position: fixed的）。通过这个方法使.cd-quick-view拥有和图片相同的大小。
当我们移动 .cd-quick-view元素，第一步我们移动 .cd-quick-view的宽度到最终宽度（在插件中是400px）。我们也移动 .cd-quick-view的位置，使它相对于屏幕居中。在这一步中，只有图片是可见的，图片说明仍被隐藏。
第二步我们 改变 .cd-quick-view到它的最终值（屏幕宽度的80%，最大宽度900px），并改变它的位置使其居中。
我们使用来制作动画效果。这个插件重新实现了jQuery的$.animate() 方法，使其性能更加优秀。在插件中，第一步动画使用了spring easing 效果，第二步中使用量为ease easing 效果。
$('.cd-trigger').on('click', function(event){
$('.cd-quick-view').css({
"top": topSelected, // this is the selected image top value
"left": leftSelected, // this is the selected image left value
"width": widthSelected, // this is the selected image width
}).velocity({
//animate the quick view: animate its width and center it in the viewport
//during this animation, only the slider image is visible
'width': sliderFinalWidth+'px',
'left': finalLeft+'px', // ($(window).width - sliderFinalWidth)/2,
'top': finalTop+ 'px', // ($(window).height - slider final height)/2,
}, 1000, [ 400, 20 ])
.velocity({
'width': quickViewWidth+'px', // 80% of the viewport
'left': quickViewLeft+'px', // 10% of the viewport
}, 300, 'ease' ,function(){
//show quick view content
$('.cd-quick-view').addClass('add-content');
}).addClass('is-visible');
//assign .overlay-layer class to the body, assign the .empty-box class to the selected .cd-item
当用户关闭图片预览窗口，动画效果也是非常酷的。
注意：在关闭图片预览窗口之前，我们改变了图片的src的值。
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！