BS架构的企业级应用中，当一个表格列数较多时，用户一个常见的需求就是把前面几个重要的列固定住，这样拖动滚动条时固定的列会方便用户查看数据，用户体验很好。一些重量级的JS组件库也都有这个功能，那么有没有更简单的方法实现这个功能呢？ 这个需求常见的解决方案是使用表格拼接的方法，这个方案如果要制作静态的网页，或者功能简单的动态页面，逻辑比较简单，技术上也不复杂，很容易实现，但是如果要做成组件，动态功能较多的话...
JavaScript允许你即时的改变CSS样式，这样就可以将用户的眼球吸引到你想他们关注的地方上，并且提供较好的交互体验给力 。 JavaScript修改CSS有4种方法： 修改节点style（内联样式）； 改变节点class或id； 写入新的css； 替换页面中的样式表。 个人不建议使用后两种方法，几乎所有的功能都可以通过前两种方式实现，并且代码更加清晰、易理解。 后面还会说说如何获取元素的真实样式和一个表单中的注意事项。 1、修改节点style（内联...
本文实例讲述了js操作css属性实现div层展开关闭效果的方法。分享给大家供大家参考。具体分析如下： 最近学javascript接触到js对css属性操作，就写了个展开关闭效果，同时实现了按钮文字切换，很简洁啊！这段Js对象操作css属性实现div层的展开关闭效果。将代码分享给JS前端设计者。js操作div展开关闭 #jb51 { border: solid 1px #EEE; background:#F7F7F7; margin:20px; padding:10px; display:none;width:300px; }脚本之家提供编...
本文实例讲述了JS+CSS实现拖动分页效果的方法。分享给大家供大家参考。具体实现方法如下：拖动分页body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{ height:320px; list-style:none; margin:40px 50px 0px; padding:0px; } li{ width:1...
本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法。分享给大家供大家参考。具体分析如下： 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单，到期会自动关闭，是CSS结合JS实现的效果。CSS+JS弹出DIV层var w = 0; var h = 0; var mout; function emotion(){ var oMenu = document.getElementById("menu"); if(w 0){ w -= 50; h -= 25; oMenu.style.width = w+"px"; oMenu.style.height = h+"px"; window.setTim...
本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法。分享给大家供大家参考。具体如下： 首先来看一下运行效果图：具体实现代码如下：仿安卓手机拨号界面按键特效$(document).ready(function() { /* Current Tab */ $('.phone-tabs li a').click(function() { $('.phone-tabs li').removeClass('current'); $(this).parent().addClass('current'); }); /* Simple Tab */ var tabContents = $('.phone-tab-contents'); ...
1. viewport： 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个：代码如下: width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000）...
方法一：用触发手机的横屏和竖屏之间的切换的事件代码如下: window.addEventListener("orientationchange", function() { // 宣布新方向的数值 alert(window.orientation); }, false);方法二：监听调整大小的改变代码如下: window.addEventListener("resize", function() { // 得到屏幕尺寸 (内部/外部宽度，内部/外部高度) }, false);css判断横竖屏幕代码如下: /* portrait */ @media screen and (orientation:portrait) { /* po...
在网站上，CSS3 的过渡和动画是当前创建轻量级动画的首选方法。不幸的是，很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己，对你来说，或许Move.js是完美的方案。Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库。本教程将探讨Move.js的基础知识，并提供一个在线demo。 基础知识 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API。让我们假设有一个带类 box 的 div 元数，当鼠标 移动到 d...
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下：/*** 动态导入静态资源文件js/css*/ var $import = function(){return function(rId, res, callback){if(res && 'string' == typeof res){if(rId){if($($('#' + rId), $('head')).length>0){return;}}//加载资源文件var sType = res.substring(res.lastIndexOf('.') + 1);// 支持js/cssif(sType && ('js' == sType || ...
这篇文章主要介绍了JS+CSS实现仿新浪微博搜索框的方法,实例分析了javascript针对搜索框样式的控制技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下：<!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="...
写ABROAD项目用到了标签这个东东，其实标签在WEB上到处可见，图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样，不过checkbox实在太丑了，就使用这个简单方法美化一下好了。 1、HTML代码：经济、金融类行政、人资类市场、销售类电子工程IT类工程类生物医药类物理、化学类广告、传媒类语言、翻译类2、CSS代码（颜色、字体大小、间距自行调整...
本文实例讲述了JS+CSS实现表格高亮的方法。分享给大家供大家参考。具体如下： 这里使用JavaScript+CSS实现表格高亮的功能，实际上类似于隔行换色的效果，说法不同而已，只不过本效果是在鼠标移上时触发，移出结束。 运行效果如下图所示：具体代码如下：高亮的表格p, td, th {font: 0.8em Arial, Helvetica, sans-serif; } .datatable {border: 1px solid #D6DDE6;border-collapse: collapse;width: 80%; } .datatable td {border: ...
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。 方法一：1、HTML 部分：我是浮动的我也是居中的2、CSS 部分：.box{float:left;position:relative;left:50%; } p{float:left;position:relative;right:50%; }这样看来就很简单了吧，父元素和子元素同时左浮动...
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下： 一款经过JS+CSS美化的下拉列表，效果很不错，但代码有点偏多，学习CSS的朋友可以学习一下方法，然后自己变通一下，把代码简化一下。 运行效果如下图所示：具体代码如下：JS+CSS下拉列表body{font-size:12px; margin:0 } .center{ margin-left:auto; margin-right:auto; margin-top:200px; width:300px;} #age_sel_2 div.tag_select{display:block...