轩宇网

标签搜索

搜索到 29 篇与 jquery 的结果

页面右侧浮动固定层返回顶部按钮带二维码展示功能

页面右侧浮动固定层返回顶部按钮带二维码展示功能

移动互联网时代的到来，大家可以通过“扫一扫”功能轻松在移动端获取需要的信息。今天我给大家分享一个WEB功能，它是一个漂浮在网页的右侧的小工具条，我们可以使用它上下快速定位页面位置，可以弹出微信二维码或者页面地址二维码，让喜欢在手机等移动设备上阅读的朋友轻松获取信息。HTML首先我们准备右侧浮动层的内容，工具条有上下箭头按钮，然后一个“反馈”链接，点击可以到网站的反馈信息页面，还有一个二维码按钮，鼠标滑上时会弹出一个二维码图片，那么我们使用.popPanel来放置二维码图片，.arrowPanel是用来做箭头方向的。在本例中，我使用了一张背景图作为工具条，当然实际应用中我们还可以根据实际需求加多个功能按钮。<div id="floatPanel"> <div class="ctrolPanel" style="right:20px;"> <a class="arrow" href="#"><span>顶部<...

2018年08月17日

6,429 阅读

0 评论

jQuery+CSS实现的标签页效果示例

jQuery+CSS实现的标签页效果示例

这篇文章主要介绍了jQuery+CSS实现的标签页效果,涉及基于jQuery的事件绑定、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下用到的CSS样式：#tabs{ width:600px; height:250px; background:white; margin:20px; } #tabs ul{ float:left; margin:20px 0 0 20px; padding:0; } #tabs li{ width:80px; height:40px; line-height:40px; display:inline-block; text-align:center; border-bottom:1px solid grey; border-top-left-radius:5px; border-top-right-radius:5px; background:#eeeeee; position:relative; top:1px; } #tabs li:hover{ color:#a...

2018年08月17日

5,503 阅读

0 评论

jQuery实现自动定时更换样式

jQuery实现自动定时更换样式

这篇文章主要介绍了jQuery实现每隔一段时间自动更换样式的方法,结合实例形式较为详细的分析了jQuery结合时间函数动态修改页面元素属性相关操作技巧,需要的朋友可以参考下js核心代码部分：$(document).ready(function(){ // 皮肤列表选项切换 $(".ulSkin li").click(function(){ $(this).addClass("active").siblings("li").removeClass("active"); }); }); // 皮肤背景切换 function skin1(){ $("#skins").removeClass("skin0 skin2 skin3 skin4").addClass("skin1"); } function skin2(){ $("#skins").removeClass("skin0 skin1 skin3 s...

2018年08月15日

6,094 阅读

0 评论

jQuery实现炫丽的3d旋转星空特效效果

jQuery实现炫丽的3d旋转星空特效效果

这篇文章主要介绍了jQuery实现炫丽的3d旋转星空效果,涉及jQuery数值运算与页面元素属性动态变换相关操作技巧,需要的朋友可以参考下效果图如下：本文实例讲述了jQuery实现炫丽的3d旋转星空效果。分享给大家供大家参考，具体如下：该特效也是在Jquery插件库中找到的，感觉效果不错，说不定以后项目中要有绚丽的星空背景，拿来即用，收藏了下。页面代码：<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQue...

2018年08月15日

5,791 阅读

0 评论

jquery实现静态搜索功能

jquery实现静态搜索功能

搜索前效果图：搜索后效果图：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery实现静态搜索功能</title>  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件...

2018年08月15日

6,157 阅读

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月15日

5,243 阅读

0 评论

PHP+jQuery+Ajax+Mysql实现发表心情功能

PHP+jQuery+Ajax+Mysql实现发表心情功能

我们在浏览网站文章或帖子后，需要表达自己浏览后的心情感受，在很多网站都提供了给用户发表心情的功能，通过这个功能可以直观统计分析文章或帖子的浏览者的心情感受数据。在本文中，您将了解到，如何实现通过点击心情图标，即刻发表自己的心情。本文通过实例讲解使用PHP+jQuery+Ajax+Mysql相结合，实现了用户发表心情的功能，操作简单，实用性强，是一篇将WEB知识进行综合应用的文章，因此读者需要具备PHP、Mysql、jQuery以及ajax相关知识。本示例的大致原理和流程是这样的：主页面index.html通过ajax获取心情图标及柱状图相关数据，当用户点击其中的一个心情图标时，向后台php发送请求，PHP验证用户cookie防止重复提交，然后将mysql中对应的数据心情字段内容加1，成功后返回前端页面，告诉index.html发表成功，并调整柱状图和统计数据。HTML先看HTML，我们在index.html中放置一个#msg，用来显示操作结果信息，#mood是操作主区域，其中ul通过javascript异步加载心情图标、说明、柱状图以及统计信息。<div id="...

2018年08月12日

5,208 阅读

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 评论

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 评论

1
2
3