以下是 KCIS云情报的jQ焦点图轮播滚动切换特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KCIS云情报的jQ焦点图</title>
<link rel='stylesheet' href='css/zzsc.css' type='text/css' media='all' />
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
</head>
<body style="padding-top:30px;">
<div class="kcis-content-f">
<div class="kcis-know">
<div id="kcisKnow"></div>
<div class="frame clearfix know-gallery">
<div class="frame-top"><em class="frame-top-l"></em><em class="frame-top-r"></em></div>
<div class="frame-bottom"><em class="frame-bottom-l"></em><em class="frame-bottom-r"></em></div>
<div class="frame-c">
<div class="scrolitem-yuqing">
<div class="items-yu">
<div class="tool item1">
<div class="itemcon">
<h1>谁在谈论我？谁提到我了？</h1>
<br>
<p class="f18px"><span class="fB">抓取：</span>从互联网海量的信息中获得所有和我有关，或我关注的信息</p>
<p>我们要应对舆情，第一步是要及时、准确、有效地在海量的互联网的信息中，获得和您息息相关的信息了。</p>
<br>
<p class="fB f18px">您想过没有？这一切应该是自动的</p>
<p>KCIS通过结构化的“云书”对“我是谁”进行准确解构，让电脑对互联网信息进行针对性的实时轮询采集，进行一次全网扫描仅需5分钟，第一时间发现与您相关的信息。</p>
</div>
<div class="step"></div>
</div>
<div class="tool item2">
<div class="itemcon">
<h1>主要是哪些观点？重点说什么？</h1>
<br>
<p class="f18px"><span class="fB">筛选：</span>去芜存菁，及时准确地将重点舆情及需核心关注的信息筛选推送</p>
<p>我们抓取了海量的相关信息之后，第二步是要及时、准确的筛选出与您工作相关的信息。</p>
<br>
<p class="fB f18px">您想过没有？这一切应该是智能的</p>
<p>KCIS通过关键词提取和传播覆盖人群的综合计算，从海量的信息中直接“拎”出重点。同时组建了多触点筛选机制和模型，利用人工智能触发并有效学习人脑判断，确保筛选结果更准确。</p>
</div>
<div class="step"></div>
</div>
<div class="tool item3">
<div class="itemcon">
<h1>为什么会这样？会有什么趋势？</h1>
<br>
<p class="f18px"><span class="fB">分析：</span>事件聚类，统计分析传播路径、形成原因、现状问题及趋势研判</p>
<p>我们经过加工后，这些信息就是与您息息相关的，第三步工作就是对这些信息进行分析，全面了解舆情状况。</p>
<br>
<p class="fB f18px">您想过没有？这一切应该是全面的</p>
<p>KCIS通过语义分析自动聚类，将最早信源、关键节点、传播速度、覆盖人群、信息总量等数据集成，提供传播路径分析、舆情等高线等传播学分析。 针对单条信息可以收藏、跟踪、分析和统计。</p>
</div>
<div class="step"></div>
</div>
<div class="tool item4">
<div class="itemcon">
<h1>我该怎么做？</h1>
<br>
<p class="f18px"><span class="fB">对策：</span>对于可预见的或已发生的机会/危机，做出正确的应对策略</p>
<p>我们分析出关键信息之后，第四步就是为您想好对策，做出抉择。</p>
<br>
<p class="fB f18px">您想过没有？这一切应该是水到渠成的</p>
<p>“是谁提到我了?是哪些观点?为什么会这样说?会有什么趋势?“这一系列的问题得到准确答案以后，KCIS帮您回答“我该怎么做？”自然是水到渠成了。</p>
</div>
<div class="step"></div>
</div>
</div>
</div>
<div class="itemsnav"> <a id="step1" class="active"></a> <a id="step2"></a> <a id="step3"></a> <a id="step4"></a> </div>
</div>
<div class="itemsnav-line"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//$(".scrolitem-yuqing").scrollable({size:1,loop:true,clickable:false,navi:'.itemsnav'}).navigator().autoscroll({interval:3000});
var scrollb = $('.scrolitem-yuqing').scrollable().navigator({navi:'.itemsnav'});
$('.itemsnav').hover(function(){clearInterval(kcisTimer);}, function(){kcisTimer=setInterval('goNextKcis()',8000);});
var goScroll = function(id,go){ var scroll = $(".scrolitem-yuqing").scrollable(); scroll.seekTo(go); }
$('#step1').click(function(){ goScroll('#step1',0); });
$('#step2').click(function(){ goScroll('#step2',1); });
$('#step3').click(function(){ goScroll('#step3',2); });
$('#step4').click(function(){ goScroll('#step4',3); });
});
</script>
</body>
</html>CSS代码(zzsc.css):
@charset "utf-8";body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
body{font:14px/1.5 "Microsoft Yahei","微软雅黑",Verdana,Arial,Helvetica,STHeiti,sans-serif;margin:0;padding:0;color:#333333;background:#f2f2f2;background:url(../images/kcis_bg.png);}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
img{font-size:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/* 字体属性[定义规则，小写 "f" 加属性名称] */
.fB{font-weight:bold;}
.fC{font-style:italic;font-family:Georgia,Constantia;}
/* 字体大小[定义规则，小写 "f" 加字体大小]*/
.f0px{font-size:0px;}
.f11px{font-size:11px;}
.f12px{font-size:12px;}
.f13px{font-size:13px;}
.f14px{font-size:14px;}
.f16px{font-size:16px;}
.f18px{font-size:18px;}
.lh20px{line-height:20px;}
.lh24px{line-height:24px;}
.lh26px{line-height:26px;}
.lh28px{line-height:28px;}
.con-lh1{line-height:1.7em;}
.con-lh1 p{margin-bottom:1em;}
.margin-b0b5{margin-bottom:5px;}
.margin-b1{margin-bottom:10px;}
.margin-b1d5{margin-bottom:15px;}
.margin-b2{margin-bottom:20px;}
.margin-b4{margin-bottom:40px;}
/* 浮动、清除浮动 */
.lf{float:left;}
.rf{float:right;}
.overflow-h{overflow:hidden;}
.clearfix{zoom:1;}
.clearfix:after{content:'.';display:block;visibility:hidden;clear:both;height:0;}
/*内容框：圆角*/
.frame{position:relative;}
.frame .frame-top,.frame .frame-top-l,.frame .frame-top-r,.frame .frame-bottom,.frame .frame-bottom-l,.frame .frame-bottom-r{background:url(../images/frame_main.png) 0 0 no-repeat;}
.frame .frame-c{height:100%;padding:0 2px;background:url(../images/frames_y.png) 0 0 repeat-y;}
.frame .frame-top,.frame .frame-bottom{position:absolute;width:100%;height:9px;background-repeat:repeat-x;}
.frame .frame-top{top:0;left:0;background-position:0 -25px;}
.frame .frame-bottom{bottom:0;left:0;background-position:0 -39px;}
.frame .frame-top-l,.frame .frame-bottom-l,.frame .frame-top-r,.frame .frame-bottom-r{float:left;display:block;width:9px;height:9px;overflow:hidden;}
.frame .frame-top-r,.frame .frame-bottom-r{float:right;}
.frame .frame-top-l{background-position:0 0;}
.frame .frame-top-r{background-position:-13px 0;}
.frame .frame-bottom-l{background-position:0 -13px;}
.frame .frame-bottom-r{background-position:-13px;}
.kcis-content-f{width:984px;margin:0 auto;}
.title-main{font-size:40px;margin-bottom:30px;text-shadow:#fff 0 1px 1px;}
.title-desc{text-align:center;}
/*了解舆情*/
.kcis-know{position:relative;}
#kcisKnow{position:absolute;width:100%;height:0px;left:0;top:-70px;font-size:0;}
.kcis-know h1{padding-top:35px;*padding:25px 0 10px 0;}
.kcis-know h1 .b-font{font-size:70px;line-height:40px;}
.know-gallery{height:500px;background-color:#fff;margin-bottom:35px;position:relative;}
.scrolitem-yuqing{width:100%;height:100%;position:relative;z-index:2;overflow:hidden;}
.items-yu{width:20000em;position:absolute;clear:both;z-index:3;}
.items-yu .tool{width:900px;height:380px;padding:0 40px;position:relative;float:left;}
.items-yu .tool h1{font-size:36px;color:#333;font-weight:bold;}
.items-yu .tool p{color:#666;}
.item1{background:url(../images/zhuo.png) 635px 30px no-repeat;}
.item2{background:url(../images/xuan.png) 635px 30px no-repeat;}
.item3{background:url(../images/xi.png) 30px 30px no-repeat;}
.item4{background:url(../images/ce.png) 30px 30px no-repeat;}
.item1 .itemcon{width:540px;overflow:hidden;}
.item2 .itemcon{width:578px;overflow:hidden;}
.item3 .itemcon{width:566px;overflow:hidden;float:right;}
.item4 .itemcon{width:566px;overflow:hidden;float:right;}
.item1 .step,.item2 .step,.item3 .step,.item4 .step{position:absolute;width:324px;height:155px;left:0;top:314px;background:url(../images/step.png) 0 0 no-repeat;}
.item1 .step{width:300px;left:0;background-position:-4px 0;}
.item2 .step{left:177px;background-position:-325px 0;}
.item3 .step{left:424px;background-position:-650px 0;}
.item4 .step{left:632px;background-position:-975px 0;}
.itemsnav-line{position:absolute;z-index:1;width:980px;height:2px;top:460px;background:url(../images/line_yuqing.png) center 0 no-repeat;}
.itemsnav{position:absolute;z-index:2;width:980px;height:83px;top:384px;left:0;}
#step1,#step2,#step3,#step4{position:absolute;cursor:pointer;display:block;width:85px;height:83px;background:url(../images/item_step.png) 0 0 no-repeat;}
#step1{top:0;left:60px;background-position:0 0;}
#step2{top:0;left:292px;width:115px;background-position:-115px 0;}
#step3{top:0;left:528px;width:100px;background-position:-230px 0;}
#step4{top:0;left:763px;background-position:-345px 0;}
#step1:hover{background-position:0 -83px;}
#step2:hover{background-position:-115px -83px;}
#step3:hover{background-position:-230px -83px;}
#step4:hover{background-position:-345px -83px;}
#step1.active,#step2.active,#step3.active,#step4.active{display:none;}
分享到QQ
分享到微博
微信扫一扫
