轩宇网

标签搜索

最新文章

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

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

这是一款非常实用的登录窗口设计效果。该登录窗口通过点击按钮或超链接弹出，它可以自由的进行拖拽。在登陆框中带有二维码，可以进行扫描登录，即实用又时尚。使用方法在页面中引入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 评论

使用JavaScript制作打字机文本效果

使用JavaScript制作打字机文本效果

我们在看电影时经常能够看到一些炫酷的打字机效果，用于显示一些地名或剧情简介。我们在网页中也能够实现类似的效果，目前网上已经有很多打字机效果的插件。那么，实现类似的打字机效果困难吗？其实要制作一个打字机效果非常简单，下面我们就以纯JavaScript来实现一个炫酷的打字机效果。在完成这个打字机效果之前，让我们先来体验一下打字机的效果：制作打字机效果上面的效果是如何工作的呢？让我们来一步步的分析。首先我们需要一个显示打字效果的容器：<div class="printer-container"> <span id="teletype" hidden></span> </div>id为teletype的<span>元素用于显示要打印的文字。开始是它带有一个hidden属性，用于阻止文字在开始时就显示出来。另外还需要一个输入框和一个按钮，让我们可以输入要打印的文字，完整的HTML结构如下：<div class="container"> <div...

2018年08月19日

7,166 阅读

0 评论

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

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

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

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

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

2018年08月17日

6,429 阅读

0 评论

PHP操作PDO、预处理以及事务

PHP操作PDO、预处理以及事务

PDO为PHP访问各类数据库定义了一个轻量级一致性的接口，无论什么数据库，都可以通过一致的方法执行查询和获取数据，而不用考虑不同数据库之间的差异，大大简化了数据库操作。使用PDO可以支持mysql、postgresql、oracle、mssql等多种数据库。本文以基础讲解常用的PHP以PDO方式操作MySQL，包括常用的CURD语句执行，以及预处理语句和事务的应用。虽然很多朋友使用开发框架封装好了数据库操作层，或者使用ORM等不直接接触SQL语句，但是在一些小项目中可能会用到原生的数据库操作，所以虽然是基础但是很有用。准备我们准备一张mysql数据表mycomments，这是一张常见的评论表。CREATE TABLE `mycomments` ( `id` int(11) NOT NULL, `post_id` int(10) NOT NULL DEFAULT '0', `content` varchar(255) NOT NULL, `user_id` int(10) NOT NULL, `created_at` datetime NOT NULL ) EN...

2018年08月17日

5,382 阅读

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

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