html5拖动按钮齿轮动画切换内容显示代码



93 371 124



特效描述:html5拖动按钮 齿轮动画 切换内容显示,有趣的html5拖动左下角滑块并滑到滑槽右端右边会切换相应的内容,左边齿轮动画跟着转动内容切换代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/css.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/chilun.js"></script>

3. HTML代码

<div class="main">
	<div class="wh_200"><img src="images/chilun.png" width="200" height="200"></div>
	<div class="wh_120"><img src="images/chilun.png" width="120" height="120"></div>
	<div class="wh_100"><img src="images/chilun.png" width="100" height="100"></div>
	<div class="wh_150"><img src="images/rotate.png" width="150" height="150"></div>
	<div class="chuansong"><img src="images/chuan.png" width="300" height="211"></div>
	<div class="line"></div>
	<div class="slide">
		<div id="slide_btn"></div>
	</div>
</div>
<div class="container">
	<div class="article">
		<p>第一版夫志当存高远,慕先贤,绝情欲,弃疑滞,使庶几之志,揭然有所存,恻然有所感;忍屈伸,去细碎,广咨问,除嫌吝,虽有淹留,何损于美趣,何患于不济。若志不强毅,意不慷慨,徒碌碌滞于俗,默默束于情,永窜伏于平庸,不免于下流矣。</p>
	</div>
</div>
<div class="container2" style="display:none">
	<div class="article2" style="display:none"><p>第二版内容蓝莲花没有什么能够阻挡 你对自由地向往 天马行空的生涯 你的心了无牵挂 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 心中那自由地世界 如此的清澈高远 盛开着永不凋零 蓝莲花 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 心中那自由地世界 如此的清澈高远 盛开着永不凋零 蓝莲花</p></div>
</div>
<div class="container3" style="display:none">
		<div class="article3" style="display:none"><p>第三版内容蓝莲花没有什么能够阻挡 你对自由地向往 天马行空的生涯 你的心了无牵挂 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 心中那自由地世界 如此的清澈高远 盛开着永不凋零 蓝莲花 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 心中那自由地世界 如此的清澈高远 盛开着永不凋零 蓝莲花</p></div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片拖动 导航切换 收缩导航菜单 html5动画导航菜单 图片头像上传 文字标签 文字拖动 文字收缩展开 html5图片动画 文件上传 彩色文字 拖动排序 图片切换 图片收缩展开 html5文字动画 文本框 文字闪烁 文字切换 下拉框 打字机 弹出层拖动 html5表情动画 背景切换 复选 文字列表 html5线条动画 手风琴 单选 文字弹幕 选项卡自动切换 登录框 html5飘落动画 文字高亮 视频切换 注册框 html5光标动画 列表切换 搜索框 验证码 渐隐切换 html5悬停动画 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 文字叠加 滚动切换 滑动选项卡切换 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 加载动画 文字淡出淡进 文字全屏 文字延迟加载 拖动拽动 360全景 html5文字动画 文字滚动 文字滑动 文字切换 选项卡切换 滑动手风琴 收缩收起展开 html5弹窗动画 图片文字 文字导航菜单 切换按钮 html5动画h5动画 form表单 文字 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到