编程 Javascript

jquery实现炫酷的叠加层自动切换特效

Posted in Javascript onFebruary 01, 2015

下面是HTML代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>jquery叠加页片自动切换特效 - 柯乐义</title><base target="_blank" />

<link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqtexiao/34/css/funnyNewsTicker.css">

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>

<style>

body {

background: url(http://keleyi.com/keleyi/phtml/jqtexiao/34/img/bgnoise_lg.png);

margin: 0;

padding: 0;

font-family: 'Open Sans',Roboto,Arial,Verdana;

font-size: 15px;

font-weight: 400;

}

.container {

width: 900px;

height: auto;

margin: 0 auto;

margin-top: 20px;

text-align:center

}

.fnt-container-header h1 {

font-weight: 300;

font-size: 48px;

text-align: center;

}

.fnt-container-header h2 {

font-size: 30px;

text-align: center;

}

</style>

</head>

<body>

<div class="container">

<div style="width:50%; margin:0 auto; box-sizing:border-box;">

<div class="funnyNewsTicker fnt-radius fnt-shadow fnt-easing" id="funnyNewsTicker2">

<ul>

<li>

<div class="fnt-content" data-link="http://domain.com">1.下面由柯乐义同学来做报告。</div>

</li>

<li>

<div class="fnt-content" data-link="http://domain.com">2.这些页片会自动切换。</div>

</li>

<li>

<div class="fnt-content" data-link="http://domain.com">3.切换速度可以设置。</div>

</li>

<li>

<div class="fnt-content" data-link="http://domain.com">4.也可以点击向上或向下箭头控制切换。</div>

</li>

<li>

<div class="fnt-content" data-link="http://domain.com">5. 也可以点击某一页片把它切到最前端。</div>

</li>

<li>

<div class="fnt-content" data-link="http://domain.com">6.更多信息请访问<a href="http://domain.com" style="color:red">http://domain.com</a></div>

</li>

<li>

<div class="fnt-content" data-link="http://domain.com">7.下面请看歌词猜歌名（3首）。</div>

</li>

<li>

<div class="fnt-content" data-link="http://domain.com">8. 他说风雨中这点痛算什么</div>

</li>

<li>

<div class="fnt-content" data-link="http://domain.com">9.人生可比是海上的波浪</div>

</li>

<li>

<div class="fnt-content" data-link="http://domain.com">10.胆似铁打骨如金钢</div>

</li>

</ul>

</div>

</div>

<br />

<br />

<div style="width:50%; margin:0 auto; box-sizing:border-box;">

<div class="funnyNewsTicker fnt-radius fnt-shadow fnt-easing" id="funnyNewsTicker3">

</div>

</div>

</div> 

<script>

(function (e) { $.fn.funnyNewsTicker = function (e) { var t = { width: "100%", modulid: "funnyNewsTicker", autoplay: true, timer: 3e3, titlecolor: "#333", titlefontsize: "16px", itembgcolor: "#FFF", contentlinkcolor: "#099", infobgcolor: "#f2f2f2", bordercolor: "#DDD", itemheight: 130, infobarvisible: false, btnfacebook: true, btntwitter: true, btngoogleplus: true, btnlinkbutton: true, btnlinktarget: "_blank", pagecountvisible: true, buttonstyle: "black", pagenavi: true, pagenavistyle: "black", feed: false, feedcount: 100 }; var e = $.extend(t, e); return this.each(function () { function o() { function o() { $(e.modulid + ">div").css({ left: ($(e.modulid).width() - 30) / 2 }) } function u() { $(e.modulid + " ul li").eq(r[0]).addClass("fnt-top0"); $(e.modulid + " ul li").eq(r[1]).addClass("fnt-top1"); $(e.modulid + " ul li").eq(r[2]).addClass("fnt-top2"); $(e.modulid + " ul li").eq(r[3]).addClass("fnt-active"); $(e.modulid + " ul li").eq(r[4]).addClass("fnt-bottom2"); $(e.modulid + " ul li").eq(r[5]).addClass("fnt-bottom1"); $(e.modulid + " ul li").eq(r[6]).addClass("fnt-bottom0") } function a() { t--; if (t < 0) t = n; l() } function f() { t++; if (t == n + 1) t = 0; l() } function l() { $(e.modulid + " ul li").attr("class", ""); if (t == 0) { r[0] = n - 2; r[1] = n - 1; r[2] = n; r[3] = t; r[4] = t + 1; r[5] = t + 2; r[6] = t + 3 } else if (t == 1) { r[0] = n - 1; r[1] = n; r[2] = t - 1; r[3] = t; r[4] = t + 1; r[5] = t + 2; r[6] = t + 3 } else if (t == 2) { r[0] = n; r[1] = t - 2; r[2] = t - 1; r[3] = t; r[4] = t + 1; r[5] = t + 2; r[6] = t + 3 } else if (t == n) { r[0] = n - 3; r[1] = n - 2; r[2] = n - 1; r[3] = t; r[4] = 0; r[5] = 1; r[6] = 2 } else if (t == n - 1) { r[0] = n - 4; r[1] = n - 3; r[2] = n - 2; r[3] = t; r[4] = t + 1; r[5] = 0; r[6] = 1 } else if (t == n - 2) { r[0] = n - 5; r[1] = n - 4; r[2] = n - 3; r[3] = t; r[4] = t + 1; r[5] = t + 2; r[6] = 0 } else { r[0] = t - 3; r[1] = t - 2; r[2] = t - 1; r[3] = t; r[4] = t + 1; r[5] = t + 2; r[6] = t + 3 } u() } $(e.modulid + " ul li").css({ height: e.itemheight, background: e.itembgcolor, border: "solid 1px " + e.bordercolor, color: e.titlecolor, "font-size": e.titlefontsize }); $(e.modulid + " ul li").each(function (t, r) { if (e.infobarvisible) { i = '<div class="fnt-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">'; if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".fnt-content").attr("data-link") + '" data-text="' + $(this).find(".fnt-content").text() + '" class="fnt-easing2 fnt-facebook-' + e.buttonstyle + '"></a>'; if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".fnt-content").attr("data-link") + '" data-text="' + $(this).find(".fnt-content").text() + '" class="fnt-easing2 fnt-twitter-' + e.buttonstyle + '"></a>'; if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".fnt-content").attr("data-link") + '" data-text="' + $(this).find(".fnt-content").text() + '" class="fnt-easing2 fnt-google-' + e.buttonstyle + '"></a>'; if (e.pagecountvisible) i = i + "<span>" + ($(this).index() + 1) + " / " + (n + 1) + "</span>"; if (e.btnlinkbutton) i = i + '<a href="' + $(this).find(".fnt-content").attr("data-link") + '" class="fnt-easing2 fnt-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>'; i = i + "</div>" } $(this).append(i) }); $(e.modulid + " ul li .fnt-content").find("a").css({ color: e.contentlinkcolor }); $(e.modulid + " ul li").find(".fnt-info").find("a").click(function (e) { if ($(this).attr("data-type") == "facebook") { window.open("http://www.facebook.com/sharer.php?u=" + encodeURIComponent($(this).attr("data-url")) + "&t=" + encodeURIComponent($(this).attr("data-text")), "sharer", "toolbar=0,status=0,width=626,height=436"); return false } else if ($(this).attr("data-type") == "twitter") { window.open("http://twitter.com/share?text=" + $(this).attr("data-text") + "&url=" + $(this).attr("data-url"), "sharer", "toolbar=0,status=0,width=626,height=436"); return false } else if ($(this).attr("data-type") == "google") { window.open("https://plus.google.com/share?url=" + $(this).attr("data-url") + "&title=" + $(this).attr("data-text"), "sharer", "height=550,width=525,left=100,top=100,menubar=0"); return false } }); $(e.modulid + " ul li").click(function (e) { t = $(this).index(); l() }); if (e.pagenavi) { $(e.modulid).append('<div class="fnt-top-arrow" style="background:url(http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-' + e.pagenavistyle + '.png) top no-repeat;"></div><div class="fnt-bottom-arrow" style="background:url(http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-' + e.pagenavistyle + '.png) bottom no-repeat;"></div>'); $(e.modulid).css({ height: e.itemheight + 200, padding: "20px 10px", width: e.width }) } else { $(e.modulid).css({ height: e.itemheight + 160, padding: "0px 10px", width: e.width }) } o(); $(window).resize(function (e) { o() }); u(); $(e.modulid + ">div").click(function (e) { if ($(this).attr("class") == "fnt-top-arrow") a(); else f() }); if (e.autoplay) { s = setInterval(function () { f() }, e.timer); $(e.modulid).hover(function () { clearInterval(s) }, function () { s = setInterval(function () { f() }, e.timer) }) } } function u() { $.ajax({ type: "GET", url: document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + e.feedcount + "&callback=?&q=" + encodeURIComponent(e.feed), dataType: "json", async: false, success: function (i) { veri = i.responseData.feed.entries; news = ""; $(veri).each(function (e, t) { if (e == 0) news = news + '<li class="fnt-active"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == 1) news = news + '<li class="fnt-bottom2"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == 2) news = news + '<li class="fnt-bottom1"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == 3) news = news + '<li class="fnt-bottom0"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == veri.length - 1) news = news + '<li class="fnt-top2"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == veri.length - 2) news = news + '<li class="fnt-top1"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == veri.length - 3) news = news + '<li class="fnt-top0"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else news = news + '<li><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>" }); $(e.modulid + " ul").html(""); $(e.modulid + " ul").append(news); n = veri.length - 1; r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3]; o() }, error: function () { $(e.modulid + " ul").html('<li class="fnt-active"><div class="fnt-content">Error! Please try again later...</div></li>') } }) } e.modulid = "#" + $(this).attr("id"); var t = 0; var n = $(e.modulid + " ul li").length - 1; var r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3]; var i = ""; var s = e.modulid; if (e.feed != false) { $(e.modulid + " ul").html(""); $(e.modulid + " ul").append('<li class="fnt-active"><div class="fnt-content">Rss Feed Loading...</div></li>'); u() } else { o() } }) } })(jQuery)

$(document).ready(function(){

$("#funnyNewsTicker2").funnyNewsTicker({width:"80%",timer:4000,titlecolor:"#FFF",itembgcolor:"#1faf6d",infobgcolor:"#1a935c",buttonstyle:"white",bordercolor:"#1a935c"});    

$("#funnyNewsTicker3").funnyNewsTicker({width:"60%",itemheight:250,infobarvisible:false,pagenavi:false,timer:500,itembgcolor:"#af1f63",bordercolor:"#af1f63",titlecolor:"#FFF"});    

});

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>

</div>

</body>

</html>

以上就是本次分享的代码的全部了，小伙伴们拿走试试看，希望大家能够喜欢。

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用于table内容排序

Jul 21 Javascript

jquery命令汇总,方便使用jquery的朋友

Jun 26 Javascript

jquery简单的拖动效果实现原理及示例

Jul 26 Javascript

javascript数据结构与算法之检索算法

Apr 04 Javascript

JS模式之简单的订阅者和发布者模式完整实例

Jun 30 Javascript

PageSwitch插件实现100种不同图片切换效果

Jul 28 Javascript

json的使用小结

Jun 08 Javascript

JavaScript实现无刷新上传预览图片功能

Aug 02 Javascript

Vuex 使用 v-model 配合 state的方法

Nov 13 Javascript

微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)

Nov 01 Javascript

Angular如何由模板生成DOM树的方法

Dec 23 Javascript

Rust中的Struct使用示例详解

Aug 14 Javascript

JavaScript插件化开发教程（六）

Feb 01 #Javascript

JavaScript插件化开发教程（五）

Feb 01 #Javascript

对JavaScript中this指针的新理解分享

Jan 31 #Javascript

IE下支持文本框和密码框placeholder效果的JQuery插件分享

Jan 31 #Javascript

有效提高JavaScript执行效率的几点知识

Jan 31 #Javascript

JavaScript日期时间与时间戳的转换函数分享

Jan 31 #Javascript

JavaScript监听和禁用浏览器回车事件实例

Jan 31 #Javascript