html5圆形旋转菜单js,jquery 圆形旋转图片滚动切换效果

这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用。

PS: 经过修改已经兼容大众浏览器。

效果图:

9e68a50e1482db6f9c0133d855eed617.png

在线演示:http://demo.jb51.net/js/ImagesRotateScroll/index.html

Step1. 创建HTML

  • Chun-Li
  • VEGA
  • DHAISIM
  • KEN
  • BALROG
  • CAMMY
  • GOUKI
  • BLANKA
  • HONDA
  • FEI LONG
  • GUILE
  • RYU
  • SAGAT
  • THWAK
  • ZANGIEF

Step2. 创建CSS

#rotatescroll {

width: 300px;

height: 300px;

margin: 0 auto;

position: relative;

}

#rotatescroll .viewport{

width: 300px;

height: 300px;

position: relative;

margin: 0 auto;

overflow: hidden;

}

#rotatescroll .overview {

width: 798px;

position: absolute;

list-style: none;

margin: 0;

padding: 0;

left: 0;

top: 0;

}

#rotatescroll .overview li {

width: 300px;

height: 300px;

float: left;

position: relative;

}

#rotatescroll .overlay {

height: 300px;

width: 300px;

background: url(../images/bg-rotatescroll.png) no-repeat 0 0;

position: absolute;

left: 0;

top: 0;

}

#rotatescroll .thumb {

width: 26px;

height: 26px;

z-index: 200;

background: url(../images/bg-thumb.png) no-repeat 50% 50%;

position: absolute;

top: 0px;

cursor: pointer;

left: 0px;

}

#rotatescroll .dot {

background: url(../images/bg-dot2.png) no-repeat 0 0;

display: none;

height: 12px;

width: 12px;

position: absolute;

left: 155px;

top: 3px;

z-index: 100;

}

#rotatescroll .dot span { display: none; }

Step3. 插入jQuery和脚本包

打包下载 //www.jb51.net/jiaoben/34107.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/328205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jsoup代码解读之四-parser(上)

转载自 Jsoup代码解读之四-parser(上)作为Java世界最好的HTML 解析库,Jsoup的parser实现非常具有代表性。这部分也是Jsoup最复杂的部分,需要一些数据结构、状态机乃至编译器的知识。好在HTML语法不复杂,解析只是到DOM树为止,所以…

在Linux和Windows的Docker容器中运行ASP.NET Core

译者序:其实过去这周我都在研究这方面的内容,结果周末有事没有来得及总结为文章,Scott Hanselman就捷足先登了。那么我就来翻译一下这篇文章,让更多的中文读者看到。当然Scott遇到的坑我也遇到了。 不过首先,对于不熟悉…

java反射机制的原理与简单使用

