LittleRain
LittleRain

js效果拾集

js效果拾集

1. js实现背景图片替换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
   
   <SCRIPT src="1.js"></SCRIPT>
    <SCRIPT language="javaScript">
 function go()
 {
  document.getElementById("button").style.background= "url(2.jpg) ";
  //document.getElementById("button").style.
 }
    </SCRIPT>
  </head>
 
  <body>
    <input onclick="go()" id="button" type="button" style="width:350;height:300;background:url(1.jpg);">
    <input type="button" value="test" onclick="go()"/>
  </body>
</html>

2.注意用js提交表单的时候，提供表单提交功能的button的名字不能定义成submit，不然会导致formName无法提交！

你可能感兴趣的:(js效果拾集)

  • HTML5+CSS3+JS小实例：黑客帝国“代码雨”特效 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript前端csshtml
    实例：黑客帝国“代码雨”特效技术栈：HTML+CSS+JS效果：源码：【HTML】黑客帝国“代码雨”特效【CSS】*{margin:0;padding:0;}body{overflow:hidden;}canvas{
  • BUGKU-WEB 滑稽 默默提升实验室 #BUGKUBUGKU
    题目描述没啥好说的，直接启动场景吧：解题思路花里胡哨的界面（js效果），有啥用呢？直接看源码吧（ctrl+u）：相关工具略解题步骤ctrl+u，发现在注释中直接标明了flag得到Flagflag{acf26d3401aa10cf30a981b31aca5e15}送分题这是！新知识点略
  • 前端工作流程？ hudaren
    1、拿到原型图和产品经理沟通业务需求。2、拿到设计稿先规划一下思路然后切图布局。3、写出js效果。4、拿到后端的接口文档测试一下接口是否可用。5、对接数据渲染到页面。
  • HTML5+CSS3+JS小实例：黑色的简约下拉菜单 艾恩小灰灰
    实例：黑色的简约下拉菜单技术栈：HTML+CSS+JS效果：源码：【html】黑色的简约下拉菜单抖音【css】*{/*初始化*/margin:0;padding:0;box-sizing:border-box;}/*:root选择器匹配文档根元素*/:root{/*声明自定义属性*/--rotate-arrow:0;--dropdown-height:0;--list-opacity:0;--tr
  • ctfshow信息收集(web1-web20) 网安小t 信息收集CTFSHOW信息收集web渗透网络安全渗透测试
    目录web1web2web3web4web5web6web7web9web10web11web14web15web16web17web18web19web20web1根据提示的孩子开发的时候注释没有被及时删除web2js原因无法查看源代码第一种方法在url前加入view-source：会显示页面源代码，可以告诉浏览器直接显示网页的源代码不受js限制第二种方式浏览器禁用js浏览器中直接禁用js效果（
  • HTML5+CSS3+JS小实例：五彩纸屑礼花筒 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript前端html
    实例：五彩纸屑礼花筒技术栈：HTML+CSS+JS效果：源码：【HTML】五彩纸屑礼花筒【CSS】
  • HTML5+CSS3+JS小实例：音频可视化 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript前端音视频css
    实例：音频可视化技术栈：HTML+CSS+JS效果：源码：【HTML】音频可视化【CSS】*{margin:
  • 前端常用js、css效果 yijianace 前端前端javascriptcss
    前端常用js效果效果参考代码文本横向滚动文本无限滚动无缝轮播无缝滚动盒子上下移动樱花飘落效果主要整理了几个常用的，方便平时做项目的时候参考文本横向滚动文本无限滚动无缝轮播无缝滚动盒子上下滚动樱花飘落效果参考代码文本横向滚动横向滚动文字这是要滚动的文本内容。.scroll-container{width:300px;height:30px;margin:20pxauto;border:1pxsoli
  • HTML5+CSS3+JS小实例：特殊验证码输入框 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript前端html
    实例：特殊验证码输入框技术栈：HTML+CSS+JS效果：源码：【HTML】特殊验证码输入框<pclas
  • HTML5+CSS3+Vue小实例：彩色圆环溶解加载动画 艾恩小灰灰 HTML+CSS+JS小实例html5css3vue.js前端csshtml
    实例：彩色圆环溶解加载动画技术栈：HTML+CSS+Vue.js效果：源码：【HTML】彩色圆环溶解加载动画<iv-for="item,indexin72":style="{'--rz':(index*5)+'deg',
  • 用js显示当前时间 我的笑狗很磕癌. javascript前端html
    目录以下是我全部代码其中，关键代码是js效果如图所示关键代码解释如下setInterval:getElementById:innerHTML:在初步学习js时，可能会有一些朋友能用上js来显示时间，因此我在此提供一种方法供大家参考。以下是我全部代码#time{color:red;font-size:30px;}functionshow(){varweeks=['天','一','二','三','四'
  • HTML5+CSS3+JS小实例：网站实现一键切换暗色主题 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascriptcss前端html
    实例：网站实现一键切换暗色主题技术栈：HTML+CSS+JS效果：源码：【HTML】网站实现一键切换暗色主题
  • HTML5+CSS3+JS小实例：过年3D烟花秀 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript3d前端html
    实例：过年3D烟花秀技术栈：HTML+CSS+JS效果：源码：【HTML】过年3D烟花秀，在此祝大家新年快乐，恭喜发财！【CSS】
  • HTML+CSS做一个时尚柿子造型计时器 白大锅 前端酷炫合集javascripthtmlcss计时器特效计时器
    文章目录效果展示代码展示HTMLJS效果展示代码展示HTML<htmllang
  • HTML+CSS做一个冰立方体时钟 白大锅 前端酷炫合集htmlcss前端时钟时钟特效
    文章目录效果展示代码展示HTMLJS效果展示代码展示HTML<htmllang
  • HTML5+CSS3+JS小实例：过山车文字动画特效 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascripthtml前端
    实例：过山车文字动画特效技术栈：HTML+CSS+JS效果：源码：【HTML】【JS】过山车文字动画特效hellohelloworld!//使用插件Splitting({whitespace:true
  • HTML5+CSS3+JS小实例：自适应瀑布流布局 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript前端csshtml
    实例：自适应瀑布流布局技术栈：HTML+CSS+JS效果：源码：【HTML】自适应瀑布流布局【CSS】*{margin:0;padding:0;}.container{width:90%;m
  • HTML5+CSS3+JS小实例：可拖拽排序的人物列表 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript前端html
    实例：可拖拽排序的人物列表技术栈：HTML+CSS+JS效果：源码：【HTML】可拖拽排序的人物列表路飞</sp
  • 基于react-native-date-picker的日期选择组件 miao_zz react-nativereactnativereact.jsjavascript
    基于react-native-date-picker的日期选择组件效果示例图安装依赖封装组件PickerDateComponent使用组件device.js效果示例图安装依赖https://www.npmjs.com/package/react-native-date-picker?activeTab=readmenpminstallreact-native-date-picker--save封装
  • 基于react-native-wheel-pick的三级地址选择 miao_zz react-nativereactnativereact.jsjavascript
    基于react-native-wheel-pick的三级地址选择效果示例图安装依赖封装组件PickerAddressComponent使用组件device.js效果示例图安装依赖ReactNative>=0.60+https://www.npmjs.com/package/react-native-wheel-pick1.安装npminstallreact-native-wheel-pick--s
  • html电子签名 陈天在睡觉 知识点总结WEBhtml前端javascript
    html电子签名html5实现手写签名板，点击保存即可生成base64格式的图片使用H5自带的canvas，无需引入js无需引入别的js效果图html代码电子签名*{margin:0;padding:0;}.canvas{/*width:100%;*/display:block;border:1pxsolidred;}#clear{margin:0auto;display:inline-block
  • HTML5+CSS3+JS小实例：数字滑动选择控件 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascripthtml前端
    实例：数字滑动选择控件技术栈：HTML+CSS+JS效果：源码：【HTML】数字滑动选择控件000102
  • HTML5+CSS3+JS小实例：蜂巢里的小蜜蜂光标特效 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript前端csshtml
    实例：蜂巢里的小蜜蜂光标特效技术栈：HTML+CSS+JS效果：源码：【HTML】蜂巢里的小蜜蜂光标特效<
  • HTML5+CSS3+JS小实例：Canvas图片滑块拖动验证码 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascripthtml前端
    实例：Canvas图片滑块拖动验证码技术栈：HTML+CSS+JS效果：源码：【HTML】Canvas图片滑块拖动验证码<divclass="r
  • HTML5+CSS3+JS小实例：九宫格图片鼠标移入移出方向感知特效 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript前端css
    实例：九宫格图片鼠标移入移出方向感知特效技术栈：HTML+CSS+JS效果：源码：【HTML】九宫格图片鼠标移入移出方向感知特效也许你永远都不会知道，你的一句话，我会记得很久；你的一个不以为然的承诺，我却苦苦守侯。
  • 五、项目笔记实践 毛小意
    以下是具体项目，特做笔记进行记录。学习笔记一：考核项目简易选课系统项目名称：简易选课系统：项目数据库：角色老师：ID,编号,姓名,职称,性别课程：ID,课程名,课程编号,课时分[10-50]学生：ID,编号,姓名，性别,年龄业务描述：2>教师进入系统：1>修改密码2>选择要教授的课程（每个老师最多只能选择教授3个课程）3>查看自己教授的课程下面有哪些学生。页面和js效果确定：页面效果如下图所示，修
  • HTML5+CSS3+JS小实例：使用L2Dwidget实现二次元卡通看板娘 艾恩小灰灰 HTML+CSS+JS小实例html5css3javascript前端csshtml
    实例：使用L2Dwidget实现二次元卡通看板娘技术栈：HTML+CSS+JS效果：源码：使用L2Dwidget实现二次元卡通看板娘body{background-image:linear-gradient(totop,#ff9a9e,#fecfef);}L2Dwidget.init({model:{//模型
  • 纯前端实现3D旋转动态词云 __不靠谱先生 动态词云词云前端动态词云wordCloud前端
    功能埋点：1.纯前端实现，（很简单，也能继续优化，变色等等)2.对数据格式没有要求3.每一项可点击，可做JS效果（搜索，跳转等）先看词云效果（动态旋转）不是gif图，实际是3D自动旋转效果上代码：HTML//body里面没有任何元素，元素在js里创建了一个div//两个script标签，上面的是jq的插件库网上找个版本就好，下面是自己写的js，下面会贴出来。CSSbody{background:#
  • 微信小程序实现翻书效果 小刚大侠 微信小程序前端javascript
    最近要在微信小程序里实现一个类似翻页的场景，网上翻看了多个案例无非就两种实现，第一种通过css3d变换+动画实现，第二使用Turn.js现成库。前者实现效果一般，后者js库是基于古老的JQuery来实现的并没办法移植到小程序了里。下面就自己调研了一下turnjs来实现小程序的简单版本turnjs效果截图我的实现思路：排版布局，通过绝对定位方式实现书页堆叠到一起就行（随意发挥）监听touchmove
  • react中实现预览pdf功能（react-pdf-js） Joey_iSleepy javaScriptreactjavascriptreact.js前端
    使用的是reactHook写法，文件是直接引入的pdf文件，也可以识别base64数据格式安装依赖：cnpminstallreact-pdf-js效果如下：importReact,{memo,useCallback,useState}from"react";//react预览pdf文件插件importPDFfrom"react-pdf-js";importpdfsfrom"/bestFirends
  • mondb入手 木zi_鸣 mongodb
    windows 启动mongodb  编写bat文件， mongod --dbpath D:\software\MongoDBDATA mongod --help  查询各种配置 配置在mongob 打开批处理，即可启动，27017原生端口，shell操作监控端口  扩展28017，web端操作端口 启动配置文件配置， 数据更灵活 
  • 大型高并发高负载网站的系统架构 bijian1013 高并发负载均衡
            扩展Web应用程序 一.概念         简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：         1.
  • DISPLAY变量和xhost(原创) czmmiao display
    DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
  • 获取B/S客户端IP 周凡杨 java编程jspWeb浏览器
       最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：    String ip = InetAddress.getLocalHost().getHostAddress(); 然而对于WEB
  • 浅谈类和对象 朱辉辉33 编程
        类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的， 占用存储空间。     类是由属性和方法构成的，基本格式是public  class 类名{ //定义属性 private/public 数据类型 属性名； //定义方法 publ
  • android activity与viewpager+fragment的生命周期问题 肆无忌惮_ viewpager
    有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。 第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。 super.onResume(); bindService(intent, conn, BIND_AUTO_CREATE);
  • base64Encode对图片进行编码 843977358 base64图片encoder
    /** * 对图片进行base64encoder编码 * * @author mrZhang * @param path * @return */ public static String encodeImage(String path) { BASE64Encoder encoder = null; byte[] b = null; I
  • Request Header简介 aigo servlet
    当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request   Header)   用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如：    
  • HttpClient4.3 创建SSL协议的HttpClient对象 alleni123 httpclient爬虫ssl
    public class HttpClientUtils { public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){ SSLContext sslContext=null; try { sslContext=new SSLContextBuilder().l
  • java取反 -右移-左移-无符号右移的探讨 百合不是茶 位运算符 位移
    取反： 在二进制中第一位，1表示符数，0表示正数 byte a = -1; 原码：10000001 反码：11111110 补码：11111111 //异或: 00000000 byte b = -2; 原码：10000010 反码：11111101 补码：11111110 //异或: 00000001
  • java多线程join的作用与用法 bijian1013 java多线程
            对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
  • Java发送http请求(get 与post方法请求) bijian1013 javaspring
    PostRequest.java package com.bijian.study; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURL
  • 【Struts2二】struts.xml中package下的action配置项默认值 bit1129 struts.xml
    在第一部份，定义了struts.xml文件，如下所示：   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts
  • 【Kafka十三】Kafka Simple Consumer bit1129 simple
    代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。 实际情况是需要将host和port绑定到一起，   package kafka.examples.lowlevel; import kafka.api.FetchRequest; import kafka.api.FetchRequestBuilder; impo
  • nodejs学习api ronin47 nodejs api
    NodeJS基础 什么是NodeJS JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。 每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum
  • java-64.寻找第N个丑数 bylijinnan java
    public class UglyNumber { /** * 64.查找第N个丑数 具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url] * 题目：我们把只包含因子 2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14
  • 二维数组（矩阵）对角线输出 bylijinnan 二维数组
    /** 二维数组 对角线输出 两个方向 例如对于数组： { 1, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 }, { 13, 14, 15, 16 }, slash方向输出： 1 5 2 9 6 3 13 10 7 4 14 11 8 15 12 16 backslash输出： 4 3
  • [JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新) comsci 工作流
       既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理    大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
  • redis常见使用 cuityang redis常见使用
    redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets 引入jar包 jedis-2.1.0.jar  (本文下方提供下载) package redistest; import redis.clients.jedis.Jedis; public class Listtest
  • 配置多个redis dalan_123 redis
    配置多个redis客户端 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi=&quo
  • attrib命令 dcj3sjt126com attr
      attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.    只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.    存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件. 
  • Yii使用公共函数 dcj3sjt126com yii
    在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：   <?php /**   * This is the shortcut to D
  • linux 系统资源的查看（free、uname、uptime、netstat） eksliang netstatlinux unamelinux uptimelinux free
    linux 系统资源的查看 转载请出自出处：http://eksliang.iteye.com/blog/2167081   http://eksliang.iteye.com 一、free查看内存的使用情况 语法如下：   free [-b][-k][-m][-g] [-t] 参数含义 -b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m
  • JAVA的位操作符 greemranqq 位运算JAVA位移<<>>>
    最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。   1.按位操作符 ：    按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。    与（&）运算：    1&1 = 1, 1&0 = 0, 0&0 &
  • Web前段学习网站 ihuning Web
      Web前段学习网站 菜鸟学习：http://www.w3cschool.cc/   JQuery中文网：http://www.jquerycn.cn/   内存溢出：http://outofmemory.cn/#csdn.blog   http://www.icoolxue.com/   http://www.jikexue
  • 强强联合：FluxBB 作者加盟 Flarum justjavac r
    原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，
  • java统计在线人数（session存储信息的） macroli javaWeb
    这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！   由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！ 我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。 1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。 public class Ses
  • bootstrp carousel初体验 快速构建图片播放 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    img{ border: 1px solid white; box-shadow: 2px 2px 12px #333; _width: expression(this.width > 600 ? "600px" : this.width + "px"); _height: expression(this.width &
  • SparkSQL读取HBase数据，通过自定义外部数据源 superlxw1234 sparksparksqlsparksql读取hbasesparksql外部数据源
    关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源     前面文章介绍了SparSQL通过Hive操作HBase表。   SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访
  • Spring Boot 1.3.0.M1发布 wiselyman spring boot
        Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：   1.提供一个新的sprin
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他