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 相关文章推荐
javaScript基础语法介绍
Feb 28 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
Position属性之relative用法
Dec 14 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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对象相互引用的内存溢出实例分析
2014/08/28 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
layui实现给某一列加点击事件
2019/10/26 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python中正则表达式的使用方法
2018/02/25 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
django的ORM模型的实现原理
2019/03/04 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python实现点云投影到平面显示
2020/01/18 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
关于python中remove的一些坑小结
2021/01/04 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
跟单业务员岗位职责
2014/03/08 职场文书
投标服务承诺书
2014/05/28 职场文书
法学专业求职信
2014/07/15 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
Java使用jmeter进行压力测试
2021/07/09 Java/Android