标签：
1 跑马灯效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta con\="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style type="text/css">
*
{
padding: 0;
margin: 0;
border: 0;
list-style: none;
font-size: 12px;
}
body{height:100%;}
.catalog
{
position: relative;
height: 165px;
width: 226px;
overflow: hidden;
left: 50%;
top:50%;
margin-left: -113px;
margin-top: -82px;
}
.catalog .h5
{
font-weight: bold;
background: #e4e4e4;
line-height: 20px;
height: 20px;
margin-bottom: 5px;
text-indent: 5px;
}
.catalog .imgbox li
{
width: 113px;
height: 140px;
float: left;
overflow: hidden;
}
.catalog .arrow
{
position: absolute;
width: 90px;
height: 19px;
top: 1px;
right: 0px;
_display: inline;
}
.catalog .arrow li
{
float: left;
}
.catalog .arrow a.left
{
line-height: 15px;
text-indent: -99em;
width: 30px;
display: block;
background: url() no-repeat 0px 0px;
height: 19px;
overflow: hidden;
}
.catalog .arrow a.right
{
line-height: 15px;
text-indent: -99em;
width: 30px;
display: block;
background: url() no-repeat 0px 0px;
height: 19px;
overflow: hidden;
}
.catalog .arrow a.left
{
width: 50px;
background-position: -76px 0px;
}
.catalog .arrow a.right
{
background-position: -131px 0px;
margin-left: 8px;
}
.catalog .arrow a.left:hover
{
background-position: 0px 0px;
}
.catalog .arrow a.right:hover
{
background-position: -55px 0px;
}
</style>
</head>
<body>
<div id="catalog" class="catalog">
<div class="h5">
最新目录</div>
<ul class="imgbox">
<li><a href="#">
<img src="image/01.jpg" /></a></li>
<li><a href="#">
<img src="image/02.jpg" /></a></li>
<li><a href="#">
<img src="http://images.24city.com/jimmy/img/mag3.jpg" /></a></li>
<li><a href="#">
<img src="http://images.24city.com/jimmy/img/mag4.jpg" /></a></li>
</ul>
<ul class="arrow">
<li><a class="left" title="向左" href="#">向左</a></li>
<li><a class="right" title="向右" href="#">向右</a></li>
</ul>
</div>
<script type="text/">
var slideX = {
thisUl: $(‘#catalog ul.imgbox‘),
btnLeft: $(‘#catalog a.left‘),
btnRight: $(‘#catalog a.right‘),
thisLi: $(‘#catalog ul.imgbox li‘),
init: function () {
slideX.thisUl.width(slideX.thisLi.length * 113);
slideX.slideAuto();
slideX.btnLeft.click(slideX.slideLeft).hover(slideX.slideStop, slideX.slideAuto);
slideX.btnRight.click(slideX.slideRight).hover(slideX.slideStop, slideX.slideAuto);
slideX.thisUl.hover(slideX.slideStop, slideX.slideAuto);
},
slideLeft: function () {
slideX.btnLeft.unbind(‘click‘, slideX.slideLeft);
slideX.thisUl.find(‘li:last‘).prependTo(slideX.thisUl);
slideX.thisUl.css(‘marginLeft‘, -113);
slideX.thisUl.animate({ ‘marginLeft‘: 0 }, 350, function () {
slideX.btnLeft.bind(‘click‘, slideX.slideLeft);
});
return false;
},
slideRight: function () {
slideX.btnRight.unbind(‘click‘, slideX.slideRight);
slideX.thisUl.animate({ ‘marginLeft‘: -113 }, 350, function () {
slideX.thisUl.css(‘marginLeft‘, ‘0‘);
slideX.thisUl.find(‘li:first‘).appendTo(slideX.thisUl);
slideX.btnRight.bind(‘click‘, slideX.slideRight);
});
return false;
},
slideAuto: function () {
slideX.intervalId = window.setInterval(slideX.slideRight, 3000);
},
slideStop: function () {
window.clearInterval(slideX.intervalId);
}
}
$(document).ready(function () {
slideX.init();
})
</script>
</body>
</html>
2 js先检查再提交页面
<form id="pubtuan" action="" method="">
.......
<input type="button" on\="checkform()" value="提交团购">
</form>
function checkform(){
.........
$("#pubtuan").submit();
}
js检查输入值
function checkform(){
if($("#title").val()==‘‘){
alert(‘标题不能为空‘);
return false;
}
if($("#logo").val()==‘‘){
alert(‘logo不能为空‘);
return false;
}
if(checkdata($("#entime").val())==1){
alert(‘结束日期输入不符合要求‘);
return false;
}
function checkdata(data){ //日期输入检查函数 要求日期格式为2012-04-30
var starr=new Array;
starr=data.split("-");
if(starr.length!=3){
return 1;
}
if(starr[0].length!=4 || starr[1].length!=2 || starr[2].length!=2 ){
return 1;
}
if(starr[1]>12 || starr[2]>31){
return 1;
}
}
3 jquery检查输入多少个字符
(function($) {
$.fn.extend( {
limiter: function(limit, elem) {
$(this).on("keyup focus", function() {
setCount(this, elem);
});
function setCount(src, elem) {
var chars = src.value.length;
if (chars > limit) {
src.value = src.value.substr(0, limit);
chars = limit;
}
elem.html( limit - chars );
}
setCount($(this)[0], elem);
}
});
})(jQuery);
var elem = $("#chars");
$("#destuan").limiter(100, elem);
chars显示剩余多少个字符的span
destuan为textarea
需要jquery1.9y以上
4 js 点击元素 获取元素文本 提交表单
<form id="form1" name="form1" class="form_search" action="<?php echo URL("saleshall.saleserchtop")?>" method="post">
<input type="text" on\="this.value=‘‘" name="topkey" id="topkey" value="雪佛兰" class="textbox_search"/>
<input type="submit" align="absmiddle" class="btn_search" name="Submit" value="搜 索" "/>
<p class="key_word">热门搜索：
<span><a on\="subform1(this.innerHTML)">雪佛兰</a></span>
<span><a on\="subform1(this.innerHTML)">宝马（进口）</a></span>
<span><a on\="subform1(this.innerHTML)">奥迪（进口）</a></span>
<span><a on\="subform1(this.innerHTML)">宝骏</a></span></p>
</form>
</div> <!--end box_head-->
<script type="text/">
function subform1(e){
var topval= e;
var topkey=document.getElementById(‘topkey‘);
topkey.attributes["value"].value=topval;
document.getElementById(‘form1‘).submit();
}
</script>
5 js滚动到页面头部
function myScroll(){
var x=document.body.scrollTop||document.documentElement.scrollTop;
var timer=setInterval(function(){
x=x-100;
if(x<100){
x=0;
window.scrollTo(x,x);
clearInterval(timer);
}
window.scrollTo(x,x);
},"5");
}
6 图片加载出错,显示默认图片
<li><img src="<?php echo W_BASE_URL,ltrim($rj[‘images‘],‘/‘) ?>" style="height:200px" on\="showImgDelay(this);"/>
<span id="showSpan"></span>
</li>
<script type="text/">
function showImgDelay(imgObj){
imgObj.src="images/default.jpg";
}
</script>
7 查看浏览器内核
在浏览器地址栏输入 :alert(navigator.userAgent);
8 去除超链接的默认跳转
<a href=":void(0);" class="sshowbox">去除链接的默认行为</a>
9 js点击清除默认输入文字
<input name="q" on\="if(this.value==‘爱微网搜索‘){this.value=‘‘}" on\="if(this.value==‘‘){this.value=‘爱微网搜索‘}" value="爱微网搜索" />
10 js限制上传文件大小
<input on\="fileChange(this,$(this).attr(‘id‘))" id="logo" name="logo" />
function fileChange(target,id) {
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var fileSize = 0;
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if(!fileSystem.FileExists(filePath)){
alert("附件不存在，请重新输入！");
var file=document.getElementById(id);
file.outerHTML=file.outerHTML;
return;
}
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024/1024;
if(size>2){
alert("附件大小不能大于2M！");
var file=document.getElementById(id);
file.outerHTML=file.outerHTML
}
if(size<=0){
alert("附件大小不能为0M！");
var file=document.getElementById(id);
file.outerHTML=file.outerHTML
}
}
标签：
原文地址：http://www.cnblogs.com/phpinfo/p/4646992.html
