轩宇网

标签搜索

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

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

JavaScript实现的视频弹幕效果示例

JavaScript实现的视频弹幕效果示例

这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascript基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下具体代码如下：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗鱼弹幕</title> <style> html,body{font-size:10px;overflow:hidden;margin:0;padding:0;} #box{width:100%;height:100%;} #dm{width:100%;height:90vh;background:#E8F1F5;} #dm span{...

2018年08月17日

6,343 阅读

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+ajax+php实现搜索框的功能

使用jquery+ajax+php实现搜索框的功能

首先是客户端新建一个输入框<input type="text" id="keyword" name="keyword" />在输入框的下面创建一个div，先让他隐藏起来<div id="searchBox" display: none"></div>注：搜索框的定位可以使用绝对定位，定在输入框的下面，搜索按钮可以加在输入框的旁边，同样也是使用绝对定位接下来是使用jq发送ajax请求（这里使用的是json格式的数据）<script> $(document).ready(function(){ var xhr=null; $('input[name="keyword"]').keyup(function() { if(xhr){ xhr.abort();//如果存在ajax的请求，就放弃请求 ...

2018年08月15日

5,224 阅读

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实现导航样式布局操作示例【可自定义样式布局】

这篇文章主要介绍了jQuery实现导航样式布局操作,可实现基于jQuery的用户自定义样式布局与属性动态操作相关技巧,需要的朋友可以参考下1、导航Html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 导航样式布局</title> <link rel="stylesheet" href="style.css" rel="external nofollow" > <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="nav.js"></script> <...

2018年08月15日

5,770 阅读

0 评论

jQuery实现显示/隐藏菜单

jQuery实现显示/隐藏菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery显示菜单隐藏和显示</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> &l...

2018年08月15日

5,414 阅读

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

微信小程序之获取当前位置经纬度以及地图显示详解

微信小程序之获取当前位置经纬度以及地图显示详解

最近刚开始接触微信小程序，在弄懂其结构以及相关接口之后，准备着手实现一个小程序，功能包括--获取用户当前位置的经纬度，在地图上查看位置，通过地图获取不同位置的经纬度。微信小程序的主体部分包括：新增页面需要在app.json进行配置："pages":[ "pages/index/index", "pages/location/location", "pages/logs/logs" ]通过在视图层调用bindtap与逻辑层中的方法匹配--实现页面跳转：视图层<view class="location" bindtap="locationViewTap"> <button>获取用户当前位置</button> </view>逻辑层locationViewTap: function(){ wx.navigateTo({ url: '../location/location' }) }通过在视图层调用bind...

2018年08月14日

5,454 阅读

0 评论