jq一些常用的交互效果
jq回到顶部:
//回到顶部
$(window).scroll(function() {
//执行处理的代码
var a = document.body.scrollTop;
if($(document).scrollTop() > 0) {
$("#top").css("display", "block")
} else {
$("#top").css("display", "none")
}
})
$("#top").click(function() {
var speed = 200; //滑动的速度
$('body,html').animate({
scrollTop: 0
}, speed);
return false;
});
滚动加类:
$(document).scroll(function() {
if ($(document).scrollTop() >= 730) {
$('.shadow_box').addClass('fixed-top')
} else {
$('.shadow_box').removeClass('fixed-top')
}
})
jq一些常用的交互效果的更多相关文章
- 多功能前台交互效果插件superSlide
平时我们常用的"焦点图/幻灯片""Tab标签切换""图片滚动""无缝滚动"等效果要加载n个插件,又害怕代码冲突又怕不兼容 ...
- ScrollMagic – 酷毙了!超炫的页面滚动交互效果
ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...
- AxureRP7.0各类交互效果汇总帖(转)
了便于大家参考,我把这段时间发布分享的所有关于AxureRP7.0的原型做了整理. 以下资源均有对应的RP源文件可以下载. 当然 ,其中有部分是需要通过完成解密游戏[攻略]才能得到下载地址或者下载密码 ...
- 类似UC天气下拉和微信下拉眼睛头部弹入淡出UI交互效果(开源项目)。
Android-PullLayout是github上的一个第三方开源项目,该项目主页是:https://github.com/BlueMor/Android-PullLayout 原作者项目意图实现 ...
- 微信网页悬浮窗交互效果的web实现
一.微信的悬浮窗交互效果 微信更新后,发现多了个悬浮窗功能.公众号阅读,网页浏览回退后默认会出现.再点击,可以回到刚才阅读的地方.于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了 ...
- 【新手指南】App原型设计:如何快速实现这6种交互效果?
做App原型设计,那么页面切换.进度条.页面滚动.图片轮播,下拉菜单,搜索框这些交互效果必不可少.如何简单快速地实现这些效果呢?以下小编根据经验为大家提供了一些简单的设计方法,以供参考. 1.页面跳转 ...
- 用wamp实现前端和php的交互效果
我们今天来用php来做一下前台与后台的交互效果,首先我们先打开这个软件. 看一下电脑右下角的小图标 当变成之后鼠标左键 打开这个之后点击第二个之后会打开一个网站 点击右面页面的数据库打开新建数据库,填 ...
- Axure教程:滑动进度条、圆形进度环的复杂交互效果实现方法
滑动条.进度条.进度环,是产品原型中比较常见的进度展示功能.今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果. 效果一.可拖动.可显示进度值.可计算多个页面均值的滑动进度 ...
- Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作
32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...
随机推荐
- ranlib
1 ranlib的缩写 random access library 2 ranlib的作用 为静态库的符号建立索引,可以加速链接,因此称用ranlib处理过的library为random access ...
- win10复制粘贴 失效
win10复制粘贴 DISM.exe /Online /Cleanup-image /Restorehealth https://social.technet.microsoft.com/Forums ...
- zTree 基本用法
[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 ...
- vue学习1
1.<div id="app">{{message}}<input v-model="message"></div>new ...
- YTU 2597: 编程题B-选拔飞行员
2597: 编程题B-选拔飞行员 时间限制: 1 Sec 内存限制: 128 MB 提交: 131 解决: 35 题目描述 2100年空军选拔高中生飞行学员基本条件要求如下,年龄范围:16-19周 ...
- 【Selenium】idea导入eclisp项目的问题
①导入:file→new→Project from exiting 选择ecliesp 然后next就可以 ②添加依赖:每个包都要加,引用其他包的类,也要添加依赖 setting选择junit4
- Masonry 比例(multipliedBy)
前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...
- 配置DTD提示的方法
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE sqlMap PUBLIC "-/ ...
- 用UNIX的cat命令用于给文本加行号 (转载)
转载:http://blog.csdn.net/vicant/article/details/2317721 有时候需要给文本加上行号,用UNIX的cat命令可以进行这项工作. cat命令的用法如下: ...
- PCB 合拼遍历(全排序+旋转90度) 基本遍历方法
分享一下PCB合拼的组合的遍历方法,在分享之前先纠正一下 PCB拼板之多款矩形排样算法实现--学习 时间复杂度计算错误 一.PCB 合拼(全排序+旋转90度)的时间复杂度是多少? 二.合拼遍历(全 ...