基于JQuery的类似新浪微博展示信息效果的代码


Posted in Javascript onJuly 23, 2012
<!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>Untitled Page</title> 
<link rel="Stylesheet" type="text/css" href="Result-Css/reset/reset-min.css" /> 
<style type="text/css"> 
.w_con{ width:400px; height:160px; overflow:hidden; border:1px solid #333;} 
#w_slid{ width:100%;} 
#w_slid li{ width:100%; height:40px;} 
li.a{ background:#ffc000;} 
li.b{ background:#56aaff;} 
li.c{ background:#0fffaa;} 
li.d{ background:#0ffffa;} 
li.e{ background:#ffff56;} 
</style> 
<script type="text/javascript" src="Result-JavaScriptOrJQuery/jquery/jquery-1.7.2.js"></script> 
</head> 
<body> 
<div class="w_con" id="w_con"> 
<ul id="w_slid"> 
<li class="a"></li> 
<li class="b"></li> 
<li class="c"></li> 
<li class="d"></li> 
<li class="e"></li> 
</ul> 
</div> 
<script type="text/javascript"> 
function slide() { 
var $w_slid = $('#w_con'); 
console.log($w_slid); 
var Timer; 
$w_slid.hover(function(){ 
clearInterval(Timer); 
},function(){ 
Timer = setInterval(function(){ 
slideFadeIn($w_slid); 
},3000); 
}).trigger("mouseleave"); 
} 
function slideFadeIn(obj) { 
var $self = obj.find('ul:first'); 
var $height = $self.find('li:first').height(); 
console.log($height); 
$self.animate({ 
'marginTop':+$height+'px', 
}, 1200, function () { 
$self.css({ marginTop: 0 }).find("li:first").appendTo($self); 
$self.find("li:first").hide(); 
$self.find("li:first").fadeIn("slow"); 
}); 
} 
$(function () { 
slide(); 
}); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
基于jquery自定义图片热区效果
Jul 21 #Javascript
Js四则运算函数代码
Jul 21 #Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 #Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 #Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 #Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 #Javascript
基于jquery的可多选的下拉列表框
Jul 20 #Javascript
You might like
PHPlet在Windows下的安装
2006/10/09 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python实现AES加密与解密
2019/03/28 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
留学自荐信
2013/10/10 职场文书
职高毕业生自我鉴定
2013/10/21 职场文书
学校联谊活动方案
2014/02/15 职场文书
委托书范文
2014/04/02 职场文书
工商干部先进事迹
2014/05/14 职场文书
关于读书的活动方案
2014/08/14 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
JavaScript流程控制(循环)
2021/12/06 Javascript
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL