之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片。另外,这款jQuery 3D圆盘旋转焦点图插件还支持鼠标滚轮,可以让你更方便地浏览图片。

在线演示源码下载

接下来分析一下实现这款jQuery 3D焦点图的具体过程和源代码,代码主要由HTML、CSS以及jQuery组成,由于JS的参与,相对比较复杂。

HTML代码:

<ul id="carousel">
<li>
<img src="data:images/image1.jpg" alt=""/>
<div>Image description</div>
</li>
<li>
<img src="data:images/image2.jpg" alt=""/>
</li>
<li>
<img src="data:images/image3.jpg" alt=""/>
</li>
<li>
<img src="data:images/image4.jpg" alt=""/>
<div><u>Image title</u><br/><br alt=""/>Tooltips
support <i>HTML</i> text.</div>
</li>
<li>
<img src="data:images/image5.jpg" alt=""/>
</li>
<li>
<img src="data:images/image6.jpg" alt=""/>
</li>
<li>
<img src="data:images/image7.jpg" alt=""/>
<div><u>Image title</u><br/><br/><img src="data:images/image7.jpg" width="60" height="50" style="float:left; margin-right:10px; margin-bottom:10px;" alt=""/>Load
images inside the tooltip.</div>
</li>
<li>
<img src="data:images/image8.jpg" alt=""/>
</li>
<li>
<img src="data:images/image9.jpg" alt=""/>
</li>
<li>
<img src="data:images/image10.jpg" alt=""/>
<div>Image description</div>
</li>
<li>
<img src="data:images/image11.jpg" alt=""/>
</li>
<li>
<img src="data:images/image12.jpg" alt=""/>
</li>
<li>
<img src="data:images/image13.jpg" alt=""/>
<div><u>Image title</u><br/><br/>Tooltips
support <i>HTML</i> text.</div>
</li>
<li>
<img src="data:images/image14.jpg" alt=""/>
</li>
<li>
<img src="data:images/image15.jpg" alt=""/>
</li>
<li>
<img src="data:images/image16.jpg" alt=""/>
<div><u>Image title</u><br/><br/><img src="data:images/image16.jpg" width="60" height="50" style="float:left; margin-right:10px; margin-bottom:10px;" alt=""/>Load
images inside the tooltip.</div>
</li>
<li>
<img src="data:images/image17.jpg" alt=""/>
</li>
<li>
<img src="data:images/image18.jpg" alt=""/>
</li>
<li>
<img src="data:images/image19.jpg" alt=""/>
</li>
</ul>

这里我们用一个UL列表简单地将图片显示在网页上,至于如何像演示示例中图片排列成圆盘的形状,那还需要下面CSS和jQuery的支持。

CSS代码:

