jquery幻灯片--渐变
网站上为了设计,需要一些幻灯片效果,现在网站有很多插件可以使用。
想要成为以为牛逼的程序员,绝对不允许只会用别人的插件而已,不然你只能是“代码”的搬运工,而不敢做出自己的创新。
首先使用jquery做渐变效果,一般使用fadeOut/fadeIn(渐入渐出)效果。
但是因为fadeOut/fadeIn在停止效果时,使用stop()会产生不可预估的效果。
所以在做效果时,使用的方法是animate,通过设定透明度(opacity)来实现效果。因为图片显示在同一个位置,所以存在层叠问题。解决这个问题的方式是通过控制元素的z-index,将想要显示的图片显示。
创建几个函数
switch_pic 用于执行图片切换效果。
auto_switch_pic 通过调用switch_pic函数,实现定时切换页面效果。
click_trigger 切换图片效果触发器
技术细节
定时切换效果和触发切换效果会存在以下冲突
首先当定时切换还差一秒时,你发动了触发切换,刚放上去,就又自动切换到下一个图片去了。
解决方式,当鼠标在触发器内时,停止定时切换效果。
jquery幻灯片--渐变的更多相关文章
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- 锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Prezento – 轻量、简单的 jQuery 幻灯片插件
Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...
- 60款很酷的 jQuery 幻灯片演示和下载【转】
jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...
- 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效
这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...
- 12款jQuery幻灯片插件和幻灯片特效教程
jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...
- 强大实用的jQuery幻灯片插件Owl Carousel
演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...
随机推荐
- Java 多线程之龟兔赛跑(文件夹——读取文件——时间)
版权声明:本文为博主原创文章,未经博主允许不得转载. 描述: 乌龟和兔子(各自是一个Java线程)在我们的电脑上赛跑,我们为它们指定一个跑道(本地文件系统上的一个目录,该目录包含子目录).跑的规则是读 ...
- COJ 0999 WZJ的数据结构(负一)
WZJ的数据结构(负一) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 输入N个模板串Pi和文本串T,输出每个模板串Pi在T ...
- Java编程思想-第四章练习题
练习1:写一个程序,打印从1到100的值 public class Print1To100{ public static void main(String args[]){ for(int i = 1 ...
- 【转】Eclipse中创建并运行Servlet项目
最近看了写http协议的学习资料,因此想要实现下andriod平台和服务器通信,那就servlet吧,哎哟,还不错哦!顺便说下,我这个servlet服务是想获得用户名和密码进行校验,然后反给客户端状态 ...
- 关于javax.crypto.BadPaddingException: Blocktype错误的几种解决方法
此文章转载自:http://www.myexception.cn/mobile/1259076.html 关于javax.crypto.BadPaddingException: Blocktype异常 ...
- EditText设置可以编辑和不可编辑状态
1.首先想到在xml中设置android:editable="false",但是如果想在代码中动态设置可编辑状态,没有找到对应的函数 2.然后尝试使用editText.setFoc ...
- SurfaceView类透明背景设置
将SurfaceView背景设置为透明,主要添加以下几句话就可以了: 在SurfaceView创建后设置一下下面的参数: setZOrderOnTop(true); getHolder().setFo ...
- 跟我一起学extjs5(22--模块Form的自己定义的设计)
跟我一起学extjs5(22--模块Form的自己定义的设计) 前面几节完毕了模块Grid的自己定义,模块Form自己定义的过程和Grid的过程类似,可是要更复杂一些.先来设计一下要完 ...
- 基于简单sql语句的sql解析原理及在大数据中的应用
基于简单sql语句的sql解析原理及在大数据中的应用 李万鸿 老百姓呼吁打土豪分田地.共同富裕,总有一天会实现. 全面了解你所不知道的外星人和宇宙真想:http://pan.baidu.com/s/1 ...
- [开源夏令营][四] Docker remote API 之 镜像篇
列出镜像 列出镜像,有两个可选參数,一个是all,一个是filter,all可选值有,0/False/false,1/True/true,默觉得0:filter是一个包括一个过滤对象的json,形式如 ...