js常用页面效果

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

}

}

时间： 2024-10-21 02:18:21

js常用页面效果的相关文章

JS实现单选按钮回显时页面效果出现，但选中单选框的值为空

最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取不能取的选中单选框的值(单选框取值有很多种方法,我的意思是有的能够取到,有的方法取不到). 想了很久,整理出一套看起来很复杂却非常实用的JS回显方法.试验了多种前端框架和浏览器,均好使.假设我们需要给name为gender,value为1的单选框进行回显: $("[name='gender'][va

jQuery中常用网页效果应用

一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form action="" method="post" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="user

Node.js静态页面展示例子2

例程下载:https://files.cnblogs.com/files/xiandedanteng/nodejsStaticHtmlSample.rar 页面效果: Html页面代码(注意用文本编辑器如Editplus3保存文件时要指定编码为UTF-8,否则容易出现乱码): <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="

JavaScript网站设计实践（一）网站结构以及页面效果设计

原文:JavaScript网站设计实践(一)网站结构以及页面效果设计 这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录下实现这个乐队的宣传网站的具体过程,加深理解.好,从现在开始来实现这个JavaScript网站实战. 一.网页的结构 由三个部分组成:头部.导航.内容 效果图是这样的(勉强看,有点不美观.哈哈): 二.网站的的结构 这是我的项目目

js拖拽效果实现

<!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" xml:lang="en"><head>    <meta

php开发之js修改页面css样式

在我以前的印象里,页面的字体属性,背景,等样式在页面加载后基本上都是固定的了,但是今天看到可以通过js修改页面的样式,觉得有必要和大家分享下. test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equi

js常用框架

JS常用框架:jQuery.Prototype.MooTools 参考:w3cshool jQuery jQuery 是目前最受欢迎的 JavaScript 框架. 它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象). jQuery 同时提供 companion UI(用户界面)和插件. $符号是jquery的选择器核心.详细见w3cshool jQuery 教程 Prototype Prototype 是一种库,提供用于执行常见 web 任务的简单 API. API 是

第22天：js改变样式效果

一.输出语句 1.alert:弹出警示框(用的非常少,用户体验不好)完整写法:window.alert("执行语句"):window对象,窗口,一般情况可省略alert(123); 2.console控制台输出(用户看不见)一般用于测试用console.log();控制台输出,普通输出语句console.warn();控制台警示console.error();错误提示 3.document.write():文档打印输出,直接在文档中显示document文档对象,不可省略 获取对象方法:

Node.js 常用工具

Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.inherits util.inherits(constructor, superConstructor)是一个实现对象间原型继承 的函数. JavaScript 的面向对象特性是基于原型的,与常见的基于类的不同.JavaScript 没有 提供对象继承的语言级别特性,而是通过原型复制来实现的. 在这里我们只介绍util.inherits