仿YAHOO的一个小效果 下拉效果

隐藏/显示层

= max_h){
getObject('class_cnt1').style.height = "287px"; // 工期高度为287px(因为我们只希望容器这么高)
getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)"; // 让图片标签改变背景
if(tt){window.clearInterval(tt);} // 如果高度在每2毫秒递减，则清楚改行为（如果不清楚，程序将一直自动运行高度每2毫秒递减）
}
else{ // 如果增加中的容器高度没有超过287px
getObject('class_cnt1').style.display="block"; // 让容器可见（这样我们才能够看到容器在增高的效果）
getObject('class_cnt1').style.height = h + "px"; // 容器高度不断的以50px递增
}
}

var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）
}

// 隐藏列表框
function hiddenList(){
var h = getObject('class_cnt1').offsetHeight; // 内容容器class_cnt1的初始高度（这时高度为：287px）
var anim = function(){
h -= 50; // 每次递减50像素

if(h

分类信息

1111111

111111111

1111111

111111111

1111111

111111111

1111111

111111111

1111111

111111111

1111111

111111111

111111111

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 仿YAHOO的一个小效果 下拉效果

    隐藏/显示层 = max_h){ getObject('class_cnt1').style.height = "287px"; // 工期高度为287px(因为我们只希望容器这么高) getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)"; // 让图片标签改变背景 if(tt){window.clearI

  • Android仿网易一元夺宝客户端下拉加载动画效果(一)

    Android仿网易一元夺宝客户端下拉加载动画效果(一)

    上上周写的一个demo,仿照网易一元夺宝的下拉刷新效果. 原效果是(第一部分)一个小太阳拉下来,然后松开回弹上去, (第二部分)再掉下来一个硬币进行中轴旋转. 本文实现的效果的是第一部分的,效果演示图如下: Gif图看起来比较卡顿...其实真机演示效果还是很流畅的. 下面分析实现过程: 当时因为时间有限没有写在下拉刷新的组件中,也没有封装成一个单独的组件,只是在主布局后面写了一个View然后实现相应的操作,进行封装并不难,这里就不花时间BB了,下面是布局文件: <RelativeLayout x

  • Android 使用SwipeRefreshLayout控件仿抖音做的视频下拉刷新效果

    SwipeRefreshLayout(这个控件),我先跟大家介绍一下这个控件: 一.SwipeRefreshLayout简单介绍 •先看以下官方文档,已有了很详细的描述了. 官方文档说明 •这里我再大概解释一下: •在竖直滑动时想要刷新页面可以用SwipeRefreshLayout来实现.它通过设置OnRefreshListener来监听界面的滑动从而实现刷新.也可以通过一些方法来设置SwipeRefreshLayout是否可以刷新.如:setRefreshing(true),展开刷新动画. s

  • 微信小程序下拉菜单效果的实例代码

    微信小程序下拉菜单效果的实例代码

    //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te

  • 微信小程序下拉刷新PullDownRefresh的使用方法

    微信小程序下拉刷新PullDownRefresh的使用方法

    前言 下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 onPullDownRefresh .虽然微信的官方文档有很多坑,但下拉刷新介绍的还是很全面的. 微信小程序--下拉刷新.jpg 最近开发一款微信小程序,里面有用到下拉刷新数据的功能.于是,又开始折腾了... 一.onPullDownRefresh回调 初略看了下文档,发现小程序js中有onPullDownRefresh回调,果断重写之... // http://itlao5.com onPullDownRe

  • BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)

    BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)

    接着上篇的内容,在上篇给大家介绍了Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 官方:http://twitter.github.io/typeahead.js/ 示例:http://twitter.github.io/typeahead.js/examples/(本

  • Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

    Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

    UnderScore官网:http://underscorejs.org/ 参考文档:http://www.css88.com/doc/underscore/ 页面代码: @{ ViewBag.Title = "Index"; } <script src="Scripts/bootstrap-typeahead.js"></script> <script src="Scripts/underscore-min.js"

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

  • 微信小程序下拉框功能的实例代码

    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

  • 微信小程序下拉框搜索功能的实现方法

    微信小程序下拉框搜索功能的实现方法

    最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个. 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择. 代码部分,我定义了五个参数,和一个自定义的方法, list:下拉框数组, _width:组件宽度, _height:组件高度, bind:action: 自定义方法 考虑到每个人用的时候用的对象数组结构不同我预留了两个字段,做自定义(可不写),怎么样是不是很强大. actualvalue:下拉框实际值, showvalue:下拉框显示值

随机推荐