100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html5圆形旋转菜单js jquery 圆形旋转图片滚动切换效果

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

时间:2018-10-14 00:42:46

相关推荐

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

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

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

效果图:

在线演示:/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和脚本包

打包下载 ///jiaoben/34107.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。