jquery 滚动效果插件

1.css


<style>

.fl {
float: left;
}
.slider0 img {
display: block;
width:100px;
padding: 2px;

}
.slider0 li {
background: url("http://www.lampbrother.net/php/statics/images/lamp/php_qiye_bg.png") no-repeat scroll 120px 5px ;
color: #000000;
font-size: 15px;
height: 150px;
margin-left: 10px;
overflow: hidden;
padding: 10px 0;
width: 100%;
}
.slider0 p {
color: #808080;
float: left;
font: 12px/25px Verdana,Tahoma,‘Microsoft Yahei‘,‘Simsun‘;
margin: 10px 0 0;
padding-left: 70px;
width: 720px;
}
.slider0 .tit {
color: #333333;
font: 15px/25px Verdana,Tahoma,‘Microsoft Yahei‘,‘Simsun‘;
}
</style>

2.html


     <div class="wp">

<ul id="slider" class="slider0" style="top: 0px;list-style-type: disc;">
<li style="opacity: 1;">
<a class="fl"><img src="<?=base_url(‘uploads‘)?>/tou1.jpg" alt="php视频教程|php教程"></a>
<p class="tit">李明珠</p>
<p>很好!</p>
</li><li style="opacity: 1;">
<a class="fl"><img src="<?=base_url(‘uploads‘)?>/tou2.jpg" alt="php视频教程|php教程"></a>
<p class="tit">李海海</p>
<p>good</p>
</li><li style="opacity: 1;">
<a class="fl"><img src="<?=base_url(‘uploads‘)?>/tou3.jpg" alt="php视频教程|php教程"></a>
<p class="tit">刘旭东</p>
<p>太棒了!</p>
</li><li style="opacity: 1;">
<a class="fl"><img src="<?=base_url(‘uploads‘)?>/tou4.jpg" alt="php视频教程|php教程"></a>
<p class="tit">陈陈</p>
<p>很强大!</p>
</li>
</ul>
</div>

3.js

<script type="text/javascript">
function H$(i) {return
document.getElementById(i)}
function H$$(c, p) {return
p.getElementsByTagName(c)}
var slider = function () {
function init
(o) {
this.id = o.id;
this.at = o.auto ? o.auto : 3;
this.o
= 0;
this.pos();
}
init.prototype = {
pos : function
() {
clearInterval(this.__b);
this.o = 0;
var el =
H$(this.id), li = H$$(‘li‘, el), l = li.length;
var _t =
li[l-1].offsetHeight;
var cl =
li[l-1].cloneNode(true);
cl.style.opacity = 0; cl.style.filter =
‘alpha(opacity=0)‘;
el.insertBefore(cl,
el.firstChild);
el.style.top = -_t +
‘px‘;
this.anim();
},
anim : function () {
var
_this = this;
this.__a = setInterval(function(){_this.animH()},
20);
},
animH : function () {
var _t =
parseInt(H$(this.id).style.top), _this = this;
if (_t >= -1)
{
clearInterval(this.__a);
H$(this.id).style.top =
0;
var list =
H$$(‘li‘,H$(this.id));
H$(this.id).removeChild(list[list.length-1]);
this.__c
= setInterval(function(){_this.animO()},
20);
//this.auto();
}else {
var __t = Math.abs(_t) -
Math.ceil(Math.abs(_t)*.07);
H$(this.id).style.top = -__t +
‘px‘;
}
},
animO : function () {
this.o +=
2;
if (this.o == 100)
{
clearInterval(this.__c);
H$$(‘li‘,H$(this.id))[0].style.opacity
= 1;
H$$(‘li‘,H$(this.id))[0].style.filter =
‘alpha(opacity=100)‘;
this.auto();
}else
{
H$$(‘li‘,H$(this.id))[0].style.opacity =
this.o/100;
H$$(‘li‘,H$(this.id))[0].style.filter =
‘alpha(opacity=‘+this.o+‘)‘;
}
},
auto : function ()
{
var _this = this;
this.__b =
setInterval(function(){_this.pos()},
this.at*1000);
}
}
return init;
}();
new
slider({id:‘slider‘})

</script>

jquery 滚动效果插件,布布扣,bubuko.com

时间: 2024-10-21 06:56:45

jquery 滚动效果插件的相关文章

fullPage教程 -- 整屏滚动效果插件 fullpage详解

1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></

分享30个最佳 jQuery Lightbox 效果插件(转载)

您可能还喜欢 60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐 分享27款非常棒的 jQuery 表单插件 Lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果.Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype

jquery 动画效果插件

从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)eas

jq无缝滚动效果插件(之前的那个升级改造加强版)

scroll滚动插件 支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置 默认配置参数可修改 $(".content").easysroll({ //默认配置参数 direction: "left", //滚动方向 left(向左)right(向右) top(向上) bottom(向下) 默认left numberr: "1", //每一次滚动数量 默认是1 delays:"1000",//完成一次动画所

10款响应式 jQuery实现图片效果插件

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于

jQuery滚动捕捉内容块

jQuery滚动捕捉内容块,jQuery,滚动效果,内容块,捕捉,jQuery滚动捕捉内容块是一款滚动后捕捉内容块的jQuery插件.本素材由52dvd素材网为您提供免费下载,更多更精致的脚本下载尽在52dvd素材网.jquery滚动代码 下载地址:http://www.huiyi8.com/gundongdaima/jquery/(转载请注明此处)

jQuery页面滚动监听事件及高级效果插件

jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scroll_demo.html 2. Scrolld(更不好用)https://github.com/charliegeiger89/Scrolld.js#readme 3. Animate Scroll(参数太少,不好用)https://github.com/ramswaroop/animatescrol

整屏滚动效果 jquery.funnPage.js插件+CSS3实现

最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: 首先使用要引入插件 <link rel="stylesheet" href="../c/jquery.fullPage.css" media="all"/> <script type="text/javascript" src="../j/l

JQuery实现文字无缝滚动效果 Marquee插件

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 官方演示,如下: Demo 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript&