10种AJAX/JavaScript特效让你的网站更吸引人

news/2024/5/10 1:36:55/文章来源:https://blog.csdn.net/ahahatest/article/details/83328212

今天的话题是如何改进自己网站的界面或提高网站的视觉体验,从而让用户记忆犹新。

  我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变 得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者。这篇文章适合那些打算提高工作效率或不愿意 从头开发脚本的人阅读。

  这里收集了10种强大 的且容易上手 的JavaScript特效来改进您的网页站界面,从而得到更多的用户体验。这10种javaScript特效回味你的网站带来意想不到的视觉盛宴,而且安装和使用都比较容易。

译者注:您还可以参考以下JavaScript/Ajax相关教程及资源:
《10个非常棒的Ajax及Javascript实例资源网站 》
《12种Javascript解决常见浏览器兼容问题的方法 》
《JavaScript编写的胸罩罩杯尺寸计算器 》 
《300+Jquery, CSS, MooTools 和 JS的导航菜单资源 》 

1.GreyBox

JavaScript-greybox

  GreyBox  允许你以模式窗口 的形式运行其它网站(类似于弹出式窗口,但又不运行新的浏览器窗口).如果你的网站上有一些其他网站的导出链接,但你又不想让你的用户离开你的网站或不想让他们打开另一个浏览器窗口的话,这真的是一个很好的解决方案。使用GreyBox 非常简单。

 

  这里是关于GreyBox的关键页面:下载页面 , 说明页面 , 实例 , 安装 ,和 高级用法 (如果你是JavaScript高手,看完这个页面中的一些技巧说明,你就能扩展它的函数库了)

2.instant.js

JavaScript-instant

  instant.js   特效会为你的照片动态添加类似偏振(Polaroid-like)的效果(将照片倾斜并添加阴影和边框)。现在我们可以使用这个照片特效模拟Photoshop的数码照片处理了。

  这个脚本技术可以用于在你的网站上有很多照片,但又不想一个个手动处理的情况。(也许你会使用批量处理,但那只是建立于单一的动作下的,如调整尺寸、裁剪等…)

3.mooTable

JavaScript-mootable

  mooTable允许你为表格中的数据进行排序(不用刷新页面),利用DOM替代数据库的请求的新式排序方法。使用简单,仅需轻微的配置即可。

  这个脚本库需要mooTools框架的支持,你可以在这里下载 。你还可以在论坛中的mootools板块 寻找一些创建mooTable的方法,会有很多mootools开发者的反馈。

4.FancyForm

JavaScript-fancyform

  FancyForm  可以取代单调乏味的表单控件如单选按钮和复选框。基本的使用仅需两步:(1)在页面中调用 JavaScript文件 (2)为你的表单控件指定类名,如复选框指定class=”checked” 或 class=”unchecked”,单选框指定class=”selected” 和 class=”unselected”。非常不显眼的javaScript .

  该脚本需要mootools 的支持(版本1.1)

5.image menu

Javascipt-image-menu

  image menu,使用phatfusion开发而成。非常漂亮的横向菜单,当你悬停在某个菜单项上时,图片就会扩展开。

  你可以使用这个技术为照片的隐藏部分使用蒙太奇效果 ,但当用户将鼠标悬停在上面是就会显示全部。

  该脚本需要mootools 的支持(版本1.1)

6.AmberJack: Site Tour Creator

JavaScript-amberjack

  这是一个轻量级的JavaScipt 库,允许你为网站添加实施快速游览。允许用户事实的在浏览每个页面的时候查看简短的描述。

  您可以利用这个技术来演示如何让用户使用这个网站,用户只需要点击下一步的按钮,就能了解需要做的每一步。

7.ImageFlow

javascript-imageflow

  灵感来源于iPod的“coverflow”,ImageFlow是一个用来展示图片集合的特效。用户可以拖动下方的滚动条来控制图片的显示。

  用户点击图片以后,会转向到现实清晰大图的网页。

8.ShadowBox.js Media viewer

shadowbox

  ShadowBox是”完全使用JavaScipt编写的跨浏览器、跨平台、代码简洁且文档完整的媒体查看应用程序”(怎么样?一口气说下来这么多优点。)

  ShadowBox区别于其它Model Box(如Lightbox 2 )的地方是,它还支持除图片以外的很多其它文件类型,如flash视频、内嵌式youtube视频、Apple.com预告片和网页(这样能让用户不用转到另一个页面就能完成登录、注册)。这是很有价值的脚本。

9.TJPzoom 3 - image magnifier

TJPzoom 可以让你将某个高清图片的局部放大显示。按下并拖动鼠标的话,可以改变放大区域的尺寸。

10.mootools Tips

  mootools Tips 是mooTools框架的一部分,它可以让你为用户提供一个高度可配置的工具提示,当用户将鼠标悬停在某个链接或图片上时,一些关于这个元素的附加的提示信息就会在屏幕上显示出来。

  一些可以调节的方法:CSS  样式(可以修改默认的黑背景白文字)、渐变速度、工具提示在屏幕上显示的风格、你希望工具提示显示多久。这个脚本需要mootools 框架的支持。

英文原文:10 JavaScript Effects to Boost Your Website’s Fanciness Factor
翻译原文:10种JavaScript特效实例让你的网站更吸引人 (暴风彬彬)

