抽出www.templatemonster.com的鼠标悬停加载大图模板的代码

<html>
<head>
    <!--调用css调整显示层的属性-->
    <link rel="stylesheet" href="lightBox.css" type="text/css">
    <link rel="stylesheet" href="lightStyle.css" type="text/css">
    <!--调用JS-->
    <script src="preview_templates.js" language="JavaScript" type="text/javascript"></script>
    <script src="loader.js" language="JavaScript" type="text/javascript"></script>
</head>

<!--注意body的onload属性设置-->
<body  onload="nbInit()">

<br><br>
<h1>  <a href="http://www.kecola.com/" title="可酷啦·首页" target="_blank"><u>可酷啦·www.kecola.com</u></a> --- 倾情提供</h1>
<h2>  抽出www.templatemonster.com的鼠标悬停加载大图模板的代码</h2>

<!--演示图片开始-->
      <a style="cursor: hand" href="http://www.kecola.com/template/templateUrl.asp?id=0048" target="_blank"><IMG SRC="http://www.kecola.com/template/templatePic/kecolaTemplate0048.gif" alt='Template 0048' border='1' onmouseover="showtrail('http://www.kecola.com/template/templatePic/kecolaTemplate0048.jpg','kecolaTemplate 0048',430,437)" onmouseout="hidetrail()"></a>

<!--这里为了让页面长度大于一页-->
    <br><br><h3>  在blueidea的论坛连续发了三个帖子，等了三天也没有得到解决，经过努力，终于把这个代码剥离出来，虽然在打开的时候会有JS错误提示，但在使用中完全不影响。
    <br>  在这里分享给大家，一起进步！
    <br><br><br>  叶枫    2007/07/11 15:08:00</h3>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!--显示层的位置-->
    <div style="display: none; position: absolute;z-index:110; " id="preview_div"></div>

</body>
</html>

打包文件下载

赞 (0)

