导入jquery代码代码如下: var carousel_images = [ "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg", "images/06.jpg", "images/07.jpg" ]; // Example without autoplay $(window).load(function() { $("#photo_container").isc({ imgArray: carousel_images }); }); // Example with autoplay /* $(window).load(function() { $("#photo_container").is...
代码如下: .mydiv1 {height:250px;width:250px;border:#909090 1px solid;} .mydiv2 { width:250px;height:250;border:#909090 1px solid;background:#fff;color:#333; filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/ -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/ -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/ box-shadow:2px 2px 0px #909090;/*op...
代码如下: 滑动门切换，jQuery层切换代码 $(function(){ $("ul li").each(function(i){ $(this).hover(function(){ $(this).addClass("bg").siblings().removeClass("bg"); $(".div:eq("+i+")").show().siblings(".div").hide(); }) }) }) *{ margin:0; padding:0; font-size:12px;} ul li{ list-style:none; float:left; background-color:#999; cursor:pointer; width:100px; height:25px; line-height:25px; text-align...
今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。 都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了。 代码如下: CSS+jQuery动画效果 body{ z-index: 0; width: 100%; min-height: 400px; } .pages{ position: absolute; } .current{ position: absolute; z-index: 12 !important; left: 0px !important; } .page1{ background-color: #a5c...
最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果，整理如下： 前段代码：代码如下:jQuery(document).ready(function() { $('.indexNews div.core').kxbdSuperMarquee({ isEqual:false, distance:18, time:4, //btnGo:{up:'#goU',down:'#goD'}, direction:'up' }); }); ...
代码如下: var dates = this.options.form.getWidgetByName("dates").getValue(); $.ajax({ url: "http://127.0.0.1:9009/Brilliantzz/service/snproduct.do", data:dates, beforeSend:function() { var h = document.body.clientHeight; $("").css({display:"block",width:"100%",height:h}).appendTo("body"); $("").html("正在上传生产数据，请稍候。。。").appendTo("body").css({display:"block", left:($(document.body).out...
借助 插件 Lavalamp实现导航条动态显示效果， 以前用animate来实现，效果不是很好 代码如下: $(function() { $(".nav").lavaLamp({ fx: "backout", speed: 1100, mouseover:function(event, menuItem){alert();} }); }); .nav { width:650px; height:100px; float:left; position: relative; } .nav li { width:auto; min-width:40px; line-height:100px; padding:0 15px; margin:0 10px 0 0; color:#000; font-size:14px; ...
CSS： 代码如下: .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60); } jQuery代码 代码如下: (function() { var $backToTopTxt = "返回顶部", $backToTopEle = $().app...
在本文中用JQuery对class属性的操作方法实现页面中的按钮开关效果。 首先定义两个class： 代码如下: .controlOff{ display:inline-block; width:130px; height:36px; cursor:pointer; background-image:url("../iclass/images/teach_off.png"); background-repeat: no-repeat; } .controlOn{ display:inline-block; width:130px; height:36px; cursor:pointer; background-image:url("../iclass/images/teach_on.png"); backgroun...
首先是自己定制的脚本方法属性代码： 代码如下:/* * 创建浮动图片广告（Generate a dock AD image） * * USAGE: * $(selector).higo_plugins_ad({ * src:null, // 广告图片路径 * closeSrc:null, // 关闭图片路径 * href:"#", // 广告图片链接地址 * autoHide:true, // 是否自动隐藏 * hideSecond:10, // 延...
网上一大堆限制多，文档也难看懂，而且麻烦~自己写了个。大笑 算法： 第一步： 放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度，求出鼠标在容器中移动的百分比 第二部： 得到百分比之后 x=-(x百分比*图片的宽度-显示容器的宽度/2); y=-(y百分比*图片的高度-显示容器的高度/2); 两个参数，x和y，就是大图的位置了，后面加了个显示容器的大小/2 是为了保证图片显示在中间。 效果图： 代码： 代码如下: 商品信...
当光标移动到某些元素上时，会弹出像tips的提示框。 代码如下: jQuery动态提示消息框效果 * { font-family: monaco; } div.item_keleyi_com { width:100px; height:50px; background-color: maroon; text-align:center; padding-top:25px; } div#item_keleyi_com_1 { position: absolute; top: 50px; left: 50px;color: white; } div#item_keleyi_com_2 { position: absolute; top: 500px; left: 0px;color: white; } div#it...
可以在代码里面指定默认显示第几页 代码如下: One Two Three jquery实现简单的Tab切换菜单 jquery焦点图 slideshow js等各种代码 代码如下: $(function(){ //直接制作Tab菜单，默认选择为第二项，且切换的时候fade动画 $("#container > ul").tabs({fx:{opacity:"toggle",height:"toggle"}, selected:1}); }); 注意上面的selected:1为控制默认显示第二页JavaScript教程/参考手册 JavaScript热搜 自定义vue组...
jquery模拟SELECT框，效果图如下： 代码如下: jquery模拟SELECT框 body{padding:0;margin:0;font-size:12px;} ul,li{list-style:none;padding:0;margin:0;} #dropdown{width:186px; margin:100px auto; position:relative} .input_select{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat rightright 4px; colo...
在网站中使用幻灯片效果的目前很普遍，如何实现，自己经过一番研究，本以为很复杂，想不到却很简单。有现成的jquery插件jquery.KinSlideshow.js。 使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果 htm代码： 代码如下: js代码： 代码如下: $(function () { $("#focusNews").KinSlideshow({ // moveStyle:"down", //设置切换方向为向下 [默认向左切换] intervalTime:8, //设置间隔时间为8秒 [默认为5秒] mouseE...