JavaScript/Jquery
关注
分享
扫一扫
fengqingxin
计算机专业，在读、学习c、java、c 、linux、嵌入式，希望与大家交流！
展开
-
Javascript实现图片随机漂浮
<html><head></head><body> <div id="img" style="position:absolute;width:200; height:151"><img src="pic.jpg" border="0">&l2011-07-06 12:17:22 · 616 阅读 · 0 评论 -
php版本 化妆程序 给图片添加饰物
大家估计都用手机玩过 化妆整人的程序也就是对照片加工处理 添加饰物 然后生成一张图片 可以搞笑娱乐大家 本文主要采用的技术有1.jquery的拖拽 drag& drop技术2.PHP转换Json data3.CSS3 +ＨＴＭＬ５ 首先我们建立一个大体的框架<div id="content"> <div i...2013-03-05 10:20:42 · 133 阅读 · 0 评论 -
一款漂亮的滑动表单
<h1>Fancy Sliding Form with jQuery</h1><div id="wrapper"> <div id="steps"> <form id="formElem" name="formElem" action="" meth2013-03-05 10:46:34 · 186 阅读 · 0 评论 -
页面滑到底端弹出提示表单
<p id="last"> Some paragraph text</p><div id="slidebox"> <a class="close"></a> <p>More in Technology & Sci2013-03-05 10:51:07 · 174 阅读 · 0 评论 -
Jquery 实现HTML 文本字体 大小 切换
<!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" lang="2012-03-01 16:30:46 · 384 阅读 · 0 评论 -
图片hover状态平滑划过过渡效果
附源码 //first preload all images$hs_images = $hs_container.find('img');var total_images = $hs_images.length;var cnt = 0;$hs_images.each(function(){ var $t...2013-03-15 14:38:59 · 212 阅读 · 0 评论 -
圆形的hover效果 多种style可供选择见demo
当鼠标浮动时 会呈现圆形的富有生动的多重样式的动态效果这种样式一般会在网页底端应用 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compati2013-03-15 14:45:04 · 219 阅读 · 0 评论 -
看一眼你就会爱上它 10种不同风格任你选
看一眼你就会爱上它 10种不同风格任你选 .view { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-...2013-03-22 09:25:13 · 102 阅读 · 0 评论 -
绚丽的图片文字 跟随过渡切换焦点图设计
<!DOCTYPE html><html lang="en"> <head> <title>Elastic Image Slideshow with Thumbnail Preview</title> <meta charset="UTF-8" /&2013-03-25 14:00:12 · 126 阅读 · 0 评论 -
推荐一款神器，桌面远程调试IOS网站的工具 很好很强大 支持国产！
MIHTool 是前端工程师在iOS设备上调试和优化页面的得力助手. 首先app Store下载 MIHTOOL。然后安装后地址栏打开所需要调试的网站，然后会弹出本地使用的ip地址 类似这样的 http://192.168.1.165:1630/devtool/client/#leZV6e 然后，出现如下界面就等于就可以成功开始远程调试 IOS网站了 功能特性...2013-04-04 11:09:32 · 393 阅读 · 0 评论 -
博文转移到个人网站，欢迎大家访问！！！
http://ismartstudio.com 欢迎留言 多提建议 以后博客内容逐渐迁移到 新网站 欢迎大家光临2013-05-13 22:40:26 · 118 阅读 · 0 评论 -
php/js/jquery等各种语言版本—检测终端类型和浏览器类型
<?php if ( (strpos($_SERVER['HTTP_USER_AGENT'], "Mobile/") != false) &&(strpos($_SERVER['HTTP_USER_AGENT'], "Safari/") == false) ) { echo "Safari (in-app)"; }else {...原创 2013-05-29 15:45:38 · 128 阅读 · 0 评论 -
一款基于bootstrap的datetimepicker
<!DOCTYPE HTML><html> <head> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <link re2013-05-29 15:49:04 · 106 阅读 · 0 评论 -
Jquery 判断是否 移动设备 浏览
$(document).ready(function() { var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i) ? true : false; }, BlackBerry: function() { ret...原创 2012-09-13 14:05:01 · 191 阅读 · 0 评论 -
鼠标悬浮 浮动放大 expand 效果
要求效果：1.鼠标浮动在div上 要求div动态浮出 有膨胀效果2.切换须柔和 且 无缝相隔3.鼠标离开后恢复原状4.实现图片缩放效果的完美展示 源码下载:hover.zip效果图：主要代码展示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra...2013-01-10 10:09:40 · 239 阅读 · 0 评论 -
国外经典JS、Jquery 各种资源集合
1,首推 Jquery 官网 http://jquery.com/ 本网站融合了各种jquery所需要的基本 中级高级知识 和各种资源 插件 2,Bootstrap http://twitter.github.com/bootstrap/Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。在平板电脑和智能手机上面还有 响应式CSS 可...原创 2013-01-15 11:03:53 · 171 阅读 · 0 评论 -
Google Chart 实现报表统计
当处理数据或者统计结果的时候 通常会遇到一些报表例如 饼状图 曲线图 柱状图但是实现起来 往往不是很简单,现在运用google chart可以很轻松实现你的目的了.先看个示例吧 <html> <head> <!--Load the AJAX API--> <script type="text/javascr...2012-10-11 16:16:52 · 211 阅读 · 0 评论 -
完美的 登录注册框 含漂亮的过渡、转换效果
<div id="container_demo" > <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 --> <a class="hidd...2013-03-04 17:29:43 · 271 阅读 · 0 评论 -
大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动
像酒店 酒吧 咖啡店连锁 小型餐厅 音乐网站等等 都可以采用我如下所讲的大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动。。。主要运用的技术有jquery easing+jquery scroll源码见页脚附件 主要核心知识简单介绍如下所述： 在网页内首先要建立几个section 来实现滚动 如下 <div class="se...2013-03-04 11:07:54 · 177 阅读 · 0 评论 -
jQuery 限制多行字符字数的方法 换成省略号
1.多行文本 在html中常见 用p标签可是因为版面限制有时候只能显示部分内容所以须要对内容加以修饰一般换用省略号代替比较好 或者 READ MORE 链接限制只显示某些省略号单行文本 可以直接用css实现zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis;-o...2012-03-01 10:21:46 · 303 阅读 · 0 评论 -
给表格加间隔行颜色 并且设置选中后的颜色
<!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><2012-01-30 15:12:30 · 147 阅读 · 0 评论 -
jquery实现 checkbox全选和反选 很常用噢....
Jquery的选择器帮你轻松实现这个效果 摒弃复杂的js代码$(function(){ $('#inputChkAll').click(function(){ $("input[name='chkJob']").attr("checked", $(this).attr("checked")); //注意此处 //#inputChkAll用来全选或者全不选的Check...2012-10-16 11:50:37 · 78 阅读 · 0 评论 -
仿淘宝 智能跟随菜单提示栏 智能浮动的菜单
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>smartFloat页面滚动智能层自动跟随插件 Demo</title>2012-10-17 10:25:35 · 118 阅读 · 0 评论 -
瀑布流展示示例- 带旋转的图文展示 好东西与大家分享 附源码
很流行的瀑布流展示 并且当鼠标悬浮 旋转图片 div 外加很酷的jquery展示...... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><h...2012-10-17 11:22:19 · 162 阅读 · 0 评论 -
js 实现 动态计算 两时间差
@model RightMobileSite.Models.Pulse@{ ViewBag.Title = "SetDates";}<h2>SetDates</h2><div> @Html.ActionLink("Pulse", "EditPulse", new { pulseId = Model.PulseId })..2012-06-07 11:00:19 · 326 阅读 · 0 评论 -
Jquery实现图片 上传同步预览 兼容火狐各种浏览器
<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>function readURL(input) {if2012-06-11 15:15:25 · 117 阅读 · 0 评论 -
常用的js 时间选择器 DateTime picker
<!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><me2012-06-12 17:01:31 · 247 阅读 · 0 评论 -
专业的网页测试工具 YSLOW
YSlow是Yahoo发布的一款基于FireFox的插件。 安装YSlow必须首先先安装 Firebug，然后下载YSlow，再对其安装。 YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。 YSlow可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意见。 https...2012-06-13 15:23:57 · 156 阅读 · 0 评论 -
带提示的input输入框类似html5的 placeholder
Html5带来了 placeholder<input id="t1" type="text" placeholder="请输入文字" /> 轻松实现 简单不...但是扩展性比较差 而且ie等浏览器支持不是很完善 而且各主流浏览器支持效果不是很统一 所以还是jquery/js 比较实用...简单实现起来也不是很复杂 并且统一性比较强大 <!DOC...2012-10-18 14:39:08 · 139 阅读 · 0 评论 -
手机支持视网膜技术 html css研究
原文摘自http://www.noupe.com/design/the-mobile-web-css-image-replacement-for-retina-display-devices.html http://retina-images.complexcompulsions.com/2012-06-19 15:48:05 · 102 阅读 · 0 评论 -
image radio button 带图片的单选按钮
js img display:none 和 img src动态切换实现 动态image radio button 代码片段 精选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...原创 2012-06-25 15:11:28 · 690 阅读 · 1 评论 -
一键生成各种多彩的 js 焦点图 幻灯切换效果
网站开发中常常会用到jquery焦点图的展示网上有很多很cool 的网站可以参考1.懒人图库http://www.lanrentuku.com/js/jiaodiantu.html2.牛图库http://www.niutuku.com/js/jquery/index-10.html 3. wow sliderhttp://wowslider.com/ 值...原创 2012-06-25 15:27:26 · 174 阅读 · 0 评论 -
js、jquery 动态生产 数据饼状图 所占百分比
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Pulse Results</title> <meta charset="utf-8" /&am2012-06-25 16:05:27 · 415 阅读 · 0 评论 -
js/jquery 进行动态统计 各种柱状图 饼状图 线条图 等
国内网站有 http://www.ichartjs.com/国外网站有 http://www.jqplot.com/index.php 1.简单示例1 线条图<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>...2012-06-25 16:15:38 · 729 阅读 · 0 评论 -
Js/Jquery 实现自定义 上传 按钮
先上效果图： 默认的 文件上传按钮 在各大浏览器 上兼容效果很差 在chrome上直接 就没有输入框 这针对浏览器测试是一个 比较大的麻烦 幸好jquery可以帮助你实现 这个自定义的上传按钮的样式的修改 <!DOCTYPE html><html> <head> <meta http-equ...2012-07-02 17:01:25 · 657 阅读 · 0 评论 -
JS 客户端 实现 无刷新分页 table表格实例
问题：实现如下功能需求 1.table 按行数 分页2.js 实现客户端无刷新效果3.分页脚注 比较美观4.可扩展 维护性比较好<html version="-//W3C//DTD HTML 4.01 Transitional//EN"> <head> ...2012-03-01 09:40:14 · 167 阅读 · 0 评论 -
js实现 鼠标悬浮 扩大 缩放 expand、shrink效果
<!DOCTYPE html><html lang="en" dir="ltr"><head><title>Pricing and sign up | CannyBill</title><meta charset=utf-8><!--[if !IE 6]&a2012-03-01 10:02:37 · 1073 阅读 · 0 评论 -
jquery实现 购物车 信息 级联改变
<!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> &am2013-01-29 15:07:36 · 106 阅读 · 0 评论