轩宇网

标签搜索

搜索到 58 篇与 Javascript前端的结果

PHP+Javascript实现拖动滑块完成拼图验证码

PHP+Javascript实现拖动滑块完成拼图验证码

大家在很多网站上应该见过这样的验证方式，用户需要拖动一个小滑块并将小滑块拼接到背景图上空缺的位置才能完成验证，这种拖动验证码时基于用户行为的，比传统在移动端有更好的体验，减少用户的输入。目前市面上做的好的拖动验证、用户行为验证有极验验证码、网易易盾验证等，这些第三方验证一般需要收费，本文给大家介绍一款免费的拖动验证码，使用PHP+Javascript实现。主要技术应用1、php抠图2、js canvas画图3、破解干扰4、使用webp图片格式作者已经将代码开源，项目在github上的地址是：https://github.com/binwind8/tncode使用方法首先引入相关的js和css文件：<script type="text/javascript" src="tn_code.js"></script> <link rel="stylesheet" type="text/css" href="style.css" />然后在需要放置滑块验证...

2018年08月12日

10,923 阅读

0 评论

javascript实现列表的响应式排版(推荐)

javascript实现列表的响应式排版(推荐)

列表的响应式排版，首先每行固定好个数，然后随页面宽度调整个数和大小，保证图片的的可读性及美观。接下来小编给大家带来实现思路介绍，一起看看吧先给大家展示下效果图，如果感觉还不错，请参考实现代码。一、每行固定个数：保证排版的美观.list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }二、随页面宽度调整个数和大小：保证图文的可读性.list li{ width:20%;display:inline-block; *display:inline;*zoom:1;overflow:hidden; }1、媒体查询控制宽度@media screen and (max-width:1280px){ .list-table1 li{width:25%} } @media screen and (max-width:600px){ .list-table1 li{width:33.3%} } @media screen and (max-width:400px){ .list-table1...

2018年08月12日

5,255 阅读

0 评论

如何在H5页面上添加音乐播放

如何在H5页面上添加音乐播放

在制作网页的时候，经常会遇到一些带音乐播放的场景，作品的右上角有一个音频按钮，会播放音乐，点击切换播放和暂停。下面就讲一讲如何在h5网页上添加音乐播放。其实是很简单的，只需要简单几步就可以完成了1、加入HTML代码，因为是绑定在每一页的右上方（或者其他位置），所以定位用了fixed，在页面底部/body之前加上html代码<span id="musicControl"> <a id="mc_play" class="on" onclick="play_music();"> <audio id="musicfx" loop="loop" autoplay="autoplay"> <source src="mp3/Dreams.mp3" type="audio/mpeg"> ...

2018年08月10日

5,566 阅读

0 评论

微信小程序form表单提交到MYSQL实例详解(PHP)

微信小程序form表单提交到MYSQL实例详解(PHP)

1.小程序相对于之前的WEB+PHP建站来说，个人理解为只是将web放到了微信端，用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取，服务器端可以用任何后端语言写，但是所有的数据都要以JSON的形式返回给小程序。2.就拿个人信息提交表单来写这简单的例子。3.目录图3.1、js文件是逻辑控制，主要是它发送请求和接收数据，3.2、json 用于此页面局部配置并且覆盖全局app.json配置，3.3、wxss用于页面的样式设置，3.4、wxml就是页面，相当于html4.样式和json文件暂时不管了，回顾一下form表单的提交5.Wxml文件代码<form bindsubmit="formSubmit" bindreset="formReset"> <view class="section"> <view class="section__title">姓名</view> <input name="xingmi...

2018年08月10日

37,271 阅读

0 评论

基于HTML5的有弹幕功能的视频播放器

基于HTML5的有弹幕功能的视频播放器

Danmmu Player是一个具备弹幕功能的Html5视频播放器。我们在观看视频的时候，可以对视频发表自己的观点，当点击发送按钮后，发表的内容会在视频屏幕上以彩弹的形式发出，并做滚动展示动画效果，即视频弹幕功能。如何使用Danmmu Player需要依赖jQuery，因此首先需要加入相关css和js文件。<link rel="stylesheet" href="css/main.css"> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/jquery.danmu.js"></script> <script src="js/main.js"></script>接下来，在body中需要放置播放器的位置加入如下代码：<div id="danmup"></div>最后，关键的部分，配置...

2018年08月09日

4,960 阅读

0 评论

弹出式全屏导航菜单

弹出式全屏导航菜单

我们需要在一个有限尺寸的页面上展示多个导航菜单，可以使用下拉菜单、弹出式菜单等等。今天我要给大家演示的是可以使用CSS动画和jQuery来实现的弹出式全屏导航菜单效果。HTML在HTML结构中，我们需要一个触发菜单的按钮，如：.cd-bouncy-nav-trigger就是一个用来触发弹出式菜单的按钮。.cd-bouncy-nav-modal是一个弹出模态窗口，默认隐藏。它用来全屏展示菜单列表，当然也有关闭按钮.cd-close。<section class="cd-section"> <a class="cd-bouncy-nav-trigger" href="#0">点击查看分类</a> </section>  <div class="cd-bouncy-nav-modal"> <nav> <ul class="cd-boun...

2018年08月09日

4,870 阅读

0 评论

功能最全的仿淘宝、京东 js 三级四级多级联动地区选择插件 regionPicker PC端/手机移动端

功能最全的仿淘宝、京东 js 三级四级多级联动地区选择插件 regionPicker PC端/手机移动端

特点最大的特点是：丰富的调用参数和各种体贴入微的功能，满足各种项目的变态需求。具体如下：支持PC端和手机移动端（采用虚拟页面形式）。 PC端支持两种形式：1、仿淘宝弹层形式；2、select 下拉菜单形式。支持 1-4 级地区联动(国家/省份/城市/县区)，可自定义合理的级别范围。弹层模式时，国家/省份这两级数据可按名称首拼分组。支持动态异步数据和单纯使用静态数据两种形式。支持自定义数据结构 key，方便跟您现有地区数据无缝结合。支持同一页面实例化 N 个插件。提供全世界多级地区数据(MySQL)，但不保证数据正确性，请谨慎用于生产环境。支持自定义弹层类名，可以非常方便地定制插件样式。选择时（popup 的地区被点击时或 select 下拉框被选择时）的回调，提供了所选择的层级数据（包括：地区名称、id、是否是最后一级），方便给表单隐藏域赋值，以及验证是否已经选到要求的层级等。弹层关闭时的回调参数同上。 select下拉菜单形式可设置为选了上一级才出现下一级的形式。更多惊喜请慢慢体验...放个图点这里访问 demo:$.fn.regionP...

2018年08月09日

6,703 阅读

0 评论

jQuery鼠标移到小图显示大图效果

jQuery鼠标移到小图显示大图效果

首先需要引入jQuery1.官网jquery压缩版引用地址:　3.1.1版本:　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>3.0.0版本:　　<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>　2.1.4版本:　　<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>2.百度压缩版引用地址:　　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>3.微软压缩版引用地址:　　<script src="http://ajax.aspnetcdn.com/...

2018年08月09日

4,277 阅读

0 评论