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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
Json解析的方法小结
Jun 22 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
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
Thinkphp中Create方法深入探究
2014/06/16 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
php 使用array函数实现分页
2015/02/13 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
python实现外卖信息管理系统
2018/01/11 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
python样条插值的实现代码
2018/12/17 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
关于工资低的辞职信
2014/01/14 职场文书
物理学专业自荐信
2014/06/11 职场文书
求职信的正确写法
2014/07/10 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
财务整改报告范文
2014/11/05 职场文书
特岗教师个人总结
2015/02/10 职场文书
职称评定个人总结
2015/03/05 职场文书
新员工入职感想
2015/08/07 职场文书
教学反思怎么写
2016/02/24 职场文书