jQuery模拟新浪微博首页滚动效果的方法


Posted in Javascript onMarch 11, 2015

本文实例讲述了jQuery模拟新浪微博首页滚动效果的方法。分享给大家供大家参考。具体实现方法如下:

<!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>

<script type="text/javascript" src="js/jquery.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script language="javascript">

$(function(){

        var scrtime;

         $("#con").hover(function(){

                clearInterval(scrtime);

        },function(){

        scrtime = setInterval(function(){

                var $ul = $("#con ul");

                var liHeight = $ul.find("li:last").height();

                $ul.animate({marginTop : liHeight+40 +"px"},1000,function(){

                $ul.find("li:last").prependTo($ul)

                $ul.find("li:first").hide();

                $ul.css({marginTop:0});

                $ul.find("li:first").fadeIn(1000);

                });        

        },3000);

        }).trigger("mouseleave");

});

</script>

<style type="text/css">

<!--

*{ margin:0; padding:0;}

ul,li{ list-style-type:none;}

body{ font-size:13px; background-color:#999999;}

#con{ width:700px; height:400px; margin:10px auto; position:relative; border:1px #666 solid; background-color:#FFFFFF; 

overflow:hidden;}

#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;}

#con ul li{ width:100%;  border-bottom:1px #333333 dotted; padding:20px 0; overflow:hidden; }

#con ul li a{ float:left;  border:1px #333333 solid; padding:2px;}

#con ul li p{ margin-left:68px;line-height:1.5;  padding:10px;}

 -->

 </style>

<body>

<div id="con">

  <ul>

    <li> <a href="#"><img src="img/1.jpg" /></a>

        <p class="vright">人生若只如初见</p>

    </li>

    <li> <a href="#"><img src="img/2.jpg" /></a>

        <p class="vright">何事秋风悲画扇</p>

    </li>

    <li> <a href="#"><img src="img/3.jpg" /></a>

        <p class="vright">等闲变却故人心</p>

    </li>

    <li> <a href="#"><img src="img/4.jpg" /></a>

        <p class="vright">却道故人心易变</p>

    </li>

  </ul>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 #Javascript
jQuery实现统计输入文字个数的方法
Mar 11 #Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 #Javascript
jquery实现表格本地排序的方法
Mar 11 #Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 #Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 #Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 #Javascript
You might like
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php代码架构的八点注意事项
2016/01/25 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
python获取list下标及其值的简单方法
2016/09/12 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
基于python的Paxos算法实现
2019/07/03 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
python二元表达式用法
2019/12/04 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
如何处理简单的PHP错误
2015/10/14 面试题
EJB的基本架构
2016/09/22 面试题
《口技》教学反思
2014/02/21 职场文书
大学生应聘求职信
2014/05/26 职场文书
2014年预算员工作总结
2014/12/05 职场文书
教育实习指导教师评语
2014/12/31 职场文书
经济纠纷起诉状
2015/05/20 职场文书