JavaScript

JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】

本文实例讲述了JavaScript实现多张图片放大镜效果。分享给大家供大家参考,具体如下: 效果如下:可以展示图片列表的放大镜效果,图片尺寸没有要求会自动调整至水平垂直居中效果 代码如下,除了图片要替换一下,其它的可直接运行查看效果,enlarge是图片要放大查看的倍数,注意:.bigBox的宽高与.tool的宽高比值要与enlarge保持一致,比如本例中这个比值是4 <!doctype h... »

值得分享的最全面Bootstrap快速人门案例

值得分享的最全面Bootstrap快速人门案例

今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要。Bootstrap采用12栅格系统,把网页的总宽度平分为12份,开发人员可以自由按份组合。 »

node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

同志们,经过不懈的努力,查了各种文档,终于鼓捣出了一个稍微像样一点的node项目,当然如果直接拿去项目里用,这个demo还太简单,毕竟一个完整的登录注册还有很多实际的内容,本案例mySQL的用户列表里,为便于理解,只设置了username 和password两个字段,正常的登录注册,肯定会有更多的字段的。但是对于初学node的人来说,比如笔者,还是学习到了不少内容,甚至,紧张的我不知如下下笔,肯定... »

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了… 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: ... »

基于casperjs和resemble.js实现一个像素对比服务详解

基于casperjs和resemble.js实现一个像素对比服务详解

前言 本次分享一个提供设计稿与前端页面进行像素对比的node服务,旨在为测试或者前端人员自己完成一个辅助性测试。相信我,在像素级别的对比下,网页对设计稿的还原程度一下子就会凸显出来。下面话不多说了,来一起看看详细的介绍吧。 效果预览 前置知识 本次用到了以下两个库作为辅助工具: casperjs:基于PhantomJS的编写。其内部提供了一个无界面浏览器,简单来说用它你可以以代码的形式来完成模拟人... »

详解微信小程序开发之下拉刷新 上拉加载

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑... »

微信小程序实现按字母排列选择城市功能

微信小程序实现按字母排列选择城市功能