一、 原理 简单的来说,反射机制其实就是指程序在运行的时候能够获取自身的信息。如果知道一个类的名称/或者它的一个实例对象, 就能把这个类的所有方法和变量的信息(方法名,变量名,方法,修饰符,类型&#x…

架构师考试3

软考系统设计架构师经验与教训分享 2017年08月01日 17:20:29 leixiang831257 阅读数 18558 系统架构设计师考试经验和教训分享 但愿你是计算机专业的学生,考这个证,有助于提升你的综合能力,但是如果想通过考这个证,就能拿几十万…

Jsoup代码解读之三-Document的输出

转载自 Jsoup代码解读之三-Document的输出Jsoup官方说明里,一个重要的功能就是***output tidy HTML***。这里我们看看Jsoup是如何输出HTML的。 HTML相关知识 分析代码前,我们不妨先想想,"tidy HTML"到底包括哪些东西:…

计算机网络协议和通信规则,计算机网络协议基本知识

计算机网络协议网络协议为计算机网络中进行数据交换而建立的规则、标准或约定的集合。例如,网络中一个微机用户和一个大型主机的操作员进行通信,由于这两个数据终端所用字符集不同,因此操作员所输入的命令彼此不认识。为了能进行通信&#xf…

微软开源P语言,实现安全的异步事件驱动编程

微软最近开源了P语言,致力于在Linux、macOS和Windows上编写安全的异步事件驱动程序。 微软将P描述为一种领域特定语言,对异步系统的组件间通信进行建模,例如嵌入式、网络或分布式系统。P程序是通过有限状态机(finite state machin…

系统架构设计师考试4

架构师考试经验总结 2014年12月14日 11:35:52 langkailen 阅读数 7251 2011年11月中旬参加了系统架构设计师的考试,考试还算比较顺利,顺利通过了国家分数线,获得了资格证书。除去考试不说,在准备考试的这段时间里了解了一下架构设…

a卡 n卡 html5性能,a卡n卡天梯图_a卡n卡显卡性能对照表2020年5月

相信许多自己购买过显卡的用户都知道a卡和n卡,决定一款显卡的性能好坏主要是架构、流处理器、核心频率、显存带宽、显存位宽、显存容量等多种因素决定。但是从参数来看新手比较难看出一个显卡的好坏,最简单的就是看天梯图,下面我们就一起来看…

Jsoup代码解读之二-DOM相关对象

转载自 Jsoup代码解读之二-DOM相关对象之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容。这样做的好处是从XML的API里解脱出来,使得代码精炼了很多。这篇文章会说明Jsoup的DOM结构,DOM的遍历方式。在…

sql server 2012远程链接的方法及步骤

首先说下什么是sql server:(以下是应用某度某科的内容) SQL Server 是Microsoft 公司推出的关系型数据库管理系统。具有使用方便可伸缩性好与相关软件集成程度高等优点,可跨越从运行Microsoft Windows 98 的膝上型电脑到运行Microsoft Windows 2012 的大型多处理器的…

系统架构师考试5

https://download.csdn.net/download/u014484863/10041079 https://download.csdn.net/download/u014484863/10041079 下载首页 精品专辑 我的资源 上传资源赚积分 已下载 我的收藏 参与活动送会员hot 下载帮助 下载 > 考试认证 > 软考等考 > 系统架构师复习资料…

ASP.NET Core 性能对比评测(ASP.NET,Python,Java,NodeJS)

前言 性能是我们日常生活中经常接触到的一个词语,更好的性能意味着能给我们带来更好的用户体检。比如我们在购买手机、显卡、CPU等的时候,可能会更加的关注于这样指标,所以本篇就来做一个性能评测。 性能也一直是我们开发人员一直追求的一个目…

计算机三级网络技术题库第15套,第15套 上机操作题

一、基本操作题*********本题型共有5小题*********1. 将考生文件夹下的RDEV文件夹中的文件KING.MAP删除。2. 在考生文件夹下BEF文件夹中建立一个名为SEOG的新文件夹。3. 将考生文件夹下RM文件夹中的文件PALY.PRG复制到考生文件夹下BMP文件夹中。4. 将考生文件夹下TEED文件夹中的…

Jsoup代码解读之一-概述

转载自 Jsoup代码解读之一-概述今天看到一个用python写的抽取正文的东东,美滋滋的用Java实现了一番,放到了webmagic里,然后发现Jsoup里已经有了…觉得自己各种不靠谱啊!算了,静下心来学学好东西吧! Jsoup…

法在计算机课程中的应用,尝试教学法在中职《计算机应用基础》课程中的应用(原稿)...

《尝试教学法在中职《计算机应用基础》课程中的应用(原稿).doc》由会员分享,可免费在线阅读全文,更多与《尝试教学法在中职《计算机应用基础》课程中的应用(原稿)》相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜索。1、尝试练习,安排学生进行…

Visual Studio“15”进一步改善性能和易用性

随着Visual Studio“15”开发工作的继续,微软也在不断介绍着为了改善该产品执行速度和安装后体积所做的诸多努力。第5个技术预览版近日已发布,在这些方面也有了进一步提高。 在微软公司John Montgomery发布的新闻稿中,他通过一个视频对比了Ro…

JAVA缓存的实现

转载自 JAVA缓存的实现 缓存可分为二大类: 一、通过文件缓存,顾名思义文件缓存是指把数据存储在磁盘上,不管你是以XML格式,序列化文件DAT格式还是其它文件格式; 二、内存缓存,也就是实现一个类中静态Map,对这个Map进行常规的增删…

myeclipse 2016 ci3破解教程(含软件下载)

一、myeclipse简介: MyEclipse企业级工作平台(MyEclipseEnterprise Workbench ,简称MyEclipse)是对EclipseIDE的扩 展,利用它我们可以在数据库和JavaEE的开发、发布以及应用程序服务器的整合方面极大的提高工作效 率。…

系统架构师考试6

系统架构设计师考试经验 2018年01月29日 15:23:46 大宝大宝吃饱睡好 阅读数 346 原文链接 1. 考试准备流程 考试报名地址 网站比较奇葩,需要IE或者360,chrome不行 1.1 报名 网站注册【大概9月份】填写报名信息上传照片【需要注意照片大小,…