来源:
OurJS.cn
原文:
http://www.ourjs.cn/show.php?id=449
2004
年
3
月,
Dave Shea
写了一篇经典文章《
CSS Sprites
》,现在他使用
JavaScript同样能创造出完美的视角效果。
(要了解更多Dave Shea,可以点击这里
)
JAVASCRIPT:
$(document).ready(
function
()
{
// remove link background images since we're re-doing the hover interaction below
// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
$(
".nav"
).children(
"li"
).each(
function
()
{
var
current =
"nav current-"
+ ($(
this
).attr(
"class"
));
var
parentClass = $(
".nav"
).attr(
"class"
);
if
(parentClass != current)
{
$(
this
).children(
"a"
).css(
{
backgroundImage:
"none"
}
);
}
}
);
// create events for each nav item
attachNavEvents(
".nav"
,
"home"
);
attachNavEvents(
".nav"
,
"about"
);
attachNavEvents(
".nav"
,
"services"
);
attachNavEvents(
".nav"
,
"contact"
);
function
attachNavEvents(parent, myClass)
{
$(parent +
" ."
+ myClass).mouseover(
function
()
{
$(
this
).append(
'<div class="nav-'
+ myClass +
'"></div>'
);
$(
"div.nav-"
+ myClass).css(
{
display:
"none"
}
).fadeIn(200);
}
).mouseout(
function
()
{
$(
"div.nav-"
+ myClass).fadeOut(200,
function
()
{
$(
this
).remove();
}
);
}
).mousedown(
function
()
{
$(
"div.nav-"
+ myClass).attr(
"class"
,
"nav-"
+ myClass +
"-click"
);
}
).mouseup(
function
()
{
$(
"div.nav-"
+ myClass +
"-click"
).attr(
"class"
,
"nav-"
+ myClass);
}
);
}
}
);
来源:
OurJS.cn
原文:
http://www.ourjs.cn/show.php?id=449
分享到:
相关推荐
threejs正式将CSS2DRender.js与npm一起应用 安装 npm i --save three-css2drender 用法 import * as THREE from 'three' import { CSS2DRenderer , CSS2DObject } from 'three-css2drender' let scene = new THREE...
css:web设计艺术精髓(源代码),书中所有例题代码都有
超越CSS:Web设计艺术精髓 完整版part2 本书系统、深入地阐释了网站的设计与实现,帮助读者从设计的角度来使用CSS以达到完美的效果。作者通过使用标记和CSS的形象的创造性示例,帮助读者掌握实现创意设计的方法。...
学习 Web 技术:HTML,CSS,JavaScript学习 Web 技术:HTML,CSS,JavaScript 学习 Web 技术:HTML,CSS,JavaScript学习 Web 技术:HTML,CSS,JavaScript 学习 Web 技术:HTML,CSS,JavaScript学习 Web 技术:...
超越CSS:Web设计艺术精髓.pdf
一共两个资源:超越CSS:Web设计艺术精髓PDF + 源代码实例 非常经典的作品,你值得拥有。
rtl-css-js JS对象中CSS的RTL转换 问题 对于某些语言环境,当文本方向从右到左时,有必要将padding-left更改为padding-right 。 对于CSS,有这样的工具(例如 )可以操纵CSS字符串来执行此操作,但是对于JS中CSS...
css-click css 伪类 :click
要启用这些规则, postcss.config.js在项目的根目录中添加一个postcss.config.js 。 有关更多详细信息,请参见。 // `postcss.config.js`module . exports = require ( '@newhighsco/postcss-config' ) ;
超越css:Web设计艺术精髓
扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面...
css: bootstrap.min.css, buttons.bootstrap.min.css, buttons.css, dataTable.min.css, dataTables.bootstrap4.min.css, drop-down.css, jquery.dataTables.min.css, style.css font-awesome: font-awesome.css, ...
objectify-css 将CSS规则转成JavaScript样式对象的CLI工具
cssjs("yourcsscode"); 它会实时更新,因此您不必担心! #新选项 在 v0.2.0 中,我们现在可以选择放置 CSS 的位置: ##在头部元素中: cssjs("yourcsscode"); 或者 cssjs("yourcsscode", true); #在正文元素中...
CSS回归 Codeception中CSS回归测试 安装 $ composer require --dev saschaegerer/css-regression:dev-master 配置 modules : enabled : - WebDriver : ... - \SaschaEgerer\CodeceptionCssRegression\Module\...
JS-CSS-API JS和CSS的各种特效 看到自己喜欢的或者觉得有意思的特效就动手实现一下 在项目中如果需要可以直接使用
超越CSS:Web设计艺术精髓的源代码,里面有详细的代码和注释,部分代码可以直接拿来使用,很有借鉴价值!
编写CSS-in-JS的所有好处,但运行时代码为零 使用熟悉CSS语法编写样式 生成优化的原子CSS,没有重复的样式规则 基于应用程序顺序而不是层叠的样式解析 支持CSS模块的应用程序的零配置服务器端呈现 样式易于组合,...
domcss.js 计算 DOM 元素的 CSS 属性和位置。 由欧洲维也纳的 ( ) 开发。 安装 你可以从安装domcss.js : $ npm install domcss.js 用法 如果您(几乎)对每个 CSS 属性都感兴趣: var domCSS = new DomCSS ( )...