代码如下: table{border:1px solid #666;} table td{border:1px solid #eee;width:200px;height:200px;} img{width:200px;height:200px;border:none;position:relative;} $(function () { // $('img').click(function () { // $('img').animate({ left: '-=200px' }, 2000).animate({ left: '-=200px' }, 2000) // .animate(...
BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件，特征主要有： ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动 参数含义： display_num：显示元素的数量，几张图片 move：单击左右控制键时，移动的元素个数，此处为移动2张图片 prev_image：上一元素按钮图片 next_image：下一元素按钮图片 margin：图片之间的间隙，一般设为10px auto:自动滚动效果 contro...
此Jquery特效是一款Jquery+CSS3实现简洁大气带滑动效果的弹出层，应用范围很广泛，比如用在消息提示、弹出层显示内容、弹出层登录等，带遮罩效果，虽然没有封装成插件，但使用起来也非常简单，宽度和高度直接调样式。 包含了以下功能： 1、弹出层 2、带关闭按钮 3、遮罩层效果 4、从上向下滑动显示 5、点击层外面任何地方关闭 6、绑定控制按钮 7、内容过多自动显示滚动条 如果不满足大家的要求，自己可以二次开发哦 效果如下： 在线...
闲着没事，自己写了个瀑布流，我个人写脚本或者是网页的习惯是：只参考别人的效果，很少参考别人的代码，有时侯我宁愿用审查元素来推断代码，也不愿去看源代码。我不知道这个习惯好不好。虽然中间过程是花了我不少时间，但是我做的东西的每一个细节我都还能记清楚（当然肯定后来会忘），因为是我实现的。下面说正题： 瀑布流的主体即为几个ul标签，新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下。 主体形式如...
需求 ： 图片切换的时候下一屏不允许出现空白的项，换句话说就是 ：1、当移动的最后一屏移动的个数小于要展示的个数的时候 ，只移动(展示个数-最后一屏的个数的)差值。 举个例子： 每一屏都要展示7个，但总个数才10个，滚动到下一屏时候用户看到的还是7个，这个时候需要移动的是三个 这个效果是基于jQuery写的，只是想纪念下自己的学习 话不多说了，贴代码代码如下:(function( $ ){ var slider = function( elem , args ){ ...
一、新建一js文件jQuery_FixedTableHead.js 内容如下：代码如下:jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {var obj = document.getElementById("tableHeaderDiv" + tableId);if (obj) {jQuery(obj).remove();}var browserName = navigator.appName;var ver = navigator.appVersion;var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") + 5, ver.lastIndexOf("Windows")));var content =...
在做校园网视频网站的时候，首页有一个导航页面要实现滚动效果，有样例，但代码是在难弄懂，貌似网页设计这块还是只有自己的代码自己懂，索性就仿造别人的效果自己做了一个，大体上还行，看起来还是比较流畅的，不次于原作的幺。 现在先把代码拷贝到这里，以后再逐一简化修改： 实现滚动效果，脚本代码如下： 代码如下: var all=0; var no=0; var s_width=0; $(document).ready(function(){ all=$(.slide).length; s_width=$(.sli...
效果图如下： 主页面index.html: 代码如下: Drag and drop 我是第一台打印机 我是第二台打印机 我是第三台打印机 我是第四台打印机 我是第五台打印机 我是第六台打印机 我是第七台打印机 我是第八台打印机 名称 数量 $(function () { // jQuery UI Draggable $("#product li").draggable({ // brings the item back to its place when dragging is over reve...
本示例使用Jquery实现视频播放页面的关灯开灯效果。其中视频显示使用embed 元素，该元素是html5的元素，所以使用支持html5的浏览器效果会更好。 效果预览网址：http://www.keleyi.com/keleyi/phtml/guandeng/ 完整代码： 代码如下: 张国荣《千千阙歌》--脚本之家关灯特效 body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center; margin:0px; position:relative;} #container { width:960px; margin:0px au...
原始状态： 鼠标经过： 代码如下: 无标题文档 $(function(){ var offsetX=20-$("#imgtest").offset().left; var offsetY=20-$("#imgtest").offset().top; var size=1.2*$('#imgtest ul li img').width(); $("#imgtest ul li").mouseover(function(event) { var $target=$(event.target); if($target.is('img')) { $("").css({ "height":size, "width":size, "top":event.pageX+offsetX, "left":event.pageY+offsetY, }).a...
[javascript] 代码如下:$(function () { gridview("GridView1"); }); //gridview function gridview(objgridview) { //get obj id var gridviewId = "#" + objgridview; //even $(gridviewId + ">tbody tr:even").addClass("NormalColor"); //first $(gridviewId + ">tbody tr:first").removeClass("NormalColor").addClass("HeadColor"); //odd $(gridviewId + ">tbody tr:odd").addClass("A...
客户提了个需求，需要在已审核的文档上加盖公章，网上找了找没有现成的，自己动手丰衣足食 老规矩，上图看效果：可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。 [javascript] 代码如下:/* desc:jQuery模拟盖章 author:hyf date:2012-11-08*/ ;$.fn.zSign = function (options) { var _s = $....
最近发现web网页的拖拽效果，个人觉得是一种不错的用户体验，抽空研究了一下，原理还蛮简单的，下面贴一下我写的一个简单拖拽jquery自定义函数。 jquery代码:fun.js 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return $(this).bind("mousemove",function(e){ if(_IsMove==1){ $(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); } }).bind("mousedown",function(e){ _...
系统开发时很多地方需要有焦点效果，例如：鼠标点击聚焦，地图定位，在图片上突出显示，焦点定位页面元素。 本小功能通过jquery和graphics二次开发，实现通过鼠标点击页面任何区域，聚焦当前点击位置。适用于页面任何元素的位置效果。 首先引入jquery引擎包:jquery-1.4.2.min.js和graphics.js 源码下载地址 编写实现效果js文件，qfocus.js,源码如下： 代码如下: var qfocus = { config:{ "bar_dis":true,//横竖条显示或隐藏 "circ...
代码如下: jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 *{margin:0;padding:0;} body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{zoom:1;} ul,li{list-style:none;} img{border:0;} .wrapper{width:800px;margin:0 auto;padding-bottom:50px;} h1{heig...