静态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实现滚动手表的更多相关文章

  1. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  2. 纯css3无缝滚动

    纯css3无缝向左滚动: HTML: <div class="marqueCon"> <div class="marque"> < ...

  3. css3制作滚动按钮

    1,中间圆点用到css3的gradient属性 2,运动用到css3的transition属性 3,需要写各个浏览器的兼容 代码如下 <!DOCTYPE html> <html la ...

  4. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  5. fullPage教程 -- 整屏滚动效果插件 fullpage详解

    1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...

  6. 全屏滚动-jQuery插件实现

    全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...

  7. FullPage.js全屏滚动插件学习总结

    如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...

  8. FullPage.js全屏滚动插件的配置项、方法和回调函数

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  9. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

随机推荐

  1. servlet理解

    可得到一个结论:该JSP页面中的每个字符都由test1_jsp.java文件的输出流生成. 根据上面的JSP页面工作原理图,可以得到如下四个结论: — JSP文件必须在JSP服务器内运行. — JSP ...

  2. COCOS2D-X暂时设置竖屏，过一阵子再设置回横屏

    mainActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//竖屏 竖屏是JAVA代码 另外再改动C ...

  3. 进行mysql压力測试须要注意的几点

    1.填充測试数据比物理内存还要大,至少超过innodb_buffer_pool_size 值,不能将数据所有装载到内存中,除非你的本意就想測试全内存状态下的MySQL性能. 2.每轮測试完毕后,都重新 ...

  4. android 百度地图 定位功能

    废话不多说 直接新建一个新android项目:location,然后花一分钟申请一个key,然后就是把百度定位demo抄一下即可 1:首先在AndroidManifest.xml中加入权限 <u ...

  5. PbootCMS V1.1.4 正式发布

    PbootCMS V1.1.4 正式发布 PbootCMS V1.1.4 build 2018-06-251.修复自定义表单表名重复仍然添加成功问题:2.修复分享到微信导致页面错误的问题:3.修复静态 ...

  6. spring 源码解析

    1. [文件] spring源码.txt ~ 15B     下载(167) ? 1 springн┤┬вио╬Ш: 2. [文件] spring源码分析之AOP.txt ~ 15KB     下载( ...

  7. php学习随记3

    <? php #正則表達式 #就是一种描写叙述字符串结构的语法规则 #是一个特定的格式化模式 #1. 行定位符 /* 1) ^行首 2)$行尾 tm eqaul Tomorrow Moon ^t ...

  8. gcc 4.8安装

    suse的安装参考:http://blog.csdn.net/cloudskyfhx/article/details/17660607 有些错误处理见本文黄色部分 CentOS 6.4 编译安装 gc ...

  9. findContours 轮廓查找

    物体的轮廓勾勒出了物体的整体形状,物体形状的边界像素一起组合成了轮廓. 灰度图像边界的明显特征是边界两侧灰度级的突变,根据这个特征,使用Sobel.拉普拉斯或Canny之类的边缘检测算子可以有效的检测 ...

  10. .net core发布到IIS后502.5错误

    net core 在win7系统发布后,出现在502.5错误. 打开“开始”菜单,搜索“事件查看器”,然后选择“事件查看器”应用. 在“事件查看器”中,打开“Windows 日志”节点. 选择“应用程 ...