2011年12月12日

javascript+css网页图片放大

摘要： 在现在流行的网商的网站上，会有很多的商品照片，然后当鼠标移动上去的时候照片可以放大。 我自己也实现了一个，原理其实很简单，页面同时要放上两张同样的照片，其中一张的大小必须要进行相应的设置，然后另外一张为原始大小，通过控制原始大小的照片来实现效果。 为了尽量做到完善，自己加了不少的代码，事先要考虑原始照片的比例来进行图片缩放的设置，然后通过原始图片的大小来调整显示放大的范围，尽量做到完善一些。 代码兼容性还算不错，起码IE,firefox，chrome这些主流的浏览器都还是运行流畅的。。。。源代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 阅读全文

posted @ 2011-12-12 16:54 fjs_cloud 阅读(267) 评论(0) 推荐(0)

2011年12月9日

web下拉菜单的制作方法

摘要： 参考别人的代码，这里用到了<dl>,<dt>,<dd>标签，还加上了一些动画效果。<dl class="dropDown"> <dt id="dt1" onmouseover="drop($('dd1'))" onmouseout="unDrop($('dd1'))">one</dt> <dd id="dd1" onmouseover="cancelHide($('dd 阅读全文

posted @ 2011-12-09 14:45 fjs_cloud 阅读(503) 评论(0) 推荐(0)

2011年12月7日

web弹出层可移动

摘要： 以前写过不可以移动的弹出层，始终想要让它可以在页面上可以移动。 其实也想到了大概应该怎么样实现，但是不太肯定，上网查了一下，果然跟自己想的差不多。。。。 通过给<div>加上onmousedown,onmousemove,onmouseup这几个事件处理函数，通过调整css即可实现，原理还是挺简单的。。。 另外自己还顺便了解了一些简单的动态效果是如何实现的，setInterval和clearInterval这两个函数配合起来使用。页面源代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& 阅读全文

posted @ 2011-12-07 15:26 fjs_cloud 阅读(229) 评论(0) 推荐(0)

2011年12月5日

。。。tab页设计。。。。。

摘要： 以前在用.net编桌面程序时曾经用过tab页，觉得其实挺好用的，在网页上面也看过不少的这样的东西，刚开始觉得还挺神奇的，最近自己学习了web前端的一些设计，就想要自己也做出来一个，于是就着手实现，实现出来感觉其实也挺简单的。 其实javascript+css能做出来不少的东西。。。。。页面源码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><h 阅读全文

posted @ 2011-12-05 21:41 fjs_cloud 阅读(280) 评论(0) 推荐(0)

2011年12月3日

javascript日期选择器

摘要： 以前自己用过dojo的calander，也用过jquery的calander，一直觉得在网页上实现这个是件非常神奇的事情。 现在自己也动手写了一个试试，其实倒是挺简单的，就是写javascript函数的时候觉得比较繁琐。。。 首先就是要实现calander的样式，直接用div+css实现，这点倒是比较方便。 然后就是加入各种javascript函数javascript代码:(Calander.js)// JavaScript Documentvar date;function $(str){ return document.getElementById(str);}functi... 阅读全文

posted @ 2011-12-03 22:25 fjs_cloud 阅读(242) 评论(0) 推荐(0)

鼠标滑过提示效果 tooltip

摘要： 现在tooltip一类的东西用得很多，例如人人网，淘宝网等等都有很多的应用，自己也试着实现了一下。 其实原理也非常的简单，当鼠标进入选定区域的时候，弹出一层即可，通过获取的鼠标的x，y坐标来设置弹出层的位置，<script type="text/javascript"> function $(sId){ return document.getElementById(sId); } function createTooltip(){ $("content").onmouseover=function(ev){ var ev = ev || wi 阅读全文

posted @ 2011-12-03 21:44 fjs_cloud 阅读(383) 评论(0) 推荐(0)

html页面弹出窗体

摘要： 在现在的网页上面经常可以看到弹出窗体，以前自己觉得在浏览器上实现这个肯定是非常繁琐的，学了些css后自己也尝试着做了做，写完了之后其实感觉也挺简单的。 首先想要实现弹出一个窗口需要事先写两个<div>层：<div id="content"> 这是一个弹出的窗口<button onclick="closeIt()" style="margin-left:80%">关闭</button> <br /> <input type="password" /&g 阅读全文

posted @ 2011-12-03 21:43 fjs_cloud 阅读(1067) 评论(0) 推荐(0)

隔行换色table以及鼠标滑过换色

摘要： 以前对编写javascript的东西一直比较抗拒，觉得这东西比较扯，最近自己学了学javascript以及css，觉得其实也挺简单的，而且越来越感觉javascript是个很好的东西。 以前觉得网页上有的表格特效很好看，自己现在也写了一个，首先是要隔行换色，然后就是当鼠标滑过的时候有变色的效果，其实挺简单的，javascript+css很容易就可以搞定的。。。。。nametimehomefjs11992-03-28杭州fjs21992-03-28杭州fjs31992-03-28杭州首先是定义了两种tr的样式，这样来实现表格的隔行换色： tr.one{ background-color:... 阅读全文

posted @ 2011-12-03 21:41 fjs_cloud 阅读(367) 评论(0) 推荐(0)

导航