基于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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
js常用正则表达式集锦
May 17 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
基于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循环table实现一行两列显示的方法
2015/06/04 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
详解ES6中的let命令
2020/04/05 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
python3抓取中文网页的方法
2015/07/28 Python
Python实现图片拼接的代码
2018/07/02 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Flask之请求钩子的实现
2018/12/23 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
简单了解python中的与或非运算
2019/09/18 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
C语言50道问题
2014/10/23 面试题
法律专业推荐信范文
2013/11/29 职场文书
开业庆典答谢词
2014/01/18 职场文书
作风年建设汇报材料
2014/08/14 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android