Welcome, Old Sport!

圆形旋转滚动效果的制作

by ilikecss ON 2011/01/06 8013

今回给大家介绍个圆形旋转的效果,基于圆形的物理特性,又圆上任意一点可以作为一个控制按钮,然后拖动它来使图片轮换。这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用。
PS: 经过修改已经兼容大众浏览器。

images-rotate-scroll

Step1. 创建HTML

<div id="rotatescroll">
    <div class="viewport">
        <ul class="overview">
            <li><img src="images/SF1.jpg" alt="Chun-Li" /></li>
            <li><img src="images/SF2.jpg" alt="VEGA" /></li>
            <li><img src="images/SF3.jpg" alt="DHAISIM" /></li>
            <li><img src="images/SF4.jpg" alt="KEN" /></li>
            <li><img src="images/SF5.jpg" alt="BALROG" /></li>
            <li><img src="images/SF6.jpg" alt="CAMMY" /></li>
            <li><img src="images/SF7.jpg" alt="GOUKI" /></li>
            <li><img src="images/SF8.jpg" alt="BLANKA" /></li>
            <li><img src="images/SF9.jpg" alt="HONDA" /></li>
            <li><img src="images/SF10.jpg" alt="FEI LONG" /></li>
            <li><img src="images/SF11.jpg" alt="GUILE" /></li>
            <li><img src="images/SF12.jpg" alt="RYU" /></li>
            <li><img src="images/SF13.jpg" alt="SAGAT" /></li>
            <li><img src="images/SF14.jpg" alt="THWAK" /></li>
            <li><img src="images/SF15.jpg" alt="ZANGIEF" /></li>
        </ul>
    </div>
    
    <div class="overlay"></div>
    <div class="thumb"></div>
</div>

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和脚本包

3条评论
  1. #1

    人人说道:

    效果很赞 之前还没有发现过有类似这样的效果
    不过可能需要做文字引导 别人才知道原来是这样功能的

  2. #2

    ply说道:

    这效果感觉好带感,好好玩 :r :smile: azz: :razz: :razz: :razz:




TOP