代码如下: 无标题文档 #Adiv div {float:left; width:100px;border:1px solid #333;margin-top:100px;} #SDiv {width:135px;position: absolute;} $(function(){ var x = -90; var y = -70; $("#Adiv div").mouseenter(function(e){ this.xx = ($(this).index() + 1) * 100; this.yy = $(this).offset().top; var login = $(this).attr("href"); if($("#SDiv")){$("#SDiv").remove();} var div = ""; $("body").append(div...
代码如下:$(function($){$.fn.changeList = function(options){var defaults = {tag : li, // tab namesubName : .utilTabSub, // sub class nameeventType : click, // event typenum : 4,showType : show // show effect type},opts = $.extend({}, defaults, options),that = $(this),subUl = that.find(opts.subName),subItems = subUl.find(li),size = subItems.length,liW = subItems.outerWidth(true),ulW = liW * size,pag...
jquery导航是一个网站必不可少的模块，当一个用户在一个网站上浏览的时候，为了某个目的而查看网站导航栏的时候，突出导航栏的效果是重中之重。因此必须要使用一个效果：jquery遮罩层。利用明暗效果来突出当前用户的操作。 代码如下:$(function() {var $oe_menu= $(#oe_menu);var $oe_menu_items= $oe_menu.children(li);var $oe_overlay= $(#oe_overlay); $oe_menu_items.bind(mouseenter,function(){var $this = ...
代码如下: /*文字提示*/ /* （1）鼠标移入的时候，创建一个div它的内容是title属性的值 （2）规定位置，设置css样式 （3）鼠标移出的时候，移除div （4）鼠标移动的时候，X Y轴的坐标要相应的变化 */ $(function(){ var x = 7; var y = 8; $("a.tip").hover(function(){ var title = this.title; var $div = $(""+title+""); $("body").append($div); $div.css({"position":"absolute","background":"pink"}); },function(){ ...
css3 Animation： 代码如下: @-webkit-keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/} }Jquery ： 代码如下:$(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //在对象element中添加闪烁动画也可以在css样式里添加如下： 代码如下: #element{-webkit-animation: twinkling 1s infinite ease-in-out; }注：...
以前一直在用JQUERY叠加两个INPUT框来实现登陆中需要输入的用户名、密码来实现提示与用户的输出，这边采用JQUERY在一个INPUT框中实现这种效果，具体做法为： 下面是INPUT框代码： 代码如下: 下面是JQUERY代码： 代码如下: //设置搜索的默认值 $(".search_text").focus(function(){ if($(".search_text").val()==搜索){ $(".search_text").val(""); }else{ $(".search_text").val($(".search_text").val()); } }); $(".sea...
代码如下: 无标题文档 $(function(){ $("html").mousemove(function(e){ $("#a").css("left",e.pageX).css("top",e.pageY); }); }); .a { width:200px; height:100px; position:absolute; background-color:rgb(0,0,0); } 只做了一个简单的实例 JavaScript教程/参考手册 JavaScript热搜 自定义vue组件发布到npm的方法Vue利用canvas实现移动端手写板的方法vue2.0 移动端实现下拉刷新和上拉加载更多的示例解...
代码如下: 以下为程序代码： $(function() { $(".v").mouseover(function() { var x = $(""); x.appendTo($('body')); x.css({ width : $(this).width() - 6, height : $(this).height() - 6, left : $(this).offset().left, top : $(this).offset().top }); $($.browser.msie ? this : x).mouseout(function(){ x.remove(); }); }); }); .vs {z-index:1000;position:absolute;border:3px solid red;} 点击查看演示：...
代码如下:/*文本自动补全 zhouxiang*/ (function ($) { $.Completion = function (setting) { var opts = $.extend({}, $.Completion.DefaultSetting, setting); //宽度 var Completion_Width = null; //高度 var Completion_Height = null; //数据源(ashx)访问路径 var Completion_Data_Url = null; //对象 var Completion_Obj = null; var Completion...
代码如下:Libraries give you 代码如下:html,body { font-family: Open Sans, Helvetica Neue, sans-serif; padding: 3em 2em; font-size: 18px; background: #fff; color: #009966;} h1,h2 { font-weight: 300; margin: 0.4em 0;}h1 { font-size: 3.5em; }h2 { font-size: 2.5em; font-weight: 700; color: #505050; }h3 { color: #505050; font-size: 1.5em;}.fw700 { font-weight: 700;}input { font-size: 100%; ...
JQuery有很多这样的插件，但是我们公司不用jquery，没有插件，所以我就试着自己写，我也不知道别人是怎么写的，纯粹是按着自己的想法来的。 直接上代码： 代码如下: Demo window.onload = function(){ var btn = document.getElementsByTagName('button')[0]; var flt = document.getElementsByTagName('div')[0]; btn.onclick = function(){ event.cancelBubble = true; var x = btn.offsetLeft - 15 + 'px'; var y = btn.o...
一、需求原因目前jQuery已经是一个比较成熟的框架了，而且基于他的插件也有上百种，本例我手动用jQuery实现一个动画效果的例子。 二、具体实现 代码如下:jQuery实现动画效果 #test { position:relative; width:100px; height:100px; border:1px solid #0050d0; background:#96e555; cursor:pointer; } $(function(){ $("#test").css("optcity","0.5");//设置...
如下所示： 代码如下: jquery body { font-size: 12px; } li { list-style: none; height: 34px; padding-top: 5px; } $(document).ready(function(){ var oInputs = $("ul.demo input");oInputs.each(function(i){ oInputs.eq(i).focus(function(){ oInputs.eq(i).parent().css("background-color","...
样式： 代码如下: #win { width: 98%; position: absolute; display: none; float:left; } /*控制关闭按钮的位置*/ #close { margin-left: 155px; cursor: pointer; }JS代码： 代码如下: function showwin() { $("#win").fadeIn("slow"); } function hide() { $("#win").fadeOut("slow...
代码如下:$(document).ready(function(){ $.ajax({ type:"get", cache:false, url:"ajaxpage.aspx?t=getcity", dataType:"json", beforeSend:function(){ $("#vvv").append(); }, success:function(data){ $("#city").html(data.info);//添加下拉框的option }, complete: function() {$("#vvv").remove(); }})})