html5圆形旋转菜单js,jquery 圆形旋转图片滚动切换效果
这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用。
PS: 经过修改已经兼容大众浏览器。
效果图:
在线演示:http://demo.jb51.net/js/ImagesRotateScroll/index.html
Step1. 创建HTML
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
html5圆形旋转菜单js,jquery 圆形旋转图片滚动切换效果相关推荐
- jquery 圆点绕圆旋转_jquery 圆形旋转图片滚动切换效果
这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用. PS: 经过修改已经兼容大众浏览器. 效果图: 在线演示:http://demo.jb51.net/js/Imag ...
- js轮播图片小圆点变化_用jQuery实现圆点图片轮播效果
在页面的指定位置实现的图片自动的左右轮流切换展示效果,当点击图片左下的标签(或中间的小圆点)切换到对应的图片.接下来通过本文给大家分享用jQuery实现圆点图片轮播效果实例代码,需要的朋友参考下 图片 ...
- Midnight.js – 实现奇妙的固定头部切换效果
Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...
- table 手机 滑动_【推荐下载】html5手机端手指滑动选项卡滚动切换效果(转)
html5 手机端手指滑动选项卡滚动切换效果 ( 转 ) 2017/09/25 41 !DOCTYPE html html lang="en" head meta charset= ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- html怎么做到滚动鼠标转换,js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)...
本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: wheel var currentShowPageIndex = 0; v ...
- jquery banner广告图片左右切换,模仿实现支付宝广告效果
原文:jquery banner广告图片左右切换,模仿实现支付宝广告效果 源代码下载地址:http://www.zuidaima.com/share/1771186023091200.htm 由最代码 ...
- 通过js实现图片左右点击图片左右切换效果
通过js实现图片左右点击图片左右切换效果 通过图片左右的点击实现图片的左右切换,其实先看一下代码吧() 这边HT ...
- html ul 圆点轮播图,用jQuery实现圆点图片轮播效果
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : --------- ...
最新文章
- Unix的标准I/O与重定向的若干概念解析
- 改变您一生的90/10原理
- Ubuntu16.04彻底删除MySQL5.7
- UIBackgroundTaskIdentifier 进入后台后结束任务再挂起APP
- 【codevs1040】【01NOIPTG】统计单词个数,字符串的划分DP
- coursera 计算概论与程序设计基础(李戈)-第一题
- yarn 常用命令(干干货!)
- Python基础教程:(小窍门)如何优化Python占用的内存
- 计算机考试感受作文,关于考试后的感想作文(精选10篇)
- windows命令行测试硬盘速度
- 安装mysql提示:由于找不到 MSVCR100.dll
- /etc/login.defs配置文件详解
- RadioGroup+Fragment+PulltorefreshScrollView+GridView+侧拉菜单+TabLayout+ViewPager
- 一位苦逼程序员的找工作经历
- 注意|莫让“爬虫”变“害虫”
- Odoo message 日志
- IE常见问题解决方案大全
- docker启动容器之后马上又自动关闭解决办法
- c语言进行数据统计分析的研究报告,统计分析报告范文
- DMap(谛听)——实战Vue百万条数据渲染表格组件开发
热门文章
- ubuntu指令模式修改IP等信息
- Codeforces Round #655 (Div. 2) D. Omkar and Circle 思维 + 奇偶贪心
- 【CF1020C】Election【贪心】
- AGC005D - ~K Perm Counting(组合数学,背包,dp)
- CF730F. Ber Patio
- 【无码专区8】三角形二维数点——计数有多少个给定点落在三角形区域内
- Ch5702-Count The Repetitions【字符串,倍增,dp】
- nssl1298-网站计划【线段树】
- 【jzoj】2018.2.7NOIP普及组——某【BC】组模拟赛
- 纪中A组模拟赛总结(2021.7.12)