静态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. 洛谷—— P1962 斐波那契数列

    https://www.luogu.org/problem/show?pid=1962 题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f ...

  2. Spring MVC-Hello World示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_hello_world_example.htm 说明:示例基于Spring MVC ...

  3. Windows 10不能正常打开开始菜单问题修复

    1.可以尝试通过命令重新注注册Windows Store app: powershell -ExecutionPolicy Unrestricted Add-AppxPackage -DisableD ...

  4. [Android]推断网络连接是否可用

    /** * 推断移动网络是否开启 * * @param context * @return */ public static boolean isNetEnabled(Context context) ...

  5. springmvc 监听器getWriter() has already been called for this response问题

    springmvc 监听器getWriter() has already been called for this response问题 在监听器中,如果return true,就不要使用 respo ...

  6. webbench压力測试工具

    apache的測试工具ab 在并发100个以上后会出现错误.网上也有非常多改ab源代码来解禁的. 只是还是推荐一款比較好用的压力測试工具webbench wget http://blog.zyan.c ...

  7. iOS项目开发实战——使用Xcode6设计自己定义控件与图形

    在iOS开发中,有很多控件都是Xcode默认提供的.使用这些控件是很方便的.可是因为某些须要.须要自己设计控件,那么应该怎么做呢?在Xcode6中提供了这种接口,同意开发人员高速开发自己定义控件,而且 ...

  8. Odoo(OpenERP)开发实践：数据模型学习

    作者:苏州-微尘 Odoo中,在Python类里定义的模型及字段信息,可在系统中直接查看.为用户开启技术特性权限后,就可以通过菜单 [设置->技术->数据结构->模型] 进入列表视图 ...

  9. 对VC++的OO思考

    1. MFC借助C++的优势为Windows开发开辟了一片新天地,同时也借助 ApplicationWizzard使开发者摆脱离了那些每次都必写基本代码2. 借助ClassWizard和消息映射使开发 ...

  10. h5-10 canvas 简易祖玛

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...