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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
采用call方式实现js继承
May 20 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
javascript 实现map集合
Apr 03 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 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
Prototype中dom对象方法汇总
2008/09/17 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python中强大的format函数实例详解
2018/12/05 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
护理工作感言
2014/01/16 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
职工运动会感言
2014/02/07 职场文书
询价采购方案
2014/06/09 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
维稳工作承诺书
2015/01/20 职场文书
学期个人自我总结
2015/02/13 职场文书
护士旷工检讨书
2015/08/15 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python