`
renyiqiu
  • 浏览: 30846 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

制作淡入淡出效果的JQuery插件

阅读更多

diagonalFade-轻松定制淡入淡出效果的JQuery插件

 

今天为大家介绍的是一款名为diagonalFade的jquery插件

 

文章详情(附demo和文件下载)

 

 

关键代码:

function slideshow(selector, _f) {
            var x = parseInt(Math.random() * 2); //  从左到右
            var y = parseInt(Math.random() * 2); //从上到下
            var f = _f; //  淡出或者淡入
            if (x > 0) x = 'left-right';
            else x = 'right-left';
            if (y > 0) y = 'top-bottom';
            else y = 'bottom-top';
            var s = 'out';
            if (f) {
                s = 'in';
                f = false;
            } else {
                s = 'out';
                f = true;
            }
            $(selector).diagonalFade({
                time: 100,
                fadeDirection_x: x,
                fadeDirection_y: y,
                fade: s,
                complete: function () {
                    slideshow(selector, f);
                }
            });
        }
        $(function () {
            slideshow("#image_cascade", false);
        })

 

0
0
分享到:
评论

相关推荐

    超实用的jQuery淡入淡出焦点图插件 带3D相框

    在本主题中,我们将深入探讨jQuery中的淡入淡出(FadeIn/FadeOut)功能以及如何结合3D相框效果创建一个超实用的焦点图插件。 首先,淡入淡出效果是jQuery中最基础且常用的功能之一。`fadeIn()`方法用于让元素逐渐变...

    jQuery滚动鼠标图像淡入淡出插件crossfade.js

    crossfade.js是一个非常小的jQuery插件程序.当您滚动鼠标时图像实现叉淡入淡出效果。浏览器要求ie8以上版本。演示地址:http://www.jq22.com/jquery-info459

    jquery全屏响应式淡入淡出效果轮播图插件

    总结来说,这个"jquery全屏响应式淡入淡出效果轮播图插件"利用了jQuery的强大功能,结合全屏响应式设计,为用户提供了一种优雅且适应各种设备的图片展示方式。其自动切换和淡入淡出效果增强了用户体验,同时对ie8的...

    jquery淡入淡出幻灯展示插件

    1. **cycle.htm** - 这可能是一个包含HTML结构和JavaScript代码的文件,用于设置幻灯展示的容器、元素以及调用jQuery插件进行动画效果的脚本。 2. **images** - 这个文件夹很可能包含了用于幻灯展示的图片资源。...

    jQuery超酷文字淡入淡出显示特效

    在本案例中,jQuery是实现文字淡入淡出效果的基础,通过其强大的API和丰富的插件生态系统,开发者可以轻松地添加复杂的动态效果到网页中。 reveal-it.js插件则是这个特效的核心。它专门设计用来让文字以平滑的淡入...

    jQuery图片自动淡入淡出插件

    能让任意列表形式的内容依次淡入淡出切换显示,或是上下切换显示。内容可以是文字,图片等。支持各式标签,列表标签ul,li或是div,p标签都可以。 可以非常轻松的实现诸如新闻或公告内容的自动随机切换显示,或是...

    jQuery淡入淡出图片切换的幻灯插件.rar

    基于jQuery淡入淡出可自动切换的幻灯插件,原型是前几天写的一个幻灯效果,因为一个小bug卡了两天,然后清空之前写的代码,重新整理思路写出来的. 思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,...

    文字和图片淡入淡出的jQuery图片展示.rar

    “整体效果有点Flash风格”可能意味着这种jQuery插件在动画效果上追求类似早期Flash技术的动态感,但与Flash不同的是,jQuery是基于HTML和JavaScript的,无需额外的插件支持,对移动设备更加友好。 标签“网页素材-...

    jquery淡入淡出轮播图

    "jquery淡入淡出轮播图"是利用jQuery库实现的一种动态效果,为用户提供了一种优雅的图片切换体验。jQuery是一个轻量级、功能丰富的JavaScript库,它的API简洁易用,使得创建交互式的网页变得更为简单。 该插件的...

    jQuery超炫淡入淡出效果DIV渐变居中弹出框插件

    本篇文章将详细讲解基于jQuery实现的超炫淡入淡出效果、DIV渐变居中弹出框插件的原理与应用。 首先,"jQuery超炫淡入淡出效果"是指利用jQuery提供的fadeIn()和fadeOut()方法,实现元素的平滑透明度变化,从而达到...

    jquery插件库-网页翻滚淡入淡出.zip

    "jquery插件库-网页翻滚淡入淡出.zip"这个压缩包显然包含了与jQuery相关的插件,主要用于实现网页内容在用户滚动页面时的淡入淡出效果。这种效果在现代网页设计中非常常见,可以增加网站的视觉吸引力,提高用户体验...

    jQuery左右淡入淡出切换幻灯片.zip

    今天我们将深入探讨一款名为“jQuery左右淡入淡出切换幻灯片”的国产jQuery插件,它以其小巧的体积和丰富的功能,为网页动态效果设计提供了新的可能。 首先,我们来看这款插件的核心特性。其名称中的"jQuery"表明它...

    网站图片 类似flash效果 淡入淡出

    在本案例中,"网站图片 类似flash效果 淡入淡出"的实现主要依赖JavaScript库,特别是jQuery,以及CSS样式。 首先,`index.html`是网站的主页面,其中包含了网页的基本结构和元素,包括图片的容器和必要的JavaScript...

    jquery淡出效果插件jQFader

    在网页设计和开发中,动态效果的运用可以提升用户体验,其中淡入淡出效果是最常见的动画之一。`jQuery`库以其丰富的功能和简洁的API,使得实现这类效果变得轻而易举。`jQFader`是一个专为jQuery设计的轻量级插件,它...

    jQuery淡入淡出焦点图广告轮播插件

    "jQuery淡入淡出焦点图广告轮播插件"就是这样一个工具,它利用jQuery库实现了一种优雅的图片切换效果,特别是其淡入淡出过渡动画,使得视觉体验更加流畅。 **一、jQuery库的介绍** jQuery是一款轻量级的JavaScript...

    jQuery放大缩小淡入淡出焦点图特效.zip

    本文将深入探讨"jQuery放大缩小淡入淡出焦点图特效"这一主题,该特效基于流行的slick插件实现,不仅在桌面端呈现出图片的放大缩小、淡入淡出过渡动画,还兼顾了手机移动触摸设备的兼容性,从而为用户提供一致的交互...

    jQuery淡入淡出瀑布流效果

    jQuery淡入淡出瀑布流效果是一种常见的网页设计技术,它结合了jQuery库的动画功能与瀑布流布局,为用户呈现动态、美观的图片展示。在本文中,我们将深入探讨这一技术的核心概念、实现方法以及其在不同浏览器上的兼容...

    jQuery淡入淡出文字动画特效.zip

    在实际应用中,开发者通常会将这些动画效果封装成自定义的jQuery插件,以便于在多个地方复用,并可以通过传入不同的参数来定制动画效果。此外,为了保证性能,需要注意避免过度使用动画,尤其是对于大型或频繁更新的...

    jquery 左右淡入淡出滑动

    本教程将深入讲解如何使用jQuery来实现一个左右淡入淡出滑动的效果,这种效果通常用于创建引人注目的提示信息或者新闻滚动展示。 首先,我们需要在HTML页面中引入jQuery库。如果还没有引入,可以通过以下方式添加...

    jQuery淡入淡出下拉菜单.zip

    本教程将详细讲解如何利用jQuery创建一款淡入淡出效果的下拉菜单,提升网站的导航体验。 首先,jQuery淡入淡出下拉菜单的核心在于利用jQuery的动画效果和事件监听来实现动态交互。当用户鼠标悬停在主菜单项上时,子...

Global site tag (gtag.js) - Google Analytics