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 滚动效果插件的更多相关文章
- fullPage教程 -- 整屏滚动效果插件 fullpage详解
1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...
- 95+强悍的jQuery图形效果插件
现在的网站越来越离不开图形,好的图像效果能让你的网站增色不少.通过JQuery图形效果插件可以很容易的给你的网站添加一些很酷的效果. 使用JQuery插件其实比想象的要容易很多,效果也超乎想象.在本文 ...
- javascript跟随滚动效果插件代码(javascript Follow Plugin)
这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...
- jQuery Lightbox效果插件Boxer
演示:http://www.jq22.com/yanshi1139 下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy Boxer 是一款基于 jQuer ...
- jquery 动画效果插件
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jq无缝滚动效果插件(之前的那个升级改造加强版)
scroll滚动插件 支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置 默认配置参数可修改 $(".content").easysroll({ //默认配置 ...
- 分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- 12款响应式 Lightbox(灯箱)效果插件
灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...
随机推荐
- 属性动画详解一(Property Animation)
效果图: Android动画有3类: 1.View Animation (Tween Animation) 2.Drawable Animation (Frame Animation) 2.Prope ...
- 用C#将XML转换成JSON
本文旨在介绍如果通过C#将获取到的XML文档转换成对应的JSON格式字符串,然后将其输出到页面前端,以供JavaScript代码解析使用.或许你可以直接利用JavaScript代码通过Ajax的方式来 ...
- 判断scrollView的滑动方向
第一种方式: float lastContentOffset; - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { las ...
- HDU 4343 Interval query(贪心 + 倍增)
题目链接 2012多校5 Problem D 题意 给定$n$个区间,数字范围在$[0, 10^{9}]$之间,保证左端点严格大于右端点. 然后有$m$个询问,每个询问也为一个区间,数字范围在$[ ...
- iphone/iOS 访问本地数据库sqlite3
Phone也支持访问本地数据库Sqlite 3.这里简单的介绍一下iPhone上Sqlite 3的使用方法. 首先需要在项目中引用Sqlite 3的开发包,下面是在iPhone SDK 3.0下的目录 ...
- softmax函数python实现
import numpy as np def softmax(x): """ 对输入x的每一行计算softmax. 该函数对于输入是向量(将向量视为单独的行)或者矩阵(M ...
- 百度 api 测试 & python
''' 一.文字转语音api,树莓派天气闹钟爬取实时天气数据转换为语音,设置树莓派计划任务 ''' from aip import AipSpeech import requests import r ...
- 常用快递API及快递在线下单API分享
1.常用快递API 支持顺丰.EMS.申通.圆通.韵达.汇通.中通.天天.德邦.全峰等主流快递公司. 文档地址:https://www.juhe.cn/docs/api/id/43 1.1常用快递查询 ...
- apue学习笔记(第九章 进程关系)
本章将详细地说明进程组以及POSIX.1引入的会话的概念.还将介绍登录shell和所有从登录shell启动的进程之间的关系 终端登录 BSD终端登录.系统管理者创建通常名为/etc/ttys的文件,其 ...
- web前端的一些实用技能
如今我们使用的互联网,客户端与服务器端的交互无时无刻不在发生.比如我们在浏览器打开网页,浏览器就是客户端,将网页数据发过来的也就是服务器.其实服务器,并没有什么特别的,也就是一台昼夜不停运转的电脑罢了 ...