css3实现滚动手表
静态html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
@charset "utf-8";
body,div,h1,p,hr{margin: 0;padding: 0;}
body{font-family: "微软雅黑";}
.continer,body,html{height: 100%;}
.continer>div{box-sizing: border-box;}
/*.continer img{display: block;}*/
.top{height: 10%;border-bottom: 1px solid #ccc;}
.left{height: 90%;width: 18%;float: left;border-right: 1px solid #ccc;}
.left img{height: 180px;width: 120px;margin: 20px auto 0;cursor: pointer;display: block;}
.right{height: 90%;width: 80%;float: right;}
.right img{height: 550px;margin: 50px auto;display: block;}
</style>
<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
</head>
<body>
<div class="container">
<div class="top">
<h1>Apple Watch</h1>
<p>手表手表</p>
</div>
<div class="left">
<img src="img/watch1.jpg" />
<img src="img/watch2.jpg" />
<img src="img/watch3.jpg" />
</div>
<div class="right">
<img src="img/watch1.jpg" />
<img src="img/watch2.jpg" />
<img src="img/watch3.jpg" />
</div>
</div>
</body>
</html>
jq代码：
$(function(){
//右侧div中除了第一张图片，其他都隐藏；
$(".right>img:not(:first)").hide();
//点击左侧小图标
$(".left>img").mouseover(function(){
//获取小图下标
var index=$(this).index();
//根据下标找到对应的大图
var bigPic=$(".right>img").eq(index);
//让当前大图显示，其他大图隐藏
bigPic.stop().slideDown(700).siblings().stop().slideUp(700);
})
})
css3实现滚动手表的更多相关文章
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- 纯css3无缝滚动
纯css3无缝向左滚动: HTML: <div class="marqueCon"> <div class="marque"> < ...
- css3制作滚动按钮
1,中间圆点用到css3的gradient属性 2,运动用到css3的transition属性 3,需要写各个浏览器的兼容 代码如下 <!DOCTYPE html> <html la ...
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- fullPage教程 -- 整屏滚动效果插件 fullpage详解
1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...
- 全屏滚动-jQuery插件实现
全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...
- FullPage.js全屏滚动插件学习总结
如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...
- FullPage.js全屏滚动插件的配置项、方法和回调函数
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
随机推荐
- Git用<<<<<<<，=======，>>>>>>>标记出不同分支的内容
Git用<<<<<<<,=======,>>>>>>>标记出不同分支的内容 当Git无法自动合并分支时,就必须首先解 ...
- Codeforces Round #313 (Div. 2) 560D Equivalent Strings(dos)
D. Equivalent Strings time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- 当使用servlet输出json时，浏览器端jquery的ajax遇到parse error的问题
在使用jquery的ajax进行请求发送并由服务端的servlet返回json格式的数据内容时,假设输出内容没有正确设置,会遇到client浏览器报告parse error的问题.这个问题的解决仅仅须 ...
- FZU 1851 组合数
给你两个数n和m,然后让你求组合数C(n,m)中的质因子的个数. 这里用到的一个定理:判断阶乘n!中的质因子 i 的个数的方法---f(n!)=n/i+n/i^2+n/i^3+.....n/i^m ( ...
- C# List数据批量更新
针对单条数据一般都是update语句直接更新 例如:update UserTable set UserName='小名' where userid=xxx 但是如果是针对List数据组进行更新的话 ...
- 黑马程序猿——JAVA基础——集合
----------android培训.java培训.java学习型技术博客.期待与您交流.------------ 一.关于java中的集合类 首先看一下,大致的框架流程图 ...
- js动态创建表格------Day59
刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...
- Iterator - 迭代器模式
定义 提供一个方法顺序訪问一个聚合对象中个各个元素,而又不须要暴露该对象的内部结构. 案例 一个聚合对象.如一个列表List.应该提供一种方法来让别人能够訪问它的元素.而又不用暴露内部结构.迭代器模式 ...
- bzoj1081: [SCOI2005]超级格雷码(dfs)
1081: [SCOI2005]超级格雷码 题目:传送门 题解: 又是一道水题... 因为之前做过所以知道规律: 如n=2 B=3: 00 10 20 21 11 01 02 12 22 ...
- php传值调用和传值调用和变量函数
php传值调用和传值调用和变量函数 代码 <?php //传值调用,$m的值不改变 function text($i){ $i = 'Clive'; echo $i; } text(123); ...