代码如下:<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js动态设置div的值.html</title> </head> <body> <form method="post" name="form1"> <label><input type="radio" name="radio" value="1-10 岁" oncl...
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <title>选项卡</title> <style type="text/css"> <!-- * { margin:0; padding:0; font-size:12px; font-weight:normal; } .jj { font-weight:bolder!important; } .box { border-top-color:#c00!important; } .pr { ...
代码如下:<html> <head> <script type="text/javascript"> var x; var y; function $(id) { return document.getElementById(id) } function mousedown() { x=event.clientX-$("px").style.pixelLeft; y=event.clientY-$("px").style.pixelTop; $("px").style.border="2px solid red"; $("px").onmousemove = mousemove; } function mouseup() { $("px").onmousemove = ""; $("px").style.border=""; } function mousemove() { $("...
一个Div中显示Img，img的宽和Div相同，但高不固定，要求只显示Img垂直居中的部分。 示例： 原图： 代码实现： 代码如下:<div style="width: 190px; height: 100px; overflow: hidden;"> <img src="http://beijing.timeoutcn.com/UserFiles/Images/2013-10-21/20131021104840077cover-22-1.jpg" width="190px" style="vertical-align: middle;" onload="this.style.marginTop = (parseInt(this.parentNode.style.height) - this.h...
jQuery部分 代码如下:<script src="JS/jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var elm = $(#pordAttr); var startPos = $(elm).offset().top; $.event.add(window, "scroll", function () { var p = $(window).scrollTop(); $(elm).css(position, ((p) > startPos) ? fixed : static); $(elm).css(top, ((p) > startPos) ? 0px : ); }); }); </script> HTML部分 ...
直接看例子 代码如下:for(var p=1; p<=5; p++){ $("#properties"+p).show(); //下面有五个id为properties1 、properties2 、properties3 、properties4、properties5的div //我们用一个语句就让下面五个div显示成功了。 } } <div class="banner" id="properties1"> <span>【${property1 }】</span> <div id="property1" class="bannerchild"></div> </div> <div class="banner" id="properties2"> <span>【${property2 }】</span>...
代码如下:<html><head> <title>测试可动div</title> <script language=javascript type=text/javascript> var offset_x; var offset_y; function Milan_StartMove(oEvent) { var whichButton; if(document.all&&oEvent.button==1) whichButton=true; else { if(oEvent.button==0)whichButton=true;} if(whichButton) { var oDiv=document.getElementById("oDiv"); offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); offset_y=pa...
之前没有注意过div的background-image这个属性，只是设置它的url，今天遇到一个问题特此做一下记录。 代码如下:<div id="img_2" style="width:133px;height:95px; cursor:pointer; background-image: url(Chrysanthemum.jpg);" onclick="tempClick()"></div> 在js中想获取image属性 代码如下:document.getElementById(img_2).style.backgroundImage; 注意黑体部分哦，div中的是background-image，而获取属性时是backgroundImag...
先上效果图： 对比传统的排序，这是一个很不错的尝试，希望对大家有启发。 大家可以参考我的上一篇博文：//www.gxlcms.com/article/42087.htm html部分： 代码如下:<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link href="css/create.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui.j...
代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html.aspx.cs" Inherits="WebApplication1.html" %> <!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"> <head runat="server"> <style type="text/css"> * { margin: 0; padding: 0; } { height: 1000px; } #mainBox { width: 250px...
1.创建div元素： Javascript代码 代码如下:<scripttypescripttype="text/javascript"> functioncreateElement(){ varcreateDiv=document.createElement("div"); createDiv.innerHTML="Testcreateadivelement!"; document.body.appendChild(createDiv); } </script> <scripttypescripttype="text/javascript"> functioncreateElement(){ varcreateDiv=document.createElement("div"); createDiv.innerHTML="Testcreateadivelement!...
jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。 （1）先介绍jquery.offset().top / left css： 代码如下:*{ margin: 0px; padding: 0px; } div{ margin: 0px auto; } .a{ width: 960px; height: 200px; } .parentBox{ padding: 30px; margin-top: 40px; width: 960px; height: 300px; } .innerBox{ padding: 20px; margin-top:...
javascript随机将第一个dom中的图片添加到第二个div中去，此代码的是一个简单的例子，将第一个div中的五张图片中，提取随机两张显示到第二个div中。 代码如下:<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>...
参数id为页面元素id 代码如下:function mScroll(id){$("html,body").stop(true);$("html,body").animate({scrollTop: $("#"+id).offset().top}, 1000);}
一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下： 代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>函数传参，改变Div任意属性的值</title> <style type="text/css"> body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #outer{width:300px;margin:0 auto;} p{margin-bottom:10px;} button{margin-right:5px;} label{width:5em;display:inl...