实现效果预览 实现思想 利用小程序腾讯地图将所有城市查出来,并将其渲染至页面(https://lbs.qq.com/qqmap_wx_jssdk/index.html)(其中字母栏也根据获取到的数据变化) 其中涉及三个交互(点击字母时滚动到相应位置;滑动触摸字母时,需滚动到相应位置,并有当前哪个字母的提示,且有震动感;手动滑动页面时,需将当前对应的字母选中) 滑动触摸字母时,首先要得到所有字母所在... »

微信小程序左右滑动的实现代码

微信小程序左右滑动的实现代码

左滑 右滑 你不再是一个人无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题,探探能帮你解决。对于一个刚入小程序坑的妹子来说,没有大神指点不知道要在这里面的逻辑坑还要绕多久才能绕出来。 »

微信小程序教程之本地图片上传(leancloud)实例详解

微信小程序 leancloud ——本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下。 »

p5.js实现简单货车运动动画

p5.js实现简单货车运动动画

本文为大家分享了p5.js实现简单货车运动动画的具体代码,供大家参考,具体内容如下使用工具Visual Studio Code+p5.js下载地址Visual Studio Codep5.js目标在网页上画出一辆货车,通过运用循环、条件分支、函数等流程控制方法来达到动态的效果。// car.jsvar grassstep=1440;function draw() function weed()效果... »

原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面。怎么个炫酷法呢,看看下面的图片大家就知道啦。 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity、transition、box-shadow这三个属性。 1.opacity CSS3 opacity 属性 实例 设置一个div元素的透明度级别: div { opacity:0.5; ... »

微信小程序 实现拖拽事件监听实例详解

微信小程序 拖拽监听功能:         在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下。 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X... »

p5.js临摹旋转爱心

p5.js临摹旋转爱心

运用p5.js临摹旋转爱心,供大家参考,具体内容如下原图我的临摹效果不错的样子,让我们看看实现过程。最后逆时针旋转α,速度由0变为v1。第三层:先逆时针旋转α,再顺时针旋转5×180°+2α,最后逆时针旋转α。以第一个if语句为例在第一帧到第f1帧时,theta5减小,即实现逆时针绕Y轴旋转。其中,frameCount表示当前第几帧。* delta1 * PI *180/Summation实现1到... »

实现图片首尾平滑轮播(JS原生方法—节流)

实现图片首尾平滑轮播(JS原生方法—节流)

首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首尾轮播</title> <link rel="styleshe... »

微信小程序 使用picker封装省市区三级联动实例代码

 微信小程序 使用picker封装省市区三级联动实例   目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的。那么我的思路是这样的: 1、使用template模板语法进行封装,数据从页面传入 2、... »

使用p5.js临摹动态图形

使用p5.js临摹动态图形

做的图形也不够有创意,这门课程很有意思,希望后面自己可以抽出更多的时间来进行学习。 »

React Native预设占位placeholder的使用

React Native预设占位placeholder的使用

facebook首页列表是用一个接近真实布局的骨架动画来代替loading,这东西可以称之为skeleton screen或者placeholder,但是翻译过来真不知道该翻译成什么合适,这么做的好处就是在内容加载完成后可以做到流畅无缝切换真实布局,细节决定产品的质量,我觉得facebook对用户体验,交互的细节做的挺不错。rn-placeholder是rn版本的placeholder,我在次基础... »

微信开发 使用picker封装省市区三级联动模板

目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的。那么我的思路是这样的: 1、使用template模板语法进行封装,数据从页面传入 2、根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个... »

解决微信小程序中的滚动穿透问题

解决微信小程序中的滚动穿透问题

Mask-Scroll > 原码地址 * 蒙层防穿透问题 > 蒙层穿透就是,当你用fixed 布局让蒙层显示的时候, 手指滑动屏幕会出现底部内容也滑动的现象. 如图: 当蒙层出现的时候,你滚动屏幕,底部内容也一起跟着滚动。 这就是蒙层穿透, 也可以叫 ‘滚动穿透’. 当然出现这种情况, 用户体验当然是不好的了。 所以作为一个有点追求的工程师当然是不允许这种情况的... »

微信小程序实现图片预加载组件

微信小程序实现图片预加载组件

网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。的文字及一个按钮,点击按钮后文字会变成 Hello MINA! »

Bootstrap作品展示站点实战项目2

-- 作品展示站点 You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience. Bootstrappin' Home... »

详解百度百科目录导航树小插件

详解百度百科目录导航树小插件

说起来比较惭愧,在园子里混了4年,注册账号也有3年多了,一篇博客都没有写过,之前不写博客的原因是:1,觉得自己的水平弱爆了,不敢出来误人子弟,也怕大牛们笑话 2,太懒了,有时候自己搞一点小东西,搞的过程中兴趣盎然,等搞出来以后就觉得索然无味了,懒得花时间再去整理。新的一年不想再抱着这种想法继续下去了,改变就从今天开始。 先介绍一下造轮子的背景:前几天给客户设计原型,是关于一个步骤数据展示及打分的页... »

微信小程序 详解下拉加载与上拉刷新实现方法

微信小程序 详解下拉加载与上拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型             &... »

JavaScript Window窗口对象属性和使用方法

Window对象可以处理框架和框架之间的关系,通过这种关系在一个框架中处理另一个框架中的文档。 »

Bootstrap 网站实例之单页营销网站

Bootstrap 网站实例之单页营销网站

我们已经掌握了很多实用 Bootstrap 的重要技能。此次将带领大家做一个漂亮的单页高端营销网站。□ 默认的 Bootstrap 文件位于 /less/bootstrap/文件夹。 »

Page 1 of 1221123»