一款基于jQuery的超酷动画幻灯片
2023-09-27 14:28:19 时间
今天给大家带来一款仿步步高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="images/h-imagesearch3-sc1.jpg" width="1310" height="299" /></div> <div class="mobile"> <img src="images/h-imagesearch3-mob.png" width="700" height="380" /></div> </div> <div class="high-title"> <h2> <img src="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="images/h-x5-f1.png" alt="X5" width="700" height="680" /></b> <b class="mob2"> <img src="images/h-x5-f2.png" alt="X5" width="490" height="480" /></b> <b class="mob3"> <img src="images/h-x5-f3.png" alt="X5" width="510" height="415" /></b> <b class="mob4"> <img src="images/h-x5-f4.png" alt="X5" width="710" height="680" /></b> </div> <div class="high-title"> <h2> <img src="images/h-x5-t1.png" width="366" height="107" /></h2> <h3> <img src="images/h-x5-t2.png" width="366" height="69" /></h3> <h4> <img src="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="images/h-x3v-figure.png" width="532" height="566" /></div> <div class="high-title"> <h2> <img src="images/h-x3v-title1.png" width="459" height="95" /></h2> <h3> <img src="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="images/h-enjoy-t1.png" width="338" height="148" /></em> <em class="t2"> <img src="images/h-enjoy-t3.png" width="464" height="120" /></em> <h2> <img src="images/h-enjoy-t4.png" width="756" height="447" /></h2> <em class="t3"> <img src="images/h-enjoy-t2.png" width="74" height="58" /></em> </div> <div class="figure"> <em class="m1"> <img src="images/h-enjoy-c4.png" width="120" height="160" /></em> <div class="m2"> <em class="m2-1"> <img src="images/h-enjoy-c2.png" width="180" height="110" /></em> <em class="m2-2"> <img src="images/h-enjoy-c1.png" width="240" height="430" /></em> </div> <em class="m3"> <img src="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="images/h-xshot-mask.png" width="560" height="426" /></em> <div class="high-title"> <h2> <img src="images/h-xshot-t1.png" width="446" height="146" /></h2> <h3> <img src="images/h-xshot-t2.png" width="454" height="95" /></h3> </div> </div> </a></li> </ul> <div class="switch-high"> </div> </div> </div> </div>
相关文章
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- animate结合jQuery实现hover用户交互动画
- Jquery或Js中的字符串操作函数大全(搜集中)
- Jquery中针对全局快捷键和文本框(回车)快捷键的用法(实例)
- 猴子也能学会的jQuery第七期——jQuery动画(下)
- 猴子也能学会的jQuery第七期——jQuery动画(上)
- 7款绚丽的jQuery/HTML5动画及源码
- [转]关于jquery中html()、text()、val()的区别
- jquery 购物车飞入效果
- jquery 温故而知新 animate动画的一些坑
- 用jQuery Mobile做HTML5移动应用的三个优缺点
- jQuery动画效果animate和scrollTop结合使用实例
- Jquery :animate反复执行的动画可以利用函数的回调
- jQuery 选择器
- 《jQuery Cookbook中文版》——1.1 在HTML页面中包含jQuery程序库代码
- 《jQuery Cookbook中文版》——1.8 将前一个选择集包含到当前选择集
- 《jQuery Mobile快速入门》—— 1.2 跨所有移动平台的统一UI
- Android+Jquery Mobile学习系列(5)-SQLite数据库
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- 最新eclipse安装配置spket教程,自动补全 Jquery,应该把plugins和features两个文件夹复制到dropins下
- 获取jQuery对象的第一个子元素
- jquery.dad.js实现table的垂直拖拽(并取到当前拖拽对象)
- jQuery序列化表单数据 serialize()、serializeArray()及使用
- JQuery DataTables学习
- jQuery animate方法开发极客标签Logo动画融合效果
- JQuery之事件处理
- jquery实现可以中英切换的导航条