基于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 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
基于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
开发大型 PHP 项目的方法
2007/01/02 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
django框架如何集成celery进行开发
2017/05/24 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python实现数据写入excel表格
2018/03/25 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Django如何重置migration的几种情景
2021/02/24 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
高中体育教学反思
2014/01/29 职场文书
考试没考好检讨书
2014/01/31 职场文书
个人委托书格式
2014/04/04 职场文书
啤酒节策划方案
2014/05/28 职场文书
前台接待员岗位职责
2015/04/15 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python