一款基于jQuery的超酷动画幻灯片
今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效,带有超酷炫的动画特效,动态效果丝毫不逊色于flash动画,具有很强的视觉冲击力,推荐下载学习!
提示:兼容360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗,不支持IE8及以下浏览器。效果图如下:
实现的代码。
需要引的用js在实例代码中已提供。下面是html代码部分:
<div id="vivo-wrap">
<div id="vivo-contain">
<div class="focus-gallery">
<ul class="cl">
<li class="high-imageSearch3"><a href="http://www.w2bc.com/">
<div class="high-box">
<div class="figure">
<div class="screen">
<img src="data:images/h-imagesearch3-sc1.jpg" width="1310" height="299" /></div>
<div class="mobile">
<img src="data:images/h-imagesearch3-mob.png" width="700" height="380" /></div>
</div>
<div class="high-title">
<h2>
<img src="data:images/h-imagesearch3-logo.png" width="830" height="390" /></h2>
</div>
</div>
</a></li>
<li class="high-x5"><a href="http://www.w2bc.com/">
<div class="high-box">
<div class="figure">
<b class="mob1">
<img src="data:images/h-x5-f1.png" alt="X5" width="700" height="680" /></b> <b class="mob2">
<img src="data:images/h-x5-f2.png" alt="X5" width="490" height="480" /></b> <b class="mob3">
<img src="data:images/h-x5-f3.png" alt="X5" width="510" height="415" /></b>
<b class="mob4">
<img src="data:images/h-x5-f4.png" alt="X5" width="710" height="680" /></b>
</div>
<div class="high-title">
<h2>
<img src="data:images/h-x5-t1.png" width="366" height="107" /></h2>
<h3>
<img src="data:images/h-x5-t2.png" width="366" height="69" /></h3>
<h4>
<img src="data:images/h-x5-t3.png" width="366" height="127" /></h4>
</div>
</div>
</a></li>
<li class="high-x3v"><a href="http://www.w2bc.com/">
<div class="high-box">
<div class="figure">
<img src="data:images/h-x3v-figure.png" width="532" height="566" /></div>
<div class="high-title">
<h2>
<img src="data:images/h-x3v-title1.png" width="459" height="95" /></h2>
<h3>
<img src="data:images/h-x3v-title2.png" width="459" height="95" /></h3>
</div>
</div>
</a></li>
<li class="high-enjoyevent"><a href="http://www.w2bc.com/">
<div class="high-box">
<div class="e-circle">
<em class="e1"></em><em class="e2"></em><em class="e3"></em>
</div>
<div class="high-title">
<em class="t1">
<img src="data:images/h-enjoy-t1.png" width="338" height="148" /></em> <em class="t2">
<img src="data:images/h-enjoy-t3.png" width="464" height="120" /></em>
<h2>
<img src="data:images/h-enjoy-t4.png" width="756" height="447" /></h2>
<em class="t3">
<img src="data:images/h-enjoy-t2.png" width="74" height="58" /></em>
</div>
<div class="figure">
<em class="m1">
<img src="data:images/h-enjoy-c4.png" width="120" height="160" /></em>
<div class="m2">
<em class="m2-1">
<img src="data:images/h-enjoy-c2.png" width="180" height="110" /></em> <em class="m2-2">
<img src="data:images/h-enjoy-c1.png" width="240" height="430" /></em>
</div>
<em class="m3">
<img src="data:images/h-enjoy-c3.png" width="486" height="482" /></em>
</div>
</div>
</a></li>
<li class="high-xshotnew"><a href="http://www.w2bc.com/">
<div class="high-box">
<em class="mask">
<img src="data:images/h-xshot-mask.png" width="560" height="426" /></em>
<div class="high-title">
<h2>
<img src="data:images/h-xshot-t1.png" width="446" height="146" /></h2>
<h3>
<img src="data:images/h-xshot-t2.png" width="454" height="95" /></h3>
</div>
</div>
</a></li>
</ul>
<div class="switch-high">
</div>
</div>
</div>
</div>
via:http://www.w2bc.com/Article/14395
一款基于jQuery的超酷动画幻灯片的更多相关文章
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
- 4款基于jquery的列表图标动画切换特效
网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览 源码下载 实现的代码 ...
- 基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
- 【转】基于Bootstrap的超酷jQuery开关按钮插件
基于Bootstrap的超酷jQuery开关按钮插件
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 一款基于jquery超炫的弹出层提示消息
今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- 7款基于jquery的动画搜索框
无论是电商网站,还是媒体网,还是个人博客,每个网站都有属于自己个性化的搜索框.今天小编给大家带来7款基于jquery的动画搜索框.每个搜索框都采用了动画效果,一起看下效果图吧. 在线预览 源码下载 ...
随机推荐
- java中遍历实体类属性和类型
public static void testReflect(Object model) throws NoSuchMethodException, IllegalAccessException, I ...
- Android -- 图像处理(信息量超大)
Android的图像处理提供的API很帮,但是不适合用来写游戏,写游戏还是用专门的引擎比较好. Android的图像处理还有3D的处理的API,感觉超屌. 我先分享一下Android的一般的处理,比如 ...
- 【Linux】shell中svn报错:svn: Can't convert string from 'UTF-8' to native encoding:xxx
解决办法: shell中svn命令之前添加: #!/bin/bash export LC_ALL=en_US.UTF- export LANG=en_US.UTF- export LANGUAGE=e ...
- C# int与string转化
1.int-->string ; string s1 = a.ToString(); string s2 = Convert.ToString(a); 2.string -->int &q ...
- matlab中的size(),length(),ndims()函数的使用方法
1.size()使用方法: size(a)表示矩阵每一个维度的长度 比方size([1 2 3;4 5 6]) 等于[2 3]: 表示他有2行3列. size([1 2 3]) 等于[1 3]: 表示 ...
- Google Maps API v2密钥申请以及实现地图定位导航
注意新建项目之前需要安装 google play services 然后导入 通过上图方法导入sdk包下面的一个包: \adt-bundle-windows-x86\sdk\extras\googl ...
- PHP如何安装和配置Zend Studio
1 网上下载该软件,安装之后关闭三个东西 2 新建一个本地的PHP项目 3 展开左侧的资源树,发现多了一个PHP的相关东西 4 右击"基础知识",新建一个PHP文件并输入以下代码 ...
- zuul源码分析-探究原生zuul的工作原理
前提 最近在项目中使用了SpringCloud,基于zuul搭建了一个提供加解密.鉴权等功能的网关服务.鉴于之前没怎么使用过Zuul,于是顺便仔细阅读了它的源码.实际上,zuul原来提供的功能是很单一 ...
- QtGui.QGridLayout
The most universal layout class is the grid layout. This layout divides the space into rows and colu ...
- Android画图最基本的三个对象(Color,Paint,Canvas)
Android画图最基本的三个对象(Color,Paint,Canvas) 三个类都存放在 android.graphics包下 1) Color :颜色对象,相当于现实生活中的 ‘调料’ 2) Pa ...