基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效。效果图如下:
效果图如下:
<div class="flash">
<div class="con">
<ul>
<li class="current ti1">
<h3>关于我们</h3>
<div class="show">
<img src="data:images/big_1.jpg"/>
<img src="data:images/big_2.jpg"/>
<img src="data:images/big_3.jpg"/>
<img src="data:images/big_4.jpg"/>
</div>
</li>
<li class="ti2">
<h3>联系我们</h3>
<div class="show">
<img src="data:images/big_5.jpg"/>
<img src="data:images/big_6.jpg"/>
<img src="data:images/big_7.jpg"/>
<img src="data:images/big_8.jpg"/>
</div>
</li>
<li class="ti3">
<h3>给我留言</h3>
<div class="show">
<img src="data:images/big_1.jpg"/>
<img src="data:images/big_3.jpg"/>
<img src="data:images/big_5.jpg"/>
<img src="data:images/big_7.jpg"/>
</div>
</li>
<li class="ti4">
<h3>网站首页</h3>
<div class="show">
<img src="data:images/big_2.jpg"/>
<img src="data:images/big_4.jpg"/>
<img src="data:images/big_6.jpg"/>
<img src="data:images/big_8.jpg"/>
</div>
</li>
</ul>
</div>
</div>
javascript代码:
var timer=null;
var i=0;
$(function(){
$(".flash .con ul li").mouseover(function(){
clearInterval(timer);
});
$(".flash .con ul li").click(function(){
$(this).stop().animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
});
$(".flash .con ul li").mouseout(function(){
timer=setInterval("startMove()",2000)
}); })
function startMove(){
i++;
if(i>$(".flash .con ul li").length-1){i=0}
$(".flash .con ul li").stop().eq(i).animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
};
timer=setInterval("startMove()",2000)
via:http://www.w2bc.com/Article/43486
基于jquery横向手风琴效果的更多相关文章
- jquery横向手风琴效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery横向手风琴效果2
<!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 一款基于jquery的手风琴显示详情
今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div al ...
- jQuery横向手风琴图片滑块
jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.c ...
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- jquery实现手风琴效果
html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- 在Linux上yum安装运行Redis,只能安装2.4.10(主从)
Installing Redis on CentOS 6.4 First, install the epel repo sudo rpm -Uvh http://download.fedoraproj ...
- iOS 图标
iOS icon是一件很头疼的事情 大致多少张呢,忘记了,下面开发者中心给的一个文档,自己捋捋有多少张 180934.jpg 幸亏不是自己画的,不然要骂姥姥,但是多数的UI是妹子啊,让人家做人家会说: ...
- MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线? Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法
MVC+Spring.NET+NHibernate .NET SSH框架整合 在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...
- MongoDB学习笔记(4)--collection
MongoDB 创建集合 本章节我们为大家介绍如何使用 MongoDB 来创建集合. MongoDB 中使用 createCollection() 方法来创建集合. 语法格式: db.createCo ...
- javascript 中 split 函数分割字符串成数组
分割字符串成数组的方法有很多,不过使用最多的还是split函数 <script language="javascript"> str="2,2,3,5,6,6 ...
- 个人用户使用genymotion 模拟器
genymotion android模拟器速度快,比较好用.对公司使用的是要收费的,但是对个人使用还是免费的,所以个人用户还可以继续使用.使用方法 1.注册账号,填写用户名.邮箱.密码.公司类型(选g ...
- BigBao 的python开发到DevOps 之路
本人是打杂的,从想学Python到自学Python,最后到报班培训Python路程总共用时两年,目前在培训Python.因为我这个大脑不适合自学.脑袋笨,自制力差,所以没办法只有乖乖交钱学python ...
- MySql(五):MySQL数据库安全管理
一.前言 对于任何一个企业来说,其数据库系统中所保存数据的安全性无疑是非常重要的,尤其是公司的有些商业数据,可能数据就是公司的根本. 失去了数据,可能就失去了一切 本章将针对mysql的安全相关内容进 ...
- 《Java Concurrency》读书笔记,使用JDK并发包构建程序
1. java.util.concurrent概述 JDK5.0以后的版本都引入了高级并发特性,大多数的特性在java.util.concurrent包中,是专门用于多线并发编程的,充分利用了现代多处 ...
- 如何使你的Android应用记住曾经使用过的账户信息
原文:http://android.eoe.cn/topic/android_sdk 当您记住他们的名字时,每个人都会很喜欢.最简单的一个例子,您能够做的,让您的应用更加受人喜爱的,最有效的方法是记住 ...