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>

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

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
javascript事件冒泡实例分析
May 13 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
js实现拖拽与碰撞检测
Sep 18 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
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
fgetcvs在linux的问题
2012/01/15 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python删除某个目录文件夹的方法
2020/05/26 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
大学毕业的自我鉴定
2013/10/08 职场文书
职专应届生求职信
2013/11/16 职场文书
初中同学聚会感言
2014/02/11 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
餐厅筹备计划书
2014/04/25 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
感谢信的格式
2015/01/21 职场文书
街道社区活动报告
2015/02/05 职场文书
经理聘任证明
2015/03/02 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
Python基础之hashlib模块详解
2021/05/06 Python