`
vincent_com
  • 浏览: 43925 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类

模拟新浪微薄滚轮效果

 
阅读更多
<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
        <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相</p>
    </li>
    <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
        <p class="vright">第一最好不相见,如此便可不相恋。第二
         </p>
    </li>
    <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
        <p class="vright">第一最好不相见,教科书所说教科书所说的思想道德教育在现今社会一点也体现不出,先进的特色社会主义啊,你何时才能拯救现今社会啊的思想教科书所说的思想道德教育在现今社会一点也体现不出,先进的特色社会主义啊,你何时 </p>
    </li>
    <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
        <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可生死作相思。abc </p>
    </li>
  </ul>
</div>
</body>
</html>
分享到:
评论

相关推荐

    jquery高仿新浪微博图片显示插件

    这个插件的核心目标是模拟新浪微博的图片预览和展示效果,使用户在网页上浏览图片时能有流畅且美观的体验。通过jQuery库的高效性能,该插件实现了图片的懒加载、预览、缩放、滑动等多种功能,同时保持了良好的浏览器...

    键盘模拟鼠标滚轮滚动

    标题“键盘模拟鼠标滚轮滚动”所描述的是一款软件应用,它的主要功能是让用户通过键盘来模拟鼠标的滚轮操作,实现页面或文档的上下滚动。这种工具特别适合那些滚轮损坏或者不方便使用鼠标滚轮的用户,可以提高他们在...

    android仿iPhone滚轮效果

    在Android平台上实现类似iPhone的滚轮效果,是一种增强用户交互体验的设计手法,尤其适用于数字选择、日期选择等场景。滚轮通常被称为Picker View,它在iOS系统中是UIPickerView,而在Android中则可以通过自定义View...

    android 仿ios的滚轮效果

    在布局文件中,为`WheelView`定义合适的宽度和高度,以及适当的内边距,以便在视觉上模拟滚轮效果。可以使用垂直`LinearLayout`或者`RecyclerView`来承载各个可滚动的项目。 3. 数据绑定: 你需要创建一个数据...

    alt加右键模拟滚轮按压2.zip

    开发者需要精确地设置这些API的参数,以确保模拟的滚轮操作与真实滚轮的效果一致,包括滚动的速度和方向。 压缩包中的“alt加右键模拟滚轮按压2.exe”是这个程序的可执行文件,用户可以直接运行来体验这个功能。在...

    Android -- 时间和日期滚轮效果.zip

    滚轮效果在Android中通常用于模拟物理旋钮的滚动操作,用户可以通过上下滚动来选择日期、时间或其它选项。这种效果常见于系统设置、日历应用以及一些需要用户输入特定数值或选择的场景。在这个案例中,滚轮效果被...

    自定义鼠标滚轮的效果 4个demo

    通过在每一帧更新元素的位置,我们可以模拟出类似弹簧或摩擦力的效果,使得滚动看起来更自然。 4. **分页滚动** 对于长页面或分页内容,可能希望鼠标滚轮每次只移动一个固定的页面或部分。这个demo会介绍如何检测...

    Android仿ios滚轮效果实现

    为了模拟滚轮的滚动效果,我们需要计算当前显示在视口中的项,并调整它们的位置。 3. **文字样式和颜色自定义** 为了让用户能够自定义样式和颜色,我们可以在构造函数中接收这些参数,如字体大小、颜色、背景色等...

    BB8700模拟滚轮

    标题“BB8700模拟滚轮”涉及的是针对黑莓8700手机的一个特殊功能,即模拟滚轮的软件或应用。这个滚轮模拟器可能是为了替换或模拟原设备上物理滚轮的功能,因为可能有的用户遇到了物理滚轮损坏、老化或其他问题导致...

    滚轮效果的城市选择

    - 模拟滚轮效果时,当某一个城市被选中时,应该突出显示。可以通过更改选中项的颜色、字体样式或添加下划线等方式来实现。 8. **性能优化** - 为了保证滚动的流畅性,避免一次性绘制所有城市。可以采用视口...

    alt加鼠标右键模拟滚轮按压

    例如,一些键盘映射工具(如AutoHotkey)可以让你自定义快捷键,使得按下特定键组合就能实现滚轮滚动的效果,从而提高效率。 总的来说,“alt”键加鼠标右键模拟滚轮按压是一种实用的临时解决方案,尤其是在紧急...

    仿ios的弹出框,城市滚轮的三级联动,日期的滚轮效果

    在Android上,我们可以使用`NumberPicker`或者自定义的滚轮组件来模拟这一效果。每个滚轮对应一个日期字段(年、月、日),并且需要处理好日期的有效性和滚动边界。同时,为了提高用户体验,还可以添加自动滑动到...

    倒计时滚轮效果

    在Android开发中,创建一个具有滚轮效果的倒计时组件是一项有趣且实用的技术挑战。这个组件不仅可以用于计时,还可以实现倒计时功能,同时伴随着独特的滚轮效果,这通常能够吸引用户的注意力并增强用户体验。"倒计时...

    日历等滚轮展示效果

    标题“日历等滚轮展示效果”表明我们将探讨如何实现一个具有滚轮样式的日历选择器,以及可能包含的其他定制化效果。这个压缩包文件“android-spinnerwheel-master”很可能是一个开源项目,提供了此类滚轮效果的实现...

    android仿iphone组件picker的滚轮效果

    在这个项目中,我们关注的是"android仿iphone组件picker的滚轮效果",它提供了一个完整的、可运行的代码实现。 首先,让我们了解一下Picker的基本概念。Picker是iOS系统中的一个UI组件,它允许用户通过滚动来选择...

    C#鼠标操作 滚轮

    在提供的代码片段中,可以看到定义了一系列常量和一个名为`BDMouseWheel`的方法,用于模拟滚轮的操作。 ##### 常量定义 - `MMove`: 表示鼠标移动。 - `LeftDown`/`LeftUp`: 分别表示左键按下和释放。 - `RightDown`...

    仿iPhone时间滚轮效果

    标题中的“仿iPhone时间滚轮效果”指的是在非iOS系统或平台上实现类似iPhone时间选择器(Pick View)的滚动效果。这种控件通常用于让用户在一系列预设选项中选择一个,比如日期、时间或者特定的数值。在iOS中,苹果...

    android高仿ios滚轮效果

    在这个方法里,你可以利用Canvas进行复杂的图形绘制,模拟滚轮的外观和滚动行为。 2. **绘制圆盘**: 滚轮通常由一系列同心圆盘组成,每个圆盘代表一个选项。使用`canvas.drawCircle()`方法绘制中心对齐的圆形,并...

    带鼠标滚轮效果的jquery图片轮播

    本篇文章将详细讲解如何利用jQuery实现一个带鼠标滚轮效果的图片轮播功能。 首先,我们需要理解jQuery的基本概念。jQuery是由John Resig于2006年创建的,它的核心理念是“Write Less, Do More”。jQuery通过提供...

    安卓实现iphone滚轮效果的spinnerwheel

    2. **触摸滚动**:支持用户通过手指滑动来滚动选择项,模拟iOS的滚轮操作。 3. **自动回弹**:当用户停止滑动后,滚轮会自动平滑地滚动到最近的一个选择项,提供良好的用户体验。 4. **数据绑定**:可以方便地绑定...

Global site tag (gtag.js) - Google Analytics