<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery1.8.3-min.js"></script></head><body><div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2> <div><img id="ImgPr" width="120" height="120" /></div> <input type="file" id="up" /></div><script> /* *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型...
话不多说，直接晒代码 1<div class="headering"> 2<div class="header-top"> 3<div class="btn-header"> 4<a href="#">网站logo</a> 5<button id="btn"> 6<span></span> 7<span></span> 8<span></span> 9</button>10</div>11<div class="nav-tab">12<div class="nav">13<ul>14<li><a href="#">首页</a></li>15<li><a href="#">公司简介</a></li>16<li><a href="#">新闻中心</a></li>17<li><a href="#">产品展示</a></li>18<li><a ...
在网页中实现复制到剪贴板功能，有两种方法， 第1种方法：使用JavaScript自带的方法，但是这种方法只能在IE下使用。 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好，可贴粘。"); 或者 window.clipboardData.setData("Text","要复制的内容"); alert("已复制好，可贴粘。");第2种方法：使用Jquery.ZeroClipboard组件，这种方法通过内嵌flash来实现的，可以兼容当前流行的各种浏览器。 我们今天主要讲解第2种...
<!Doctype><html> <head> <title>瀑布流布局</title> <meta charset="utf-8" /> </head> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <style type="text/css"> *{padding: 0;margin:0;} #main{ position: relative; } .pin{ padding: 15px 0 0 15px; float:left; } .box{ padding: 10px; border:1px solid #ccc; box-shadow: 0 0 6p...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <script type="text/javascript"src="jquery-2.0.0.js"></script> <!-- <script type="text/javascript"src="resource_demo.js"></script> <script type="text/javascript"src="jquery.aler...
html<div id="container"><!-- Left side --><div id="left"> This is the left side‘s content! </div><!-- Right side --><div id="right"><!-- Actual resize handle --><div id="handle"></div> This is the right side‘s content!</div></div>cssbody, html {width: 100%;height: 100%;margin: 0;padding: 0; } #container {width: 100%;height: 100%;/* Disable selection so it doesn‘t get annoying */-webkit-touch-ca...
网页上的头部固定，但不随滚动条滚动的效果，在百度贴吧里整理出来的网页特效，最开始的时候，固定条可以随滚动条拖动至网页顶部，但到达网页顶部后，再次拖动滚动条，头部并不滚动，其它的内容可以滚动，貌似在网上见的挺多的效果。 <!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-e...
1、引入JS文件和所需要的样式文件2、简单的写上以下18行代码就可以实现了$(document).ready(function() {$("div.tip_trigger a.img").hover(function() {$(this).parent(‘div.tip_trigger‘).css({‘background‘: ‘#8de08b‘,‘z-index‘: ‘1000‘});$(‘#h_coolsite .block‘).show();tip = $(this).siblings(‘.tip‘);tip.show();},function() {$(this).parent(‘div.tip_trigger‘).css({‘background‘: ‘none‘,‘z-ind...
渐进式返回顶部 原文：https://www.cnblogs.com/lzcblog/p/10340172.html
<div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 内容</label> <div class="col-sm-9"> <textarea class="col-sm-8" id="form-field-5" placeholder="请输入内容..."></textarea> </div> </div>$.extend({textareaAutosize_dc:function(){$("textarea").on("keyup",function(e){var currentEnterCount=$(this).val().split("\n").length;var lineHeigh...
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3<html xmlns="http://www.w3.org/1999/xhtml"> 4<head> 5<title></title> 6<script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script> 7<script type="text/javascript"> 8 9/*-------------------------------------------*/10var InterValObj; //timer变量，控制时间11var ...
通过jquery+html5实现，当浏览器窗口缩小或者手机访问的时候，导航菜单变成按钮下拉式菜单。效果图：HTML代码：复制代码代码如下:<nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul></nav>jQuery代码：通过以下jquery代码，会把<div id="menu-icon">添加到<nav id="nav_wrap">中，当点击 #menu-icon 时，菜单就会显示出来：复制代码代码如下:<script type="text/javascr...
jQuery计算文本宽度的原理是利用html提供的<pre>标签，向dom中动态添加<pre>标签，标签里的内容就是要测试长度的文本，获取完长度之后再删除刚才添加的<pre>标签，从而可取到文本的大概长度了。为什么要用标签而不用其他标签呢，那来看看<pre>标签的特性吧：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 <pre>标签的一个常见应用就是用来表示计算机的源代码。需要注...
<!doctype html> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>无标题文档</title> <scriptsrc="jquery-1.8.3.min.js"></script> <scriptsrc="jquery.cookie.js"></script> <scriptsrc="jquery.base64.js"></script> <scriptlanguage="javascript"type="text/javascript"> functionsetCookie(){ //设置cookie var loginCode = $("#login_co...
<!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=utf-8" /> <title>拖动DIV</title> <style type="text/css"> .show{ background:#7cd2f8; width:100px; height:100px; text-alig...