编程 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 相关文章推荐

经验几则推荐

Sep 05 Javascript

学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)

Mar 10 Javascript

Javascript中的var_dump函数实现代码

Sep 07 Javascript

JavaScript中OnLoad几种使用方法

Dec 15 Javascript

js css后面所带参数含义介绍

Aug 18 Javascript

js的toUpperCase方法用法实例

Jan 27 Javascript

JavaScript实现无穷滚动加载数据

May 06 Javascript

JS仿淘宝搜索框用户输入事件的实现

Jun 19 Javascript

JS鼠标滚动分页效果示例

Jul 05 Javascript

JavaScript反弹动画效果的实现代码

Jul 13 Javascript

JavaScript实现多个物体同时运动

Mar 12 Javascript

解决vue安装less报错Failed to compile with 1 errors的问题

Oct 22 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