文档章节

jQuery版固定在页面底部的LI列表滚动公告,可关闭

完美世界
 完美世界
发布于 2014/06/05 17:14
字数 553
阅读 45
收藏 0
点赞 0
评论 0
<!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”>
<head>
<title>jQuery版固定在页面底部的LI列表滚动公告,可关闭</title>
<meta http-equiv=”content-type” content=”text/html;charset=gb2312″>
<style type=”text/css”>
html,body,div ul{margin:0;padding:0;border:0;font-size:100%;background:transparent;}
ul{list-style:none;}
a{text-decoration:none;}
body{background:#f2f2f2;font:12px 宋体,Verdana,Tahoma,Lucida Grande,Arial,sans-serif;color:#000;}
#gg{position:fixed;bottom:0;background:#000;width:100%;height:23px;line-height:23px;z-index:9999;opacity:.60;filter:alpha(opacity=60);_bottom:auto;_width:100%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
#gg a{color:#fff;font-size:13px;letter-spacing:2px;}
.close a{float:right;margin:0 10px 0 0;padding:0 10px 0 10px;}
.bulletin{float:left;height:23px;color:#fff;margin:0 0 0 20px;background:url(/images/20111224/bulletin.gif) no-repeat;min-height:23px;overflow:hidden;}
.bulletin li{height:23px;padding-left:25px;}
</style>
<!–[if IE]>
<style type=”text/css”>
/* 修正IE6振动bug */
html body{background-image:url(about:blank);background-attachment:fixed;}
</style>
<![endif]–>
<script type=”text/javascript” src=”/images/jquery1.3.2.js”></script>
<script type=”text/javascript”>
(function($){
$.fn.extend({
Scroll:function(opt,callback){
if(!opt) var opt={};
var _this=this.eq(0).find(“ul:first”);
var lineH=_this.find(“li:first”).height(),
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
speed=opt.speed?parseInt(opt.speed,10):3000,//卷动速度,数值越大,速度越慢(毫秒)
timer=opt.timer?parseInt(opt.timer,10):3000;//滚动的时间间隔(毫秒)
if(line==0) line=1;
var upHeight=0-line*lineH;
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find(“li:first”).appendTo(_this);
}
_this.css({marginTop:0});
});
}
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval(“scrollUp()”,timer);
}).mouseout();
}
})
})(jQuery);
$(document).ready(function(){
$(“.bulletin”).Scroll({line:1,speed:1000,timer:2000});//修改此数字调整滚动时间
});
</script>
</head>
<body>
<div style=”height:2000px;”>预览时若有错误,请刷新一下网页。
<p align=”center”>本特效由 <a href=”http://www.CsrCode.cn” target=”_blank”>芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</p>
</div>
<div id=”gg”>
<div class=”close”><a href=”javascript:void(0)” onclick=”$(‘#gg’).slideUp(‘slow’);” title=”关闭”>不想听你唠叨×</a></div>
<div class=”bulletin”>
<ul>
<li><a href=”/” title=”欢迎您” target=”_blank”>欢迎光临『芯晴网页特效』CsrCode.Cn</a></li>
<li><a href=”/” title=”" target=”_blank”>为中国站长提供各种建站资源、建站资讯及建站交流平台</a></li>
</ul>
</div>
</div>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
完美世界
粉丝 10
博文 151
码字总数 134011
作品 0
西城
高级程序员
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
50个jQuery代码段帮你成为更出色的JS开发者

本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快...

西门飞
2013/03/18
0
0
jQuery 图片滚动 Carousel Lite 使用说明

jquery到官方下载, Carousel Lite 下载地址:http://www.gmarwaha.com/jquery/jcarousellite/#download 页头调用 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><......

freedom2017
2013/06/09
0
0
50个必备的实用jQuery代码段

50个必备的实用jQuery代码段 今天会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数...

雾渺
2011/09/26
0
0
50个必备的实用jQuery代码段

本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快...

晨曦之光
2012/03/09
0
0
非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗
2015/11/09
0
0
jQuery 跟随浏览器窗口的回到顶部按钮

上周花了点时间改了一下 Go Top 按钮的显示效果, 显示在页面右侧, 跟随浏览器窗口滚动, 在 IE6 浏览器中使用淡入淡出的跟随显示. 可能现在已经存在很多类似的插件和工具, 但我还是想分享一下...

christina_12345
2014/03/17
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
jQuery实现页面滚动时元素智能定位

本文将以淘宝网商品详情的简易导航为例,和大家一起分享通过jQuery和CSS实现页面元素(要浮动的层)智能定位的效果。 查看演示DEMO 下载源码 实现过程 Js侦听滚动事件,当页面滚动的距离(页...

糯小米
2014/03/24
0
0
《Jquery基础教程》读书笔记

前言 JQuery是功能强大却又简洁明快的轻量级JavaScript库,在DOM操作、事件处理、Ajax特性以及动画特效等方面表现出色。 一、选择符--取得你想要的一切 JQuery最强大的方面之一就是它能简化D...

陶邦仁
2012/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JEESZ分布式框架--单点登录集成方案

JEESZ分布式框架单点登录集成方案 第一节:单点登录简介 第一步:了解单点登录 SSO主要特点是: SSO应用之间使用Web协议(如HTTPS) ,并且只有一个登录入口. SSO的体系中有下面三种角色: 1) Us...

明理萝
2分钟前
0
1
【易错】一级缓存、二级缓存介绍与常见问题(四)

一般来说,可以在5个方面进行缓存的设计: 1.最底层可以配置的是mysql自带的query cache, 2.mybatis的一级缓存,默认情况下都处于开启状态,只能使用自带的PerpetualCache,无法配置第三方缓...

大白来袭
6分钟前
0
0
rancher安装kubernetes

参考https://rancher.com/quick-start/ 环境: Ubuntu 16.04 Docker versions are 1.12.6, 1.13.1 or 17.03.2 1、docker安装https://docs.docker.com/install/linux/docker-ce/ubuntu/#insta......

杰仪
7分钟前
0
0
几维安全Javascript代码混淆(js加密)在线使用说明

几维安全Javascript代码混淆是一项在线加密服务,用户只需将JS文件打包成zip包,提交到加密平台,即可完成代码混淆、字符串加密、属性加密、调用转换等多项保护措施,提高攻击者分析Javascr...

工作的事
9分钟前
0
0
解决dokuwiki创建中文词条文件乱码问题

若直接创建中文词条,打开本地文件夹\dokuwiki\data\pages你会发现,中文字段显示的是URL乱码,需要改一下utf8格式,方法如下:(linux系统亲测有效) 打开 .dokuwiki\conf\local.php 添加一行...

Rhymo-Wu
11分钟前
0
0
设置圆角长条progressbar背景色

1、首先在Drawable下面新建一个xml文件,将这段代码复制进去 <?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-......

王先森oO
11分钟前
0
0
Java语言学习(九):异常处理

异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的。常见的三种异常类型有: 检查性异常,如打开一个不存在的文件 运行时异常,如数组越界 错误,如栈溢出 ...

海岸线的曙光
15分钟前
0
0
深入分析golang多值返回以及闭包的实现

一、前言 golang有很多新颖的特性,不知道大家的使用的时候,有没想过,这些特性是如何实现的?当然你可能会说,不了解这些特性好像也不影响自己使用golang,你说的也有道理,但是,多了解底...

万建宁
15分钟前
0
0
img与background-image之间的区别

1.img <img src="图片来源" alt="图片无法显示时显示图片说明性文字" style="设置样式属性" /> img标签虽然不是块状元素,但是可以设置宽高,占位, img设置width后height会自适应匹配,如果...

爱喝水的小熊
17分钟前
0
0
Swift - 添加提示音

func createSound() { //建立的SystemSoundID对象 var soundID:SystemSoundID = 123 //获取声音地址 let path = Bundle.main.path(forResource: "3quan......

west_zll
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部