静态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. 洛谷 P2534 [AHOI2012]铁盘整理

    P2534 [AHOI2012]铁盘整理 题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1& ...

  2. mdl 锁 SYSTEMTAP跟踪

    systemtap : 各种资源的使用限制由所生成的C代码中的宏来设置.这些值可在编译时由-D选项来重写.下面描述了部分挑选出来的宏: MAXNESTING 递归函数的最大调用层数,默认值是10. M ...

  3. 黑马day07 登录注冊案例(一)

    简单介绍:依据三层架构的思想设计本案例. 1.搭建好开发环境 准备好须要的包和模拟数据库配置文件users.xml -->cn.itheima.dao -->cn.itheima.serv ...

  4. JSON以及Java转换JSON的方法（前后端经常使用处理方法）

    本文主要讲述例如以下几个内容: 1.JSON定义以及JSON的特性 2.怎样在JavaScript中解释JSON格式数据 3.怎样在Java代码中使用JSON(讲对象转换成JSON对象以及解释JSON ...

  5. 【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框

    在网页中,常常会用到各种Icon,假设老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也能够用CSS写出各种简单的形状.一来能够减轻他们的负担,二来也能够使用CSS替代图片.提高载入速度. 在网页 ...

  6. java 命令行 编译 运行程序

    学习java使用IDE前最好先用用命令行的javac.java来跑一跑简单的程序,这样能够熟悉一下包管理对.class文件路径的影响. 我们先写一段简单的代码: package com.csdn.lk ...

  7. ubuntu修改capslock键,单独使用为ｅｓｃ，组合使用时为ｃｔｒｌ＋

    一.下面这部分可以将capslock与ctrl互换 将下面的代码放入-/.Xmodmap中, remove Lock = Caps_Lock remove Control = Control_L ke ...

  8. android监听虚拟按键的显示与隐藏【转】

    本文转载自:http://blog.csdn.net/u014583590/article/details/55263141 虚拟按键在华为手机中大量存在,而虚拟按键的存在无疑增加了屏幕适配的难度,往 ...

  9. Working with SQL Server LocalDB

    https://docs.asp.net/en/latest/tutorials/first-mvc-app/working-with-sql.html The ApplicationDbContex ...

  10. 中文分词--最大正向与逆向匹配算法python实现

    最大匹配法:最大匹配是指以词典为依据,取词典中最长单词为第一个次取字数量的扫描串,在词典中进行扫描(为提升扫描效率,还可以跟据字数多少设计多个字典,然后根据字数分别从不同字典中进行扫描).例如:词典中 ...