基本的鼠标互动:拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果:手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow) 第一部分:鼠标交互1.1 Draggables:拖拽所需文件:ui.mouse.jsui.draggable.jsui.draggable.ext.js 用法:文件载入后,可以拖拽class = "block"的...
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div。 html结构如下: <div id="container"><ul class="pic"><li><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></li><li><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></li><li><a href="javascript:;"><img src="DSC02637.jpg" alt...
HTML 代码如下: Run Run CSS 代码如下: body {}{ margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; } a {}{ font-weight: bold; color: #000000; } #box {}{ background: #6699FF; height: 100px; width: 100px; position: relative; } body {}{ margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif;}a {}{ font-weight: bold; color: ...
如下所示:<!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><title>JS实用的带停顿的逐行文本循环滚动效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">#scrollBox2{font-size:12px;width:260px;color:#646464;line-height:22px;height:66...
本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下代码: <template><div><div class="scroll" :class="{show:isActive}"><div id="toTop" @click="toTop(step)"><</div><div id="toBottom" @click="toBottom(step)">></div></div></div> </template> <script>export default{props:{step:{ //此数据是控制动画快慢的type:Number,default:50 }},data(){return {isActive:false,}},methods:{...
在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端。下面通过本文给大家分享jQuery实现弹窗下底部页面禁止滑动效果,需要的朋友参考下吧在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端。在没有特别要求的情况下,弹窗弹出后,弹窗下的底部页面依然能够滑动。为了得到更好的用户体验,需要做到触发弹窗时,弹窗底部页面禁止滑动,关闭弹窗时,弹窗底部页面恢复滑动,具体思路如下:1.触发弹窗时,获取滚动...
基本用法 就像我们前面看过的所有类一样,我们在把这个类应用到一个元素上面时,我们要做的第一件事就是初始化一个新的Fx.Slide实例。 首先,让我们为滑动元素建立一个HTML文件。 参考代码: 代码如下: 这里是要滑动显示的内容。 我们的CSS也不需要任何修饰。 参考代码: 代码如下: .slide { margin: 20px 0; padding: 10px; width: 200px; background-color: #DAF7B4; } 最后,我们来初始化一个新的Fx.Slide并给它传递我们的元...
记得在之前的一个"拖动层"的随笔中,我实现拖动,是用的一个布尔变量,判断是否可以拖动某元素。 这两天看了一些东西,发现不需要设这个布尔变量; 实现过程: 按下鼠标的时候,给文档对象(当然也可以是别的DOM对象)的移动事件绑定一个处理函数,同时也给鼠标抬起时绑定一个解除的处理函数。 代码如下: //按下鼠标并移动时(拖动),调用的函数; function startSelection(event){ …… } //解除移动时的处理函数; function cancel...
效果图如下所示: 在线地址: github.czero.cn/fancy 点击下载安卓apk安装包 源码地址: github.com/czero1995/f… 项目主架构 使用的库 vue-cli (vue+webpack脚手架)vue-router(路由跳转)vuex(状态管理)axios(数据请求)mock.js(模拟后台数据)vue-touch(手势判断)fastclick(解决移动端浏览器 300 毫秒点击延迟问题)vue-lazyload(图片懒加载)swiper(轮播)设计布局: 将页面的固定布局 position:fixed (比如Header,Footer)全部改为绝对...
本文实例讲述了jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果。分享给大家供大家参考。具体如下: 这里演示基于jquery实现的动画菜单,内含四种效果的网站菜单,第一种是不带效果的传统导航菜单,第二种是带有图形滚动背景的菜单,第三种是由右向左背景滚动的菜单,第四种则是背景色渐变的网站菜单,每一种都很精彩,喜欢Js菜单的可模仿借鉴一下。 运行效果截图如下:在线演示地址如下: http://demo.jb51.net/js/2015/...
本文实例讲述了jQuery实现的点赞随机数字显示动画效果。分享给大家供大家参考,具体如下: 运行效果截图如下:点击此处查看在线演示。 完整实例代码点击此处本站下载。 具体代码如下:jQuery实现点赞数字累加动画效果*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} html,body{background:#fff;font-size:14px;font-family:"microsoft yahei";} .tip{text-align:center;padding-top:10%;font-size:2em;}$("html,bod...
在百度地图api首页经常见到当鼠标经过像翻页和描点链接效果,基于jquery和js代码是如何实现的呢?下面小编给大家分享关键代码,一起看下吧! var timer; $("li").on("mouseover",function(){ clearTimeout(timer); timer=null; $(this).addClass("active"); $(this).siblings().removeClass("active"); var $index=$(this).index(); /*$(".wrapper").animate({top:-$index*300});*/ timer=setTimeout(function(){ $(".wrapper").an...
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考,具体如下: 这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL,Chrome,火狐,IE11)。主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上。 开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着...
关于vue的过渡效果,vue官方给的概述是这样的。Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:1、在 CSS 过渡和动画中自动应用 class2、可以配合使用第三方 CSS 动画库,如 Animate.css3、在过渡钩子函数中使用 JavaScript 直接操作 DOM4、可以配合使用第三方 JavaScript 动画库,如 Velocity.js 其中里面也给出了许多的例子,但是例子给到了“多个元素过渡”的时候,就没有案例的代码了,在这...
代码如下:<!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> <title>Untitled Page</title> <link rel="Stylesheet" type="text/css" href="Result-Css/reset/reset-min.css" /> <style type="text/css"> .w_con{ width:400px; height:160px; overflow:hidden; border:1px solid #333;} #w_slid{...