如果您对前端开发技术很感兴趣,欢迎来我的博客一同交流:
原载:彬Go ——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_894796.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站分析的意义

一位做电子商务网站的前排朋友提出,他也常常看数据,但是数据只是数据,有没有什么方法能够从数据中发现点儿什么,以进一步能够帮助到他的生意。他进一步问,网站分析有没有一些模型和方法是可以直接使用的? …

网站分析报告实例——周末不是学习的好时机?

网站的分析报告并没有固定的格式,但有固定的逻辑。本文希望通过一个具体的小案例,来说明一个网站分析报告应该有什么样的逻辑。这里要声明的是,本文的内容是网站分析的分析部分(Analytics)的报告,而不是网站分析 的测试部分(Test)…

常用正则:手机号码、中文名字、邮箱、身份证号码、网站URL

常用正则 1手机号码 1.1精确匹配(11位) /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/1.2模糊匹配(11位) /^1[3456789]\d{9}$/1.3 座机号码 /^(0\d{2,3})-?(\d{7,8})$/2.中文名字 2-4个中文字符 /^[\u4e00-\…

10 个学习iOS开发的最佳网站

1) Apple Learning Objective C Objective-C,通常写作ObjC和较少用的Objective C或Obj-C,是扩充C的面向对象编程语言。它主要使用于Mac OS X和GNUstep这两个使用OpenStep标准的系统,而在NeXTSTEP和OpenStep中它更是基本语言。Objective-C可以…

最新版谷歌浏览器每次都要设置允许网站使用flash的解决方法

谷歌浏览器69之后的版本,因为flash存在安全隐患问题,对flash做了严格限制,所以每次打开都会提示是否允许使用flash,需要手动设置,关闭浏览器之后又会恢复之前设置,下次再打开的时候,依然会提示这…

程序员实用工具网站

此文为转载文章,原文链接:程序员实用工具网站 另有非常有用的几个网站,参考非常实用的九个程序员工具网站 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站…

SharePoint 2010/2013/2016内容数据库与网站集的关系

总得来说,内容数据库和网站集的关系是: 一个内容数据库里可以有多个网站集,但是一个网站集只能存在于一个内容数据库。 那么问题来了 问题1:我能否在创建网站集时指定内容数据库呢?或者说我能在指定的内容数据库…

SharePoint 2013 设置网站集为”只读”

有时候当我们升级或者部署项目时,不希望用户在此期间操作SharePoint,比如上传文档。 SharePoint提供了这样的功能:管理中心------应用程序管理------管理配额和锁定 完成后,再次打开http://sp2013,页面会有如下提示&#xff1a…

优化网站性能 提高网站速度访问速度的14条实践收藏

相信互联网已经越来越成为人们生活中不可或缺的一部分。ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实现的功能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是…

002_Python基础学习网站

(一)电脑端:Python 基础教程 (二)手机端:Python 基础教程

响应式网站开发、公司主页开发

转载自: http://www.5180it.com/pages/company1/html/index.html 网上找了一个响应式的公司网站模板,觉得效果挺好的,和大家分享一下 手机上效果: 自己也通过这个模板,开发了前后台,能够自定义相应的页面…

根据原有的博客模板自己开发了一个开源代码分享的网站

在网上看到一个dimpleBlog的代码,觉得比较好,源码里包括了后台的管理和博客页面, 我在这个基础上开发了自己的一些功能,为此和大家分享一下 http://www.5180it.com/code/index.html 网站首页 网站主页 创作中心 内容编辑页面 这…

分享一个响应式电商网站前端模板

页面简洁大气 具有常用的电商页面:登录、注册、商品列表、商品详情、购物车、订单等页面, 适合个人学习和二次开发,具体页面效果如下 在线演示地址 http://5180it.com/malltemplate/index.html http://5180it.com/malltemplate/index.htm…

Nginx 配置 SSL 证书 + 搭建 HTTPS 网站教程

一、HTTPS 是什么? 根据维基百科的解释: 超文本传输安全协议(缩写:HTTPS,英语:Hypertext Transfer Protocol Secure)是超文本传输协议和SSL/TLS的组合,用以提供加密通讯及对网络服务…

大型网站系统架构演化之路

前言 一个成熟的大型网站(如淘宝、天猫、腾讯等)的系统架构并不是一开始设计时就具备完整的高性能、高可用、高伸缩等特性的,它是随着用户量的增加,业务功能的扩展逐渐演变完善的,在这个过程中,开发模式、…

养殖交流网站-物语资源交流

自己搭建的养殖交流网站:物语资源交流。不吝访问,谢谢!

适合iOS开发者的15大网站推荐

http://www.csdn.net/article/2015-03-04/2824108-ios-developers-sites/1 https://medium.com/ios-apprentice/11-insanely-great-ios-developers-sites-95686a523ea8 1. objc.io objc.io的文章质量上佳、观点深刻、针对性强,均出自世界顶级iOS工程师之手&#xf…

图解使用VS.NET部署含水晶报表的网站

Crystal Report ,中文名称“水晶报表”,因为做报表的功能强大,所以被 Visual Studio.Net 整合进来了。其中 Visual Studio.Net 2002 中的Crystal Decisions 版本为 1.0 ;Visual Studio.Net 2002 中的Crystal Decisions 版本为 1.1…