滚动-搜索列表,幸凡学习网

文章搜索列表

文章搜索 >> 滚动

发布时间：2017/12/25 10:49:31 阅读(15297)条评论(0)条

一、概述：关于文字滚动插件太多，PC跟移动端使用来能同时兼容的并不多，基于以上原因自己还是动手写了一个单纯的文字从右向左滚动的DEMO，思路来源于上一篇《小程序文字从右往左无限滚动》。一个页面支持多个滚动。二、实现过程：1、解决思路：如果宽度滚动小于文字内容宽度，则滚动，反之停止。默认是只有一条标签，但是在实现过程中需要最好需要二条来实现，所以js会自动添加一条相同的内容。滚动的时候最好的方法不是让它滚完，而是当第一条滚动完后,同于第一条和第二条是无缝的，所以重新又从第一个内容开始滚动，切换时完全看不出来有...未完，继续阅读→
关键字：js 插件滚动

小程序文字从右往左无限滚动

发布时间：2017/12/7 16:20:21 阅读(23210)条评论(0)条

一、概述：由于小程序里面使用的都是变量控制，所以使用起来比较难掌握，今天做了一个文字从右向左滚动的实例，写法比较简单。效果如下图所示：二、实现过程：1、解决思路：一共两个text控件，当第一个text滚动完后应该是看到第二个text控件了，但是在这个时候最好的方法不是让它滚完，而是用重新又从第一个text控件开始滚动，控制起来超级简单，基本实现了跑马灯的效果，另外加了一个如果文字不足一屏，不执行跑马灯的效果，而且添加了超大的间距，解决不会显示重复内容。以下是各部分完整代码，只要复制代码添加到相应页面即可看到效果。2、...未完，继续阅读→
关键字：小程序实例滚动

jquery左右滚动的tab选项卡效果（附源代码下载）

发布时间：2016/11/12 10:36:51 阅读(11128)条评论(0)条

一、概述：以前写过一篇tab选项卡效果[前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态],现在看来这种功能是可以但是不适合太多的菜单。所以今天就为了故意补上这一篇之《jquery左右滚动的tab选项卡效果》页面底部附下载地址,当然如果你使用esayui也可以实现那种效果，但是感觉太庞大了，整个框架使用很不方便。效果图下图所未：demo 地址：http://www.86y.org/demo/tab_scroll/二、使用说明:1、调用tab窗口方法class属性必须使用 J_menuItem的样式、data-index菜单的顺序、href弹窗的url可以加参数区别但...未完，继续阅读→
关键字：tab 选项卡滚动下载

jq+html5滚动到底部自动加载数据之(保存数据)

发布时间：2016/6/8 22:53:32 阅读(8918)条评论(0)条

1、简述上一篇《jq滚动到底部自动加载数据实例》效果实现了，但是一直有个问题点击详细后返回数据又重新加载了，今天就是为了这个BUG而写的，本实例正是运用了html5的localstorage（本地存储）。当然做这个效果是为了手机效果而做的，所以PC端暂时没办法全部兼容,所以效果图也是手机端的。（文章底部附DEMO预览及下载地址）效果图如下：2、核心内容讲解(1)、本文使用的插件是：Lawnchair（Lawnchair是一个轻量级的移动应用程序数据持久化存储方案，同时也是客户端JSON文档存储方法，优点是短小，语法简洁，扩展性比较好。）Git地址是:https:/...未完，继续阅读→
关键字：jq html5 插件

js获取触屏版当前滚动条移动完之后的位置

发布时间：2016/1/28 12:22:16 阅读(9635)条评论(0)条

前不久写过一篇关于上拉加载的文章【jq滚动到底部自动加载数据实例】，使用挺流畅的，但是使用过程也是令人心酸的，加载完后点击一产品个进去后，发现返回时还是重新加载而且是置顶，也就是说前面加载的内容白加载了，针对于这个BUG我看了很多网站都存在这个问题，http://m.suning.com也会，taobao返回可以到达加载后的效果,但是数据依然是重新加载。按我解理的思路应该是他在跳转到详细页面的时候可能保存两个值：1、是滚动条的高度，2、最后加载的页数。这样一来页面返回的时候只需要调用这两个值再进行处理就可以达到效果了，但是我...未完，继续阅读→
关键字：js 移动滚动条

jq多图片展示局部放大特效