相关推荐

  • javascript实现的鼠标悬停时动态翻滚的导航条

    动态翻滚的导航条 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(http://files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{

  • hover的用法及live的用法介绍(鼠标悬停效果)

    复制代码 代码如下: // live主要用于对动态加载出来的元素绑定事件 // 产品目录 $(".lm_div_q dd").live({ mouseenter: function() { $(this).find("strong").addClass("tj_strong"); $(this).find("strong").next().slideDown(200); // 显示下拉框 }, mouseleave: func

  • 分享33个jQuery与CSS3实现的绚丽鼠标悬停效果

    分享33个jQuery与CSS3实现的绚丽鼠标悬停效果

    Animated Opening Type(教程) 漂亮的文字翻开效果,很有意思. 查看演示 Direction-Aware Hover Effect With Css3 And Jquery(教程) 鼠标跟随悬停效果教程,话说以前看到这个很流行呢. 查看演示 Css3 Hover Effects With Websymbols Tutorial(教程) 查看演示 Magnifying Glass For Image Zoom Using Jquery And CSS3 通过Jquery 和 C

  • 一个简单的JS鼠标悬停特效具体方法

    首先,需加载jquery库(略过). 其次,将下面 Javascript代码加到页面的头部:  复制代码 代码如下: <script type='text/javascript'>    jQuery(document).ready(function($){    $('a').hover(function()    {    $(this).stop().animate({'left': '5px'}, 'fast');    }, function() {    $(this).stop(

  • jQuery实现列表自动循环滚动鼠标悬停时停止滚动

    jQuery实现列表自动循环滚动鼠标悬停时停止滚动

    需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图:  上干货 html: 复制代码 代码如下: <div id="news"> <ul> <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> <li><a h

  • 网页中移动的广告效果 鼠标悬停

    网页中移动的广告效果 鼠标悬停

    //init cookie function setCookie() { var FromUrl=window.location.toString(); FromUrl=FromUrl.replace("http://",""); FromUrl=FromUrl.replace("www.",""); FromUrl=FromUrl.substring(0,FromUrl.indexOf("/")); va

  • jQuery当鼠标悬停时放大图片的效果实例

    jQuery当鼠标悬停时放大图片的效果实例

    这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7">  <LI sizcach

  • CSS鼠标悬停菜单 图片交换技术实现

    实际上,这里的图片在正常使用时完全可以用CSS代码来定义. 使用图片交换技术制作CSS鼠标悬停菜单 div#spritemenu { height: 50px; width: 400px; font-size: 9px; background-image: url(http://files.jb51.net/demoimg/200911/spritemenu.gif); overflow: hidden; } div#spritemenu ul li { display: inline; mar

  • 抽出www.templatemonster.com的鼠标悬停加载大图模板的代码

    <html> <head>     <!--调用css调整显示层的属性-->     <link rel="stylesheet" href="lightBox.css" type="text/css">     <link rel="stylesheet" href="lightStyle.css" type="text/css"&

  • vue 使用鼠标滚动加载数据的例子

    关于用鼠标滚动到某个位置我们就去加载数据,这样的场景与业务需求现在越来越常见,现在来分析下<vue.js 实战>中作者的一个解决策略: 1. 设置一个标志位用来判断数据是否在加载中 2. 将滚动区域设置成 overfow:auto(显示滚动条) 3. 给滚动区域加入监听事件并绑定ref属性 来获取DOM实例 4. 当鼠标滚动到底部时,加载数据 4.1 如果此时 标志位为true则 直接退出,不进行此时数据加载 关键代码如下: <template> //...代码省略 //该div

  • 浅谈selenium如何应对网页内容需要鼠标滚动加载的问题

    相信大家在selenium爬取网页的时候都遇到过这样的问题:就是网页内容需要用鼠标滚动加载剩余内容,而不是一次全部加载出网页的全部内容,这个时候如果要模拟翻页的时候就必须加载出全部的内容,不然定位元素会找不到,出现报错. 这里提供两种方法供大家参考 一,通过selenium模拟浏览器,然后设置浏览器高度足够长,最后延时使之能够将页面的内容都能够加载出来 import time from selenium import webdriver driver = webdriver.Firefox()

  • vue loadmore组件上拉加载更多功能示例代码

    最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d

  • php+jquery+html实现点击不刷新加载更多的实例代码

    基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页.其实就是Ajax分页效果. HTML 首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参

  • 异步加载JS、CSS代码（推荐）

    我的风格你懂得,具体详情介绍如下 关键代码如下所示: function AsyncLoad(V_tag,V_src) { if (V_tag == "script") { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = V_src; var x = document.getElementsByTagName('script')[0]; x.pare

  • BootstrapTable加载按钮功能实例代码详解

    BootstrapTable加载按钮功能实例代码详解

    1      html <!--工具栏--> <div id="toolbar" class="btn-group"> <div style="float:left;margin-right: 10px"> <button class="btn btn-danger"onclick="openModal('add',0,'')">增加</button&g

  • Android Material加载进度条制作代码

    Android Material加载进度条制作代码

    最近看了几款APP的加载进度都是这种风格,感觉还不错,在网上找了一些资料,自己小练兵了一把: 主要运用的开源框架: /ViewPagerIndicator_library  主要就是tab页切换指示器 /ptr-lib 进度条 下载地址:https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh 一.使用方法 布局文件 <?xml version="1.0" encoding="utf-8"?>

  • Android 加载大图及多图避免程序出现OOM(OutOfMemory)异常

    Android 加载大图及多图避免程序出现OOM(OutOfMemory)异常 1.高效加载大图片 我们在编写Android程序的时候经常要用到许多图片,不同图片总是会有不同的形状.不同的大小,但在大多数情况下,这些图片都会大于我们程序所需要的大小.比如说系统图片库里展示的图片大都是用手机摄像头拍出来的,这些图片的分辨率会比我们手机屏幕的分辨率高得多.大家应该知道,我们编写的应用程序都是有一定内存限制的,程序占用了过高的内存就容易出现OOM(OutOfMemory)异常.我们可以通过下面的代码看

  • ListView实现下拉刷新加载更多的实例代码(直接拿来用)

    ListView Api bixu 好好看看 mNewsAdapter.notifyDataSetChanged();//刷新ListView 自定义的RefreashListView package com.itguang.dell_pc.myapplication.view; import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; import and

随机推荐