js.
滑入滑出
js实现鼠标滑入滑出背景透明度改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享</title>
</head>
<style type="text/css">
body{padding:0;margin:0;}
#n_content{width:200px;height:200px;background:red;opacity:0.3;filter:Alpha(opacity=30);}
</style>
<body>
<div id="n_content"></div>
<script type="text/javascript">
window.onload = function(){
var odiv = document.getElementById("n_content");
odiv.onmouseover = function(){
startMove(100);
}
odiv.onmouseout = function(){
startMove(30);
}
var timer = null;
var alpha = 30;
function startMove(iTarget){
var odiv = document.getElementById("n_content");
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(alpha>iTarget){
speed = -10;
}else{
speed = 10;
}
if(alpha==iTarget){
clearInterval(timer);
}else{
alpha+=speed;
odiv.style.filter = 'alpha(opacity='+ alpha +')';
odiv.style.opacity= alpha/100;
}
};
}
</script>
</body>
</html>
CSS样式表
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
<script>
/**
* Created by an www.jq22.com
*/
window.onload = function () {
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (cls) {
var ret = [];
var els = document.getElementsByTagName('*');
for (var i = 0, len = els.length; i < len; i++) {
if (els[i].className.indexOf(cls + ' ') >=0 || els[i].className.indexOf(' ' + cls + ' ') >=0 || els[i].className.indexOf(' ' + cls) >=0) {
ret.push(els[i]);
}
}
return ret;
}
}
var table = document.getElementById('cartTable'); // 购物车表格
var selectInputs = document.getElementsByClassName('check'); // 所有勾选框
var checkAllInputs = document.getElementsByClassName('check-all') // 全选框
var tr = table.children[1].rows; //行
var selectedTotal = document.getElementById('selectedTotal'); //已选商品数目容器
var priceTotal = document.getElementById('priceTotal'); //总计
var deleteAll = document.getElementById('deleteAll'); // 删除全部按钮
var selectedViewList = document.getElementById('selectedViewList'); //浮层已选商品列表容器
var selected = document.getElementById('selected'); //已选商品
var foot = document.getElementById('foot');
// 更新总数和总价格，已选浮层
function getTotal() {
var seleted = 0;
var price = 0;
var HTMLstr = '';
for (var i = 0, len = tr.length; i < len; i++) {
if (tr[i].getElementsByTagName('input')[0].checked) {
tr[i].className = 'on';
seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
price += parseFloat(tr[i].cells[4].innerHTML);
HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消选择</span></div>'
}
else {
tr[i].className = '';
}
}
selectedTotal.innerHTML = seleted;
priceTotal.innerHTML = price.toFixed(2);
selectedViewList.innerHTML = HTMLstr;
if (seleted == 0) {
foot.className = 'foot';
}
}
// 计算单行价格
function getSubtotal(tr) {
var cells = tr.cells;
var price = cells[2]; //单价
var subtotal = cells[4]; //小计td
var countInput = tr.getElementsByTagName('input')[1]; //数目input
var span = tr.getElementsByTagName('span')[1]; //-号
//写入HTML
subtotal.innerHTML = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);
//如果数目只有一个，把-号去掉
if (countInput.value == 1) {
span.innerHTML = '';
}else{
span.innerHTML = '-';
}
}
// 点击选择框
for(var i = 0; i < selectInputs.length; i++ ){
selectInputs[i].onclick = function () {
if (this.className.indexOf('check-all') >= 0) { //如果是全选，则吧所有的选择框选中
for (var j = 0; j < selectInputs.length; j++) {
selectInputs[j].checked = this.checked;
}
}
if (!this.checked) { //只要有一个未勾选，则取消全选框的选中状态
for (var i = 0; i < checkAllInputs.length; i++) {
checkAllInputs[i].checked = false;
}
}
getTotal();//选完更新总计
}
}
// 显示已选商品弹层
selected.onclick = function () {
if (selectedTotal.innerHTML != 0) {
foot.className = (foot.className == 'foot' ? 'foot show' : 'foot');
}
}
//已选商品弹层中的取消选择按钮
selectedViewList.onclick = function (e) {
var e = e || window.event;
var el = e.srcElement;
if (el.className=='del') {
var input = tr[el.getAttribute('index')].getElementsByTagName('input')[0]
input.checked = false;
input.onclick();
}
}
//为每行元素添加事件
for (var i = 0; i < tr.length; i++) {
//将点击事件绑定到tr元素
tr[i].onclick = function (e) {
var e = e || window.event;
var el = e.target || e.srcElement; //通过事件对象的target属性获取触发元素
var cls = el.className; //触发元素的class
var countInout = this.getElementsByTagName('input')[1]; // 数目input
var value = parseInt(countInout.value); //数目
//通过判断触发元素的class确定用户点击了哪个元素
switch (cls) {
case 'add': //点击了加号
countInout.value = value + 1;
getSubtotal(this);
break;
case 'reduce': //点击了减号
if (value > 1) {
countInout.value = value - 1;
getSubtotal(this);
}
break;
case 'delete': //点击了删除
var conf = confirm('确定删除此商品吗？');
if (conf) {
this.parentNode.removeChild(this);
}
break;
}
getTotal();
}
// 给数目输入框绑定keyup事件
tr[i].getElementsByTagName('input')[1].onkeyup = function () {
var val = parseInt(this.value);
if (isNaN(val) || val <= 0) {
val = 1;
}
if (this.value != val) {
this.value = val;
}
getSubtotal(this.parentNode.parentNode); //更新小计
getTotal(); //更新总数
}
}
// 点击全部删除
deleteAll.onclick = function () {
if (selectedTotal.innerHTML != 0) {
var con = confirm('确定删除所选商品吗？'); //弹出确认框
if (con) {
for (var i = 0; i < tr.length; i++) {
// 如果被选中，就删除相应的行
if (tr[i].getElementsByTagName('input')[0].checked) {
tr[i].parentNode.removeChild(tr[i]); // 删除相应节点
i--; //回退下标位置
}
}
}
} else {
alert('请选择商品！');
}
getTotal(); //更新总数
}
console.log("\u767e\u5ea6\u641c\u7d22\u3010\u7d20\u6750\u5bb6\u56ed\u3011\u4e0b\u8f7d\u66f4\u591aJS\u7279\u6548\u4ee3\u7801");
// 默认全选
checkAllInputs[0].checked = true;
checkAllInputs[0].onclick();
}
</script>
visibility 属性规定元素是否可见。
提示：即使不可见的元素也会占据页面上的空间。
说明
这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。
opacity
opacity 属性设置元素的不透明级别。
opacity: value | inherit;
value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）
inherit 应该从父元素继承 opacity 属性的值。
