知识要点实现原理：1.点击楼层跳相应楼层，用的是锚点定位电梯：<a href="#item2">2F 个护家清</a></li>列表title：<div class="floor-title" id="item2"></div>这个没什么好说的2.当点击楼层跳到相应楼层时，该楼层高亮显示我们的脚本主要就是实现这个功能。原理获取浏览器导航条下拉的距离与各个楼层相对于文档顶部下拉的距离进行校验。这里需要用到的方法事件：window.onscroll=function(){ } //浏览器滚动监听事件执行函数 .sc...
本文实例为大家分享了js遮罩效果弹出界面的具体代码，供大家参考，具体内容如下<head><meta charset="UTF-8"><title>遮罩</title><style>* {margin: 0;padding: 0;}#shade{position: fixed;width: 100%;height: 100%;display: none;}.shade-background{width: 100%;height: 100%;background-color: #CCCCCC;opacity: 0.5;}#register{position: relative;background-color: #fff;width: 500px;height: 300px;top: -70%;margin: 0 au...
以前用JQuery写过一个纵深方向上的图片旋转效果，在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的：其实现原理并不复杂，在数学上只用到了其中的正弦函数，制作过程大致如下：（1）先定义好图片旋转的半径（2）图片旋转的过程需要用到setInterval()方法，来获取每一张图片所在位置的的角度，角度会根据时间变化逐渐变化（3）根据一个数学公式：x=R*SIN(deg)可以获得图片在X方向的位置（4）透明度的设置其实也是根据图片旋转...
本文实例讲述了jQuery实现可以控制图片旋转角度效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：<!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><title></title><script src="jquery-1.7.1.min.js" type="text/javascript"></script><style type="text/css" >img { mar...
最近遇到一个小小的问题，就是有时候我们使用单选radio的时候，会发现当我们选中一个之后，再也无法一个都不选了，即选中后没有取消的功能，此时便想到了功能强大的checkbox，但他是多选，怎么才能让他变成单选，效果跟radio一样呢，本菜鸟就自己写了个小程序，代码很简单，只有四行。 废话不多说，直接代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...
简要教程这是一款基于jquery ui的可自由拖拽的弹性圆形菜单效果。该圆形菜单可以通过点击一个圆形按钮来弹出4个子菜单按钮。弹性效果由anime.js来制作，效果非常炫酷。 使用方法在页面中引入jquery和jqueryui文件，以及anime.js和需要的样式文件style.css。<link rel="stylesheet" href="css/style.css"> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery-ui.min.js"></script> <script src="path/to/a...
简要教程这是一款带视觉差效果的jquery响应式轮播图特效。该jquery轮播图的特点是可以使用鼠标拖拽进行切换，每个图片中都带有一个炫酷的透明字母。轮播图滑动时带有视觉差效果。使用方法在页面中引入jquery、main.js，以及轮播图的样式文件style.css。<link rel="stylesheet" href="css/style.css"> <script src="path/to/jquery.min.js" type="text/javascript"></script> <script src="js/main.js"></script>HTML结构该jquery轮...
本文实例讲述了javascript实现的左右无缝滚动效果。分享给大家供大家参考，具体如下：今天介绍的是几张图片一起进行无缝滚动，这是一个常用的 js 效果。<!DOCTYPE HTML> <html> <head><meta charset="UTF-8"><title>无缝滚动——左右</title><link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/><style type="text/css">#scroll{width:698px;height:108px;margin:50px auto 0;position:relative;overflow...
本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考，具体如下：前面介绍了JS左右无缝滚动效果，现在做下无缝滚动——上下的效果。其他代码和左右的差不多，只是改变的是 offsetTop 的值，并且不需要计算 ul 整体的宽度了。<!DOCTYPE HTML> <html> <head><meta charset="UTF-8"><title>无缝滚动——上下</title><style type="text/css">*{margin:0;padding:0;}li{list-style:none;}img{border:0;}#scroll{widt...
本文实例讲述了javascript实现图片左右滚动效果。分享给大家供大家参考，具体如下：html代码：<!doctype html> <html> <head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="renderer" content="webkit"/><meta name="keywords" content=""/><meta name="description" content=""/><title>图片滚动</title><style>*{margin:0;padding:0;}ul{list-style:none;}img{border:0;...
本文实例为大家分享了js图片轮播效果的具体代码，供大家参考，具体内容如下<head><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>大图轮播</title><style type="text/css">* {margin: 0px;padding: 0px;}#container {width: 500px;height: 300px;/*border: 1px solid black;*/position: relative;overflow: hidden;}.btn {height: 100%;width: 30px;/*border: 1px solid red;*/position: abs...
先瞄一眼js轮播效果图代码：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content {width:400px;height:500px;margin:10px auto;position:relative;border:1px solid #000;color:red;font-size:20px;} #title, #bottom{position:absolute;width:400px;height:30px;line-height:30px;text-align:center;font-size:20px;background:#f1f1f1;} #bottom{bot...
Jquery实现简单的滚动刷新效果： 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果HTML正文：<form id="form1" runat="server"> <div style="height: 3000px; background-color: yellow;"> </div> </form>Javascript操作代码：$(document).ready(function() {$(window).scroll(function() { //$(document).scrollTop() 获取垂直滚动的距离:最小值为0，最大值：文档高度-可视化窗口高度 //$(document).scrollLeft...
前言：前天刚写了篇JS组件Bootstrap Table表格行拖拽效果，今天接到新的需要，需要在之前表格行拖拽的基础上能够同时拖拽选中的多行。用了半天时间研究了下，效果是出来了，但是感觉不尽如人意。先把它分享出来，以后想到更好的办法再优化吧。一、效果展示1、拖动前2、拖动中3、拖动后4、撤销回到拖动前状态二、需求分析通过上篇我们知道，如果要实现拖拽，必须要有一个可以拖拽的标签，或者叫容器，比如上篇里面的tr就是一个拖拽的...
一、业务需求及实现效果项目涉及到订单模块，那天突然接到一个需求，说是两种不同状态的订单之间要实现插单的效果，页面上呈现方式是：左右两个Table，左边Table里面是状态为1的订单，右边Table里面是状态为2订单，左边Table里面的行数据拖动到右边Table里面指定行的位置，拖动完成后，左边表格减少一行，右边表格增加一行。除此之外，还需要撤销操作(相当于Ctrl + Z操作)，能够返回到上一步的状态。可能描述会让大家模拟两可，反正...