jquery实现炫酷的叠加层自动切换特效
下面是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>
以上就是本次分享的代码的全部了，小伙伴们拿走试试看，希望大家能够喜欢。
相关推荐
-
Jquery封装tab自动切换效果的具体实现
今天我这边网速真是太慢了,打开一个网页要等待很久,但是还是想写篇文章----tab自动切换 因为工作中经常会碰到这样的问题 所以写博客也是总结下 最重要的是能分享下 及以后碰到类似的可以参考下! 当然这是我用Jquery来封装的 页面可以调用多次 调用方式 new tabSlider(obj,count); obj指容器最外层ID,count指有多个li 当然要引用我这个js的话 一定要按照我结构来写!下面的是我的HTML一些结构如下: 复制代码 代码如下: <di
-
基于jQuery的淡入淡出可自动切换的幻灯插件
其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载 使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义; 复制代码 代码如下: <script src="http://ajax.googleapis.com/ajax/libs/jqu
-
jquery自动切换tabs选项卡的具体实现
本节内容:jquery实现自动切换选项卡. 代码: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%String path = request.getContextPath(); %><!DOCTYPE html PUBLIC "-//W3C//DTD HTM
-
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路. 其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载 点此查看DEMO 点此下载插件 使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定
-
jQuery自动切换/点击切换选项卡效果的小例子
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">&
-
jquery-easyui关闭tab自动切换到前一个tab
复制代码 代码如下: var lastTabs = new Array(); $(function() { /* * cdh 2010.0630 补充,用于 退回上次标签页 */ $('#mainTabs').tabs({ onSelect: function(tt) { //移除 tt lastTabs = $.grep(lastTabs, function(n, i) { return n != tt; }); //重新压入,保证 最新的在最上面 lastTabs.push(tt); //更
-
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
核心代码: 复制代码 代码如下: $(function(){ var timer = true; //执行向上或向下的开关 var liindex = 0; //LI的索引 var $div = $(".byc").find("div"); //每隔三秒执行一次变换LI的内容 var set1 = setInterval(function(){ ainbyc($div); liindex = 0; timer = !timer; },3000); //LI变换的方式
-
jquery实现炫酷的叠加层自动切换特效
下面是HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jquery叠加页片自动切换特效 - 柯乐义</title><base target="_blank" /> <lin
-
jQuery实现炫酷的鼠标轨迹特效
代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现炫酷的鼠标轨迹特效</title><base target="_blank" /> <script type="text/javascript"> window.onloa
-
jquery制作漂亮的弹出层提示消息特效
今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 实现的代码. html代码: 复制代码 代码如下: <div class='b'> </div> <div class='bb'> </div> <button id='go'> GO </button> <div cl
-
jquery带有索引按钮且自动轮播切换特效代码分享
本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr
-
jquery实现多屏多图焦点图切换特效的方法
本文实例讲述了jquery实现多屏多图焦点图切换特效的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
炫酷的批处理BAT走字特效源码
先上第一版的代码, 代码肯定还存在BUG,先发上来给大家测试. @echo off&setlocal enabledelayedexpansion mode con: cols=87 lines=15 title code by foxjl 2007-12-1 www.jb51.net color 1a set long=43,minus=43 set,=^ 我们,是一群执著的批处理爱好者^ 在色彩斑斓的WINDOWS下,开启CMD这扇深邃的窗口^ 曾经挑灯夜战,曾经彻夜不眠^ 我们之所以如此似
-
推荐9款炫酷的基于jquery的页面特效
1.基于jquery实现的带按钮的图片左右滚动切换 jquery带按钮的图片滚动切换代码是一款jquery制作带按钮的图片左右滚动切换特效代码 在线演示 源码下载 2.基于jQuery的图片上下左右无缝连续循环滚动 imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动. 在线演示 源码下载 3.jquery实现的fixed固定层时间轴动态效果 jquery实现的fixed固定层时间轴动态效果源码,
-
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
分享一款基于jQuery超级酷动画滑动插件.这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效.效果图如下,如果大家觉得还不错,很满意可以下载源码哦. 效果展示 源码下载 实现的代码. html代码: <div class="pogoSlider" id="js-main-slider"> <div class="pogoSlider-slide" data-transition="sl
-
jQuery实现图片与文字描述左右滑动自动切换的方法
本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
-
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示 源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box<