发布时间：2015/11/4 20:59:37 阅读(6987)条评论(0)条

1、开篇：本实例主要是结合了小图片左右滚动和一个图片放大的特效。想偷懒的偷去用，也可以根据需求完善成你自己想的的效果。（文章底部附源文件下载）2、效果如下图所示3、Html源代码如下：<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...未完，继续阅读→
关键字：jq 图片放大，滚动

jq滚动到底部自动加载数据实例

发布时间：2015/8/15 20:57:50 阅读(19592)条评论(3)条

一、功能描述：滚动下拉到页面底部加载数据是很多瀑布流网站的做法，本实例是固定数据，小菜总结记录之用，高手勿喷。首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的 height，jquery如下代码:$(window).scrollTop()+$(window).height()>=$(document).height();再给window绑定scroll事件来实现加载数据显示。本实例的主要是提供手机版使用所以使用了CSS3的旋转模拟图片加载效果。在实例中实现了自动判断是否已经具备滚动事件的条件，如果高度不足自动补充下一页，直接满足滚动事件能...未完，继续阅读→
关键字：jq 手机滚动加载

iScroll5移动端框架滚动类

发布时间：2015/6/11 16:16:43 阅读(6620)条评论(0)条

之所以iscroll会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header或是footer再加上一个可以内容的滚动的中间区域组成。　　position:fixed在ios和android的使用，而ios4（4以及以前）系统以及以前的安卓系统（2.3及以前）并不支持position:fixed。这个问题可以使用iScroll框架进行解决。　　之前一直都在使用iScroll4.0版本，后来查到iScroll5已经比较稳定了...未完，继续阅读→
关键字：插件 iscroll 移动端框架

jq无锚标记平滑滚动效果，易用

发布时间：2015/5/6 21:05:20 阅读(6480)条评论(0)条

今天看到有个效果需要做一个菜单项，点击后平滑滚动到指定位置，以前是用锚标记直接就可以做到了，但是平滑就要复杂点。所以今天用JQ做了一个不错的效果给大家。效果如图：核心代码：$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);改成自己实用的效果才是最重要的，源代码如下：<!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/199...未完，继续阅读→
关键字：jq 滚动平滑

手机版浏览器禁止滚动条与释放实例

发布时间：2015/5/4 16:58:29 阅读(17612)条评论(0)条

写页面事件的时候，有的时候需要用event.preventDefault取消原有的事件后进行重写，这个大家应该都知道。那么怎么在取消默认事件后再恢复呢。解绑我们自定义的事件就好了。以Jquery为例我们用$(“body”).bind(“touchmove”,function(event){event.preventDefault;//code});取消了body的拖动事件。恢复这个拖动事件只要$(“body”).unbind(“touchmove”);为此我专门做了一个HTML特效希望大家喜欢。效果图如下：源代码如下：<!DOCTYPE HTML><html&...未完，继续阅读→
关键字：html5 手机滚动条浏览器

解决如何去掉手机版HTML页面滚动条

发布时间：2015/5/2 20:14:06 阅读(48181)条评论(0)条

经过测试，默认的HTML5页面在手机浏览器测试中发现横向，纵向滚动条都有，尽管页面没有内容也是照常出现。开始不知道什么原因，原来是没有加一句手机的META代码。<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />width - viewport的宽度height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale - 允许用户缩放到的最大比例user-scalable - 用户是否可以手动缩放不知道你是否...未完，继续阅读→
关键字：触屏手机滚动条 html5

解决无限滚动的成功方案

发布时间：2014/5/22 9:07:18 阅读(7595)条评论(0)条

考虑在外面，网页设计的问题你还没有碰到提供无限滚动的至少一个站点目前的趋势，这是不大可能。他们很容易检测，因为他们就是你去，向下和向下和向下，但从未似乎到达底部，除非你是互联网的连接突然决定要崩溃。无限滚动听起来像是一个有趣的概念，但你怎么能告诉是否此类功能是正确的选择为您的站点？很好，基本上，由起草的利与弊的无限滚动和决定哪一个胜过其他。如果你是任何社会媒体网站，从 Facebook 或 Pintrest 或 Tumblr，Twitter 用户你肯定见他们的无限滚动的选择已经如何成功，虽然没有人说你必须成为一个多亿的公司有数...未完，继续阅读→
关键字：滚动技术

当前第 1 页 / 共 2 页总共20条记录
12