以下是 jquery百度预测焦点图代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery百度预测焦点图代码</title>
<link rel="stylesheet" href="static/worldcup/home/jquery.bxslider_d1e7b3f1.css">
<link rel="stylesheet" href="static/worldcup/home/index_af8874d4.css">
</head>
<body>
<h1>
<a href="">
百度预测
</a>
</h1>
<div class="top_slide_wrap">
<ul class="slide_box bxslider">
<li>
<a href="#" target="_blank">
<img src="static/worldcup/home/01_d56c756b.jpg" alt="">
</a>
<div class="slide_info">
<div class="slide_info_card">
<a href="worldcup/" target="_blank">
<div class="slide_info_card_text">
<h2>
世界杯预测
</h2>
<p>
巴西世界杯疯狂来袭，谁会成为最终的王者？谁会扮演神秘的黑马？百度预测再现章鱼保罗的神话
</p>
<p>
<strong>
点击进入>
</strong>
</p>
</div>
</a>
<div class="slide_info_card_bg">
</div>
</div>
</div>
</li>
<li>
<a href="#" target="_blank">
<img src="static/worldcup/home/02_fea8ef37.jpg" alt="" title="城市预测">
</a>
<div class="slide_info">
<div class="slide_info_card">
<a href="trip/" target="_blank">
<div class="slide_info_card_text">
<h2>
城市预测
</h2>
<p>
哪些城市将被挤爆，哪里的人最爱旅游，城市旅游预测尽在掌握
</p>
<p>
<strong>
点击进入>
</strong>
</p>
</div>
</a>
<div class="slide_info_card_bg">
</div>
</div>
</div>
</li>
<li>
<a href="#" target="_blank">
<img src="static/worldcup/home/03_475be110.jpg" alt="">
</a>
<div class="slide_info">
<div class="slide_info_card">
<a href="tour/" target="_blank">
<div class="slide_info_card_text">
<h2>
景点预测
</h2>
<p>
提供全国5A景区未来2日人流及舒适度的预测，为您短期旅游出行参考
</p>
<p>
<strong>
点击进入>
</strong>
</p>
</div>
</a>
<div class="slide_info_card_bg">
</div>
</div>
</div>
</li>
<li>
<a href="#" target="_blank">
<img src="static/worldcup/home/04_4ce683b9.jpg" alt="">
</a>
<div class="slide_info">
<div class="slide_info_card">
<a href="exam/" target="_blank">
<div class="slide_info_card_text">
<h2>
高考预测
</h2>
<p>
全国大学和专业哪些热门？哪些好考？高考预测，您的报考决策指南
</p>
<p>
<strong>
点击进入>
</strong>
</p>
</div>
</a>
<div class="slide_info_card_bg">
</div>
</div>
</div>
</li>
<li>
<a href="#" target="_blank">
<img src="static/worldcup/home/05_340d9fb4.jpg" alt="">
</a>
<div class="slide_info">
<div class="slide_info_card">
<a href="disease/" target="_blank">
<div class="slide_info_card_text">
<h2>
疾病预测
</h2>
<p>
流感来袭，哪个城市比较安全？治疗肝炎，哪个医院最受关注？疾病预测，您的流行病防治小帮手。
</p>
<p>
<strong>
点击进入>
</strong>
</p>
</div>
</a>
<div class="slide_info_card_bg">
</div>
</div>
</div>
</li>
</ul>
<div class="op_btns clearfix">
<a href="####" class="op_btn op_prev">
<span>
</span>
</a>
<a href="####" class="op_btn op_next">
<span>
</span>
</a>
</div>
</div>
<script src="static/worldcup/home/jquery-1.11.1.min_044d0927.js"></script>
<script src="static/worldcup/home/jquery.bxslider_e88acd1b.js"></script>
<script src="static/worldcup/home/index_5d791568.js"></script>
</body>
</html>
JS代码(index_5d791568.js):
(function(){
window._bd_share_config={
common:{
bdText:"百度预测-大数据，知天下",bdDesc:"",bdUrl:"http://trends.baidu.com/",bdPic:""}
,share:[{
bdSize:16}
]}
;
with(document){
0[(getElementsByTagName("head")[0]||body).appendChild(createElement("script")).src="http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion="+~(-new Date()/3600000)]}
$(".links_share_btns").on("click",function(e){
e.preventDefault();
if($(".bdsharebuttonbox").is(":visible")==false){
$(".bdsharebuttonbox").show()}
else{
$(".bdsharebuttonbox").hide()}
}
);
$(".bxslider").bxSlider({
auto:true,prevSelector:$(".top_slide_wrap .op_prev")[0],nextSelector:$(".top_slide_wrap .op_next")[0]}
);
$(".product_slider").bxSlider({
minSlides:1,maxSlides:7,slideWidth:114,slideMargin:30,infiniteLoop:false,controls:false}
);
$(document).delegate(".pr_gray","mouseover",function(e){
e.preventDefault();
$(this).find(".gray_layer_a").css("display","block")}
);
$(document).delegate(".pr_gray","mouseleave",function(e){
e.preventDefault();
$(this).find(".gray_layer_a").css("display","none")}
)}
)();
CSS代码(index_af8874d4.css):
*{padding:0;margin:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ul,ol,li{list-style:none outside none}
body{font-family:"microsoft yahei"}
fieldset,img{border:0;vertical-align:top}
body{min-width:1024px;font-size:12px}
.clearfix:after{content:".";visibility:hidden;display:block;height:0;clear:both}
h1{width:980px;margin:38px auto 0;position:relative;z-index:2}
h1 a{display:block;width:137px;height:43px;background:url("logo_646fdc96.png");overflow:hidden;text-indent:-9999em;cursor:pointer;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="logo_646fdc96.png")}
.top_slide_wrap{width:100%;height:530px;overflow:hidden;position:relative;z-index:1;margin-top:-81px}
.slide_box{height:530px;overflow:hidden}
.slide_box li{height:530px}
.slide_box img{width:100%;height:530px}
.slide_info{width:980px;margin:-530px auto 0}
.slide_info_card{width:420px;height:0;margin-top:171px;color:#fff;position:relative}
.slide_info_card a{color:#fff;text-decoration:none}
.slide_info_card .slide_info_card_bg{width:420px;height:200px;background:#0071c6;position:absolute;top:0;left:0;z-index:1;opacity:.8;*filter:alpha(opacity=80)}
.slide_info_card .slide_info_card_text{width:340px;height:140px;padding:30px 40px;position:absolute;top:0;left:0;z-index:2}
.slide_info_card h2{font-size:40px;padding-bottom:8px}
.slide_info_card p{font-size:15px;line-height:26px}
.slide_info_card p strong{font-size:12px;height:25px;display:inline-block;padding:0 10px;background:#095b99;border-radius:5px;color:#fff;margin-top:8px}
.op_btns{width:980px;margin:-590px auto 0;position:relative;z-index:3;*margin-top:-530px}
.op_btns .op_btn{display:block;width:62px;height:62px;cursor:pointer;background:url("icons_cb372887.png") no-repeat 0 -385px;overflow:hidden;position:absolute;margin-top:240px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_page_bg_baf3ab1f.png")}
.op_btns .op_prev{left:-135px}
.op_btns .op_next{right:-135px}
.op_btns .op_prev span,.op_btns .op_next span{display:block;width:24px;height:44px;background:url("icons_cb372887.png") no-repeat;margin:8px 0 0 17px;cursor:pointer}
.op_btns .op_prev span{background-position:0 0;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_prev_ebaa3ae0.png")}
.op_btns .op_next span{background-position:-73px 0;margin-left:20px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_next_dc85affd.png")}
.op_bars{width:980px;margin:220px auto 0;position:relative;z-index:4;text-align:center}
.op_bars .op_bar{display:inline-block;width:12px;height:12px;background:url("icons_cb372887.png") no-repeat -116px -90px;margin:0 4px}
.op_bars .op_cur{background-position:0 -90px}
.product_outer_wrap{width:100%;height:430px;background:#f5f5f5}
.product_inner_wrap{width:980px;margin:0 auto}
.product_inner_wrap h2{font-size:24px;color:#6e6e6e;padding:37px 0 31px}
.product_slide_wrap{width:100%;overflow:hidden}
.product_slide_wrap ul{overflow:hidden;width:999em}
.product_slide_wrap li{float:left;width:162px;margin-right:43px;_display:inline}
.product_slide_wrap a{text-decoration:none;color:#1282e8}
.product_slide_wrap a:hover{text-decoration:underline}
.product_slide_wrap p span,.product_slide_wrap p i,.product_slide_wrap p strong{display:block}
.product_slide_wrap p span,.product_slide_wrap p i{background:url("all_product_16772e29.png") no-repeat}
.product_slide_wrap p span{width:115px;height:114px;background-position:-136px -286px;overflow:hidden;margin-bottom:25px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_info_bg_gray_815d66e1.png")}
.product_slide_wrap p strong{text-align:center;font-size:16px;color:#6e6e6e;font-weight:400}
.product_slide_wrap .pr_wordcup i,.product_slide_wrap .pr_city i,.product_slide_wrap .pr_tour i{width:65px;height:65px;margin:24px 0 0 24px;_background:0}
.product_slide_wrap .pr_wordcup i{background-position:0 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="wordcup_a0a772d1.png")}
.product_slide_wrap .pr_city i{background-position:-83px 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="city_3b30293c.png")}
.product_slide_wrap .pr_tour i{background-position:-162px 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="tour_6a0aaa0e.png")}
.product_slide_wrap .pr_exam i,.product_slide_wrap .pr_disease i,.product_slide_wrap .pr_house i,.product_slide_wrap .pr_ticket i,.product_slide_wrap .pr_job i,.product_slide_wrap .pr_finance i{width:75px;height:65px;margin:24px 0 0 20px;_background:0}
.product_slide_wrap .pr_exam i{background-position:-255px 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="exam_ff768080.png")}
.product_slide_wrap .pr_disease i{background-position:-345px -1px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="disease_4d96cf86.png")}
.product_slide_wrap .pr_house i{background-position:-430px 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="house_4354afe6.png")}
.product_slide_wrap .pr_ticket i{background-position:-514px 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ticket_b710b1bd.png")}
.product_slide_wrap .pr_job i{background-position:-585px 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="job_8ed799e7.png")}
.product_slide_wrap .pr_finance i{background-position:-735px 10px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="finance_a4254378.png")}
.outline p span{background-position:-262px -286px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./deep_gray.png")}
.product_slider .gray_layer_a{display:none;position:relative;top:-160px;background:url("gray_layer_b78fc3c1.png") no-repeat;_position:relative;_top:-160px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gray_layer_b78fc3c1.png")}
.product_slider .gray_layer_a .gray_li{width:80px;color:white;font-size:16px;font-style:normal;padding-top:10px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="")}
.product_slider .inline{background-position:0 -285px;cursor:pointer;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_info_bg_114_6182f2e0.png")}
.product_slider .inline_text{color:#1282e8}
.introduce_wrap{width:980px;margin:0 auto}
.introduce_wrap h2{font-size:24px;color:#6e6e6e;padding:37px 0 31px}
.introduce_links table{margin:0;border-collapse:collapse;border-spacing:1;width:100%}
.introduce_links table td{padding:0;background:#1282e8;border:1px solid #fff;vertical-align:top}
.table_content_wrap{padding:20px}
.table_content_wrap,.table_content_wrap a{color:#fff;text-decoration:none}
.table_content_wrap a:hover{text-decoration:underline}
.table_content_wrap h3{font-size:18px;padding:0 0 15px 13px}
.table_content_wrap li{height:22px;line-height:22px;padding-left:13px;background:url("dot_f3b28610.gif") no-repeat 0 10px;*background-position:0 9px}
.table_content_wrap ul{overflow:hidden}
.table_content_list li{float:left;width:128px;height:28px;background-position:0 12px;*background-position:0 10px}
.table_content_list a{font-size:16px}
.table_content_links{text-align:center;height:56px;overflow:hidden}
.table_content_links a:hover{text-decoration:none}
.links_join,.links_share_btns,.links_email{display:inline-block;text-align:center;font-size:14px}
.links_join span,.links_share_btns span,.links_email span{display:block;background:url("icons_cb372887.png") no-repeat;margin:0 auto}
.links_share_btns span{width:28px;height:31px;background-position:-88px -294px;margin-bottom:5px;margin-top:5px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_share_dfcc67aa.png")}
.links_join span{width:54px;height:36px;background-position:-163px -294px;margin-bottom:5px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_join_b01798a2.png")}
.links_email span{width:44px;height:32px;background-position:0 -294px;margin-top:15px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_message_dfefe368.png")}
.introduce_links{position:relative}
.introduce_links .bdsharebuttonbox{position:absolute;top:-65px;right:-50px;width:244px;height:45px;background:#1282e8;padding:10px 0 0 32px;display:none}
.introduce_links .bdsharebuttonbox a{background:url("icons_cb372887.png") no-repeat;display:inline-block;padding-left:12px}
.introduce_links .bdsharebuttonbox .bds_tieba{width:17px;height:20px;background-position:-375px -294px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_tieba_019dae87.png")}
.introduce_links .bdsharebuttonbox .bds_tsina{width:26px;height:21px;background-position:-285px -294px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_tsina_feca9788.png")}
.introduce_links .bdsharebuttonbox .bds_weixin{width:25px;height:21px;background-position:-448px -294px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_weixin_584897e4.png")}
.introduce_links .bdsharebuttonbox .bds_qzone{width:22px;height:19px;background-position:-526px -294px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_tieba_019dae87.png")}
.introduce_links .bdsharebuttonbox .bds_tqq{width:16px;height:25px;background-position:-603px -294px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_tqq_a62ab1a3.png")}
.introduce_links .bdsharebuttonbox .popup_more{width:17px;height:18px;background-position:-667px -294px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_more_b25ddd74.png")}
.introduce_links .bdsharebuttonbox i{display:inline-block;width:0;height:0;font-size:0;border-width:8px 5px 0;border-style:solid dashed dashed;border-color:#1282e8 transparent transparent;position:absolute;bottom:-8px;left:136px}
.footer{width:980px;padding:30px 0;margin:0 auto;text-align:center;font-size:12px;color:#000}
.footer a{color:#000;text-decoration:none}
.footer a:hover{text-decoration:underline}
.bx-wrapper .bx-controls{margin-top:-60px}
.bx-wrapper .bx-controls .bx-pager{clear:both;width:100%;text-align:center;position:relative}
.bx-wrapper .bx-controls .bx-pager a{background:#c2c2c2;width:12px;height:12px;display:inline-block;overflow:hidden;background:url("icons_cb372887.png") -116px -90px\9;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_page_dot_69b4fad9.png")}
.bx-wrapper .bx-controls .bx-pager a:hover,.bx-wrapper .bx-controls .bx-pager a.active{background:#0070c6;background:url("icons_cb372887.png") 0 -90px\9;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icons_page_dot_active_33714704.png")}
.product_slide_wrap .bx-wrapper .bx-controls{margin-top:26px}
.introduce_links .bdshare-button-style0-16 a:hover{opacity:1}
分享到QQ
分享到微博
微信扫一扫
