基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换。这是一款支持手机端拖拽切换的网站图片循环滚动特效。效果图如下:
实现的代码。
html代码:
<div id="site-wrapper">
<section id="section-header" data-coloroverlap="dark"></section>
<section id="second-phase" class="phase-row" data-title="Illustrations" data-coloroverlap="light">
<div class="shell">
<div class="second-row"> <article> <h2>支持手机触屏滑动展示</h2> <div id="character-slider" class="sky-carousel sc-no-select" style="visibility: visible;">
<div class="sky-carousel-wrapper" style="visibility: visible; opacity: 1;">
<ul class="sky-carousel-container" style="margin-top: -21.2px; left: -1552.4px; transition: left 0.45s ease-out; -webkit-transition: left 0.45s ease-out;">
<li style="transform-origin: center 256px 0px; transform: translate(0px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 10;" class="">
<img src="data:images/bird1.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Snoop</h2>
<p>Are you in the market for information? If so, then Snoop's the Bird for you! This Bird specialises at working undercover, discretely finding out whatever you need to know. Shhh… it's a secret, alright?</p>
</div>
</li>
<li style="transform-origin: center 256px 0px; transform: translate(241.2px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 8;" class="">
<img src="data:images/bird2.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Snappy</h2>
<p>Looking for a wedding photographer? Or perhaps you want a portrait of your adorable pooch, to decorate the mantelpiece! When it comes to photography, call Snappy.</p>
</div>
</li>
<li style="transform-origin: center 256px 0px; transform: translate(482.4px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 8;" class="">
<img src="data:images/bird3.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Handy</h2>
<p>Our Handy Bird loves the jobs you hate… from putting up shelves to fixing a leaky pipe, this Bird is the DIY master. </p>
</div>
</li>
<li style="transform-origin: center 256px 0px; transform: translate(723.6px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 9;" class="">
<img src="data:images/bird4.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Blabber</h2>
<p>Got a message that needs to be delivered? Or perhaps it's an urgent package you need sent. Blabber will get your mail to its recipient, faster than a speeding bullet. Well, almost.</p>
</div>
</li>
<li style="transform-origin: center 256px 0px; transform: translate(964.8px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 8;" class="">
<img src="data:images/bird5.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Wordy</h2>
<p>Wordy loves to talk. No matter whether you're writing an email, a website, your resignation note or your acceptance speech - this Bird always knows what to say!</p>
</div>
</li>
<li class="" style="transform-origin: center 256px 0px; transform: translate(1206px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 8;">
<img src="data:images/bird6.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Basher</h2>
<p>When it comes to construction, Basher is the Bird for the job. From putting up fences and garden sheds, through to interior remodelling - this Bird just loves to build.</p>
</div>
</li>
<li style="transform-origin: center 256px 0px; transform: translate(1447.2px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 8;" class="">
<img src="data:images/bird7.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Splasher</h2>
<p>Splasher is the expert when it comes to painting. From choosing the colours for your new nursery, through to exterior weather proofing treatments: this Bird was born with a brush in its hand!</p>
</div>
</li>
<li style="transform-origin: center 256px 0px; transform: translate(1688.4px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 10;" class="sc-selected">
<img src="data:images/bird8.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Nerdy</h2>
<p>The ultimate iBird, our Tinker has the know-how that most of us lack. If you find yourself baffled by technology, then join the club - and call on Tinker for all your IT needs.</p>
</div>
</li>
<li style="transform-origin: center 256px 0px; transform: translate(2009.6px, 0px) scale(0.799983333333332) translateZ(0px); opacity: 0.999983333333332; z-index: 11;" class="">
<img src="data:images/bird9.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Thinker</h2>
<p>Out of all the Birds, Thinker is the brains of the operation. Need a cunning plan delivered in a flash? From business strategies through to first class excuses, Thinker has got a plan for every scenario.</p>
</div>
</li>
<li style="transform-origin: center 256px 0px; transform: translate(2330.8px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 9;" class="">
<img src="data:images/bird10.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Maestro</h2>
<p>Maestro is no stranger to haute cuisine. From baking lessons through to full-scale catering operations, let Maestro cook you up a treat!</p>
</div>
</li>
<li style="transform-origin: center 256px 0px; transform: translate(2572px, 0px) scale(0.4) translateZ(0px); opacity: 0.6; z-index: 8;" class="">
<img src="data:images/bird11.png" alt="" class="sc-image">
<div class="sc-content">
<h2>Super</h2>
<p>Is it a Bird? Is it a… no hang on, it is a Bird. Our Super Bird offers the ultimate, all-in-one service. If you've got a unique problem that the other Birds can't fix, then Super is always ready to come to your rescue.</p>
</div>
</li>
</ul>
</div>
<div class="sc-content-wrapper"><div class="sc-content-container" style="visibility: visible; opacity: 1;"><div class="sc-content"><h2>Thinker</h2><p>Out of all the Birds, Thinker is the brains of the operation. Need a cunning plan delivered in a flash? From business strategies through to first class excuses, Thinker has got a plan for every scenario.</p></div></div></div><canvas class="sc-overlay sc-overlay-left" width="300" height="1" style="width: 300px;"></canvas><canvas class="sc-overlay sc-overlay-right" width="300" height="1" style="width: 300px;"></canvas></div>
</article> </div>
</div>
</section>
</div>
via:http://www.w2bc.com/Article/37412
基于html5可拖拽图片循环滚动切换的更多相关文章
- html5实现拖拽上传
<html><head> <meta http-equiv="Content-Type" content="text/html; chars ...
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
- HTML5之拖拽(兼容IE和非IE)
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- cocos2d(背景图片循环滚动)
背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...
- 在viewPager中双指缩放图片,双击缩放图片,单指拖拽图片
我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...
- html5 - drag 拖拽
参考资料: 张鑫旭 : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B% ...
- 使用UIScrollView 结合 UIImageView 实现图片循环滚动
场景: 在开发工作中,有时我们需要实现一组图片循环滚动的情况.当我们使用 UIScrollView 结合 UIImageView 来实现时,一般 UIImageView 会尽量考虑重用,下面例子是以( ...
- android 拖拽图片&拖动浮动按钮到处跑
来自老外: 拖拽图片效果 方法一: 布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLa ...
随机推荐
- 关于tensorboard启动问题
我在学习过程中遇到了tensorboard无法启动的问题. 按照网上的教程,我无法正常启动tensorboard,全过程没有报错,但是打开tensorboard显示 No dashboards are ...
- [转]PhotoshopCS5 Extended使用atmlib.dll破解注册后没有3D菜单之解决方法
PS CS5分标准版和扩展版,扩展版有包括3D的所有功能理论上Adobe CS5 大师版的PS应该是扩展版的,但是某些童鞋可能会遇到安装好大师版后输入key后,PS再打开“3D选项”没有了.也就是说有 ...
- asp.net页面之间传值方法详解
asp.net中页面之间传值我们用得最多的就是get,post这两种了,其它的如session,appliction,cookie等这些相对来说少用也不是常用的,只是在特殊情况下在使用了. 1. Ge ...
- 王勇详谈 Linux Deepin 背后的故事
(Linux Deepin最近发布了12.12版本.其也许是国内第一款比较优秀的桌面Linux系统.在此向致力于研发国产OS系统的猿人们表示敬意.虽然Deepin只是基于Ubuntu在桌面应用和UI方 ...
- 使用inno setup 制作安装文件-demo1
; 脚本由 Inno Setup 脚本向导 生成! ; 有关创建 Inno Setup 脚本文件的详细资料请查阅帮助文档! #define MyAppName "查体管理系统" # ...
- unfolding maps支持中文
由于项目需要,选择了processing+unfolding的方式进行数据可是话的开发,unfolding maps是一个非常强大的地图工具,processing可以灵活自如的表达各种图形/效果.使用 ...
- CentOS编绎gcc
1.解压tar -jxvf gcc-6.3.0.tar.bz2 -C ~/dev/2.下载前前提软件包cd gcc-6.3.0 ./contrib/download_prerequisitescd . ...
- Shell中整数比較
-eq 等于,如:if ["$a" -eq "$b" ] -ne 不等于,如:if ["$a" ...
- android:3D垂直翻转动画-FlipAnimation
需求 对ImageView进行相似于翻纸牌的动画 解决 各种Animator的组合 第一步动画: 动画代码文件1,card_flip_left_out.xml <? xml version=&q ...
- Machine Learning Library (MLlib) Guide, BOOKS
download.microsoft.com/download/0/9/6/096170E9-23A2.../9780735698178.pdf Microsoft Azure Essential ...