TypechoJoeTheme

轩宇网

搜索到 29 篇与 jquery 的结果
2018-10-26

jQuery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果

jQuery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果
有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了。代码如下,记得引入Jquyer库。(当鼠标移动到id=menu的div上的时候,显示id=list的div,然后将鼠标再次移动到id=list的div上的时候,list的div也不会隐藏)当然也可以制作成打赏效果或图片提示等<!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 runat="server"> <title></title> <script src="https://cdn.staticfile.org/jquery/1....
2018年10月26日
4,947 阅读
0 评论
2018-10-04

PHP+jQuery实现滚屏无刷新动态加载数据功能详解

PHP+jQuery实现滚屏无刷新动态加载数据功能详解
这篇文章主要介绍了PHP+jQuery实现滚屏无刷新动态加载数据功能,涉及php动态读取数据库及加载数据实现滚屏无刷新效果的具体操作技巧,需要的朋友可以参考下本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能。分享给大家供大家参考,具体如下:index.php<?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!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" xml:lang="en&q...
2018年10月04日
5,390 阅读
0 评论
2018-10-04

PHP+MySQL+jQuery+ajax实现关键字模糊查询

PHP+MySQL+jQuery+ajax实现关键字模糊查询
下面小编就为大家分享一篇PHP+MySQL+jQuery+ajax实现关键字模糊查询(示例讲解),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧对于这个功能企业上还算比较实用,推荐给大家;index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> *{margin:0;padding:0;} .text{width:200px;height:30px;line-height:30px;font-size:14px;outline:none;} ul{width:200px;height:auto;border:1px solid #999;border-top:none;} ul li{width:200px;height:30px;line-height:30px;font-size:14px;} li:hover{background:#ddd;} </style&g...
2018年10月04日
6,291 阅读
0 评论
2018-09-20

关于jquery layui弹出层的使用方法

关于jquery layui弹出层的使用方法
这篇文章主要介绍了关于jquery layui弹出层的使用方法,需要的朋友可以参考下jQuery必须大于1.83layui必须是all,否则不显示<script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script>html代码<input id="about" type="button" value="修改考勤" class="layui-btn layui-btn-normal" />主要js代码<script> $('input#about').on('click', function () { layer.confirm('是否要修改123的考勤?', { btn: ['确定', '取消', ] //按钮 }, function () { layer.ms...
2018年09月20日
5,901 阅读
0 评论
2018-09-06

ThinkPHP5框架基于ajax与后台数据交互操作简单示例

ThinkPHP5框架基于ajax与后台数据交互操作简单示例
这篇文章主要介绍了TP5(thinkPHP5)框架基于ajax与后台数据交互操作,结合实例形式分析了thinkPHP5前端基于jQuery的ajax数据提交及后台数据接收、处理相关操作技巧,需要的朋友可以参考下本文实例讲述了TP5(thinkPHP5)框架基于ajax与后台数据交互操作。分享给大家供大家参考,具体如下:Ajax最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。最近在用tp5开发企业微应用,很有收获,觉得最需要注意的是thinkphp5与前台之间数据传递和交互。经过几天的摸索,将调试通过的代码贴出,供需要的人参考。今天的分享是用TP5做一个表单的提交。前端代码<!DOCTYPE html> <html>  <head>   <meta charset="UTF-8"...
2018年09月06日
5,922 阅读
0 评论
2018-08-29

PHP+ajax实现二级联动菜单功能示例

PHP+ajax实现二级联动菜单功能示例
这篇文章主要介绍了PHP+ajax实现二级联动菜单功能,涉及php结合ajax的数据交互与页面元素动态操作相关实现技巧,需要的朋友可以参考下本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考,具体如下:如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新,它只会刷新我们需要改变值的地方,我们首先看下它的工作流程。第一步:我们会向后台发送一个请求第二步:后台接受请求后,会返回给我们一个值第三步:将值用JS呈现在页面中HTML代码<html> <head> <title>www.jb51.net 二级联动</title> <meta http-equiv="Content-Type" content="text/html;charset=utf8"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js...
2018年08月29日
4,752 阅读
0 评论
2018-08-19

仿天猫商品品牌图片墙换一批动画特效

仿天猫商品品牌图片墙换一批动画特效
这是一款使用纯js和CSS3来制作的仿天猫商品品牌图片墙换一批动画特效。该特效中,当用户点击了品牌图片墙上右下角的按钮时,所有的品牌图片会水平翻转360度,然后显示另外一批品牌图片。 使用方法se在页面中引入jquery和样式文件style.css。<script src="path/to/jquery.min.js"></script> <link href="path/to/style.css" rel="stylesheet"> HTML结构该品牌图片使用一个无序列表作为HTML结构:<ul id="iconWall"> <li> <div class="img-3d"> <div class="img-back"> <img src="img/icon1.jpg" a...
2018年08月19日
8,356 阅读
0 评论
2018-08-19

可拖拽和带二维码的登录窗口设计效果

可拖拽和带二维码的登录窗口设计效果
这是一款非常实用的登录窗口设计效果。该登录窗口通过点击按钮或超链接弹出,它可以自由的进行拖拽。在登陆框中带有二维码,可以进行扫描登录,即实用又时尚。 使用方法在页面中引入jquery和样式文件style.css。<script src="path/to/jquery.min.js"></script> <link href="path/to/style.css" rel="stylesheet"> HTML结构该登录窗口的基本HTML结构如下:<div id="gray"></div> <div class="popup" id="popup"> <div class="top_nav" id='top_nav'> <div align="center"> <span>登录账号</spa...
2018年08月19日
8,301 阅读
0 评论
2018-08-19

使用jQuery和css3制作逼真的数字时钟效果

使用jQuery和css3制作逼真的数字时钟效果
本教程将教使用jQuery和css3制作逼真的数字时钟效果。这个插件的灵感来自于 pretty dribbble shot-Timer。HTML结构:数字时钟的html结构非常简单,因为大部分代码都是动态生成的,你只需要在html上写入以下代码:<div id="clock" class="light"> <div class="display"> <div class="weekdays"></div> <div class="ampm"></div> <div class="alarm"></div> <div class="digits"></div> </div> </div>div#clock包裹住div.dis...
2018年08月19日
4,711 阅读
0 评论
2018-08-19

jQuery实现鼠标点击处心形漂浮的炫酷效果示例

jQuery实现鼠标点击处心形漂浮的炫酷效果示例
本文实例讲述了jQuery实现鼠标点击处心形漂浮的炫酷效果。分享给大家供大家参考,具体如下:鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图:3看着是不是感觉还不错,下面是完整代码:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> *{ margin: 0px; padding: 0px; } </style> <script type="text/javascript"> $(function(){ var height=$(window).width()...
2018年08月19日
9,176 阅读
0 评论