.carousel
{
position:relative;
margin:0px;
padding:0px;
-moz-user-select:none;
-webkit-user-select:none;
} .carousel .carousel-item
{
background-image:url(preloader.gif);
background-position:center;
background-repeat:no-repeat;
background-color:#FFF;
position:absolute;
cursor:pointer;
} .carousel .out
{
border:#DDD 2px solid;
} .carousel .over
{
border:2px solid #DDD;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color=#000000)"; } .carousel .click
{
border:2px solid #DDD;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color=#000000)";
} .carousel .select
{
border:2px solid #DDD;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color=#000000)";
} .carousel .tooltip
{
position:absolute;
z-index:9999;
background-color:#DDD;
margin-bottom:20px;
border:#EEE solid 4px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
} .carousel .tooltip p
{
color:#999;
padding:10px;
margin:0px;
} .carousel .scrollbar
{
width:340px;
position:absolute;
margin-top:100px; } .carousel .scrollbar .track
{
background-image:url(track.png);
width:300px;
height:20px;
position:absolute;
left:20px;
} .carousel .scrollbar .thumb
{
background-image:url(thumb.png);
width:70px;
height:20px;
position:absolute;
cursor:pointer;
} .carousel .scrollbar .left
{
background-image:url(left.png);
width:20px;
height:20px;
position:absolute;
cursor:pointer;
left:0px;
} .carousel .scrollbar .right
{
background-image:url(right.png);
width:20px;
height:20px;
position:absolute;
cursor:pointer;
right:0px;
}

CSS代码也非常简单,主要是利用CSS滤镜实现鼠标滑过图片和鼠标点击图片时的阴影特效,以及下方的滑动控制杆。

jQuery代码:

首先引入必要的jQuery库,如下:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

因为这款jQuery焦点图支持鼠标滚轮,所以需要引入jquery.mousewheel.js文件。

最后只要初始化JS代码即可:

jQuery(document).ready(function($){
$('#carousel').carousel({width: 870,
height: 350,
itemWidth:120,
horizontalRadius:270,
verticalRadius:85,
resize:false,
mouseScroll:false,
mouseDrag:true,
scaleRatio:0.4,
scrollbar:true,
tooltip:true,
mouseWheel:true,
mouseWheelReverse:true});
});

在线演示源码下载

jQuery 3D圆盘旋转焦点图 支持鼠标滚轮的更多相关文章

  1. 一款jQuery满屏自适应焦点图切换特效

    一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...

  2. 基于jQuery果冻式按钮焦点图切换代码

    基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  3. WPF ItemsControl 控件支持鼠标滚轮滑动

    此文章意在解决在WPF中ItemsControl类型的集合控件支持鼠标滚轮操作,并可控制滚动的速度. 第一步:给ItemsControl添加滚轮事件. this.listBox.AddHandler( ...

  4. 如何让DbGrid支持鼠标滚轮滚动

    如何让DbGrid支持鼠标滚轮滚动 在主窗体上加一个ApplicationEvents控件(控件在Additional面板中), 在它的OnMessage事件中加入下述代码,一切搞定-! proced ...

  5. VB6 如何自定义代码字体和支持鼠标滚轮

    1 点击工具-选项-编辑器格式,把代码改成需要的字体和大小.(一般微软雅黑,16号字体比较好)   2 从以下网站下载VB6增强工具,可以支持鼠标滚轮代替右侧滚动条查看代码,按F3还可以切换代码窗口和 ...

  6. 基于jQuery上下切换的焦点图—带缩略图悬浮

    分享一款基于jQuery上下切换的焦点图,这款焦点图带有缩略图悬浮,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的.这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮 ...

  7. 一款基于的jQuery仿苹果样式焦点图插件

    这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...

  8. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  9. 纯javaScript实现元素平滑滚动,改进前两个版本,支持鼠标滚轮滚动和点击元素滚动,滚动更顺畅

    windowScroll(id, number, distance, direction, obj) 参数介绍: 1.id:所要滚动的元素id; 2.number:滚动次数; 3.distance:每 ...

随机推荐

  1. val();html();.text()区别

    对于innerHTML 属性,几乎所有的元素都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML.(获取HTML当前标签的起始和结束里面的内容) 对于inner ...

  2. The type org.springframework.jms.JmsException cannot be resolved报错解决

    在调用JmsTemplate的send方法时,一直报编译时异常.如下: 异常提示是无法解析org.SpringFrawork.jms.JmsException类型.如下: The type org.s ...

  3. Java中反射和Unsafe破坏单例设计模式

    有如下单例模式设计代码: class Singleton { private String info = "HELLO SHIT"; private static Singleto ...

  4. Service生命周期以及应用

    Service概念及用途: Android中的服务,它与Activity不同,它是不能与用户交互的,不能自己启动的,运行在后台的程序,如果我们退出应用时,Service进程并没有结束,它仍然在后台运行 ...

  5. Ubuntu使用心得

    因为开发学习需要,也接触了一些Ubuntu系统,玩崩了两次系统之后,也学到了一些东西. -------------------------------------------------------- ...

  6. MySQL 报错

    SELECT COUNT(1) FROM (select tid from teacher where tname like '李%') 1248 - Every derived table must ...

  7. VMware与Hyper-V

    前段时间在Windows10上安装Hyper-V,使用docker时,提示要卸载VMware 今天重新安装VMware时,提示: 根据连接进去:https://kb.vmware.com/s/arti ...

  8. Linux kernel pwn notes(内核漏洞利用学习)

    前言 对这段时间学习的 linux 内核中的一些简单的利用技术做一个记录,如有差错,请见谅. 相关的文件 https://gitee.com/hac425/kernel_ctf 相关引用已在文中进行了 ...

  9. UltraPtr下拉刷新

    github:  https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh <in.srain.cube.views.ptr.PtrF ...

  10. android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )及屏幕适配

    1 Android手机目前常见的分辨率 1.1 手机常见分辨率: 4:3VGA     640*480 (Video Graphics Array)QVGA  320*240 (Quarter VGA ...