网页制作用JavaScript实现不同风格的图片切换效果

news/2024/10/22 11:40:11/
1.资源下载
    首先需要下载一个myFocus库(资源包),里面包含数种不同风格的实现效果。
   下载地址:http://download.csdn.net/detail/antaomen/9704831
2.引入myFocus库,找到存放的位置
myfocus-2.0.1.min.js存放在js文件夹中
    
    <script type="text/javascript" src="文件路径/myfocus-2.0.1.min.js"></script>
3.设置效果
在my-pattern中有各种效果的css,可以直接修改pattern属性值来更换效果
   
<script type="text/javascript">
myFocus.set({
id:'banner',//焦点图div的id
pattern:'mF_name',//风格应用的名称
time:3,//切换时间间隔(秒)
trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
width:450,//设置图片区域宽度(像素)
height:296,//设置图片区域高度(像素)
txtHeight:'default'//文字层高度设置(像素),'default'为默认高度,0为隐藏
});
</script>
set方法中前两行即可修改效果,后面的可以省去。
4.设置div
注意要使用列表形式存放图片
    
<div id="banner" style="visibility:hidden"><!--焦点图div-->
<div class="loading"><span>请稍候...</span></div><!--载入画面(可删除)-->
<ul class="pic"><!--内容列表-->
<li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>
<li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>
<li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>
<li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>
<li><a href="#"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
</ul>
</div>
  • thumb=图片的略缩图地址(需要风格支持,可以省略,如果省略即把大图地址作为它的地址);
  • alt=图片的描述文字;
  • text=图片更详细的描述文字(需要风格支持,可以省略)


  myFocus属性的API文档
  • id

    焦点图盒子ID[string(字符串)],无默认值,必填项

  • pattern

    风格应用名称[string(字符串)],默认值:'mF_fscreen_tb'

  • time

    切换时间间隔[num(数字,单位秒)],默认值:4

  • width

    图片区域宽度[num(数字,单位像素)],无默认值,留空则从CSS样式获取大小

  • height

    图片区域高度[num(数字,单位像素)],无默认值,留空则从CSS样式获取大小

  • txtHeight

    文字层高度['default'(默认高度)|0(隐藏)|num(数字,单位像素)],默认值:'default'

  • trigger

    触发切换模式['click'(鼠标点击)|'mouseover'(鼠标悬停)],默认值:'click'

  • wrap

    是否保留边框(有的话)[true|false],默认值:true

  • auto

    是否自动播放[true|false],默认值:true

  • index

    开始显示的图片序号(从0算起)[num(数字)],默认值:0

  • delay

    触发切换模式中'mouseover'模式下的切换延迟[num(数字,单位毫秒)],默认值:100

  • css

    是否需要程序定义CSS[true|false],默认值:true

  • waiting(1.2.0新增)

    Loading画面的最长等待时间(即从开始载入--图片加载完--开始播放之间的等待时限,如果超过这个时限,即使图片没加载完都一律播放)[true(一直等待,直到所有焦点图片全部加载完)|false(完全不等待,直接播放)|num(时限,单位秒)],默认值:20

  • path(1.2.0新增)

    风格应用文件的目录路径[string(字符串)],默认值:'http://www.chhua.com/myfocus/js/pattern/'。注意此路径是指向风格文件父目录而不是某个风格文件,例如mF_slide3D这款风格文件在pattern文件夹目录下,那么path应该为'pattern/'。

  • autoZoom(1.2.1新增)

    是否允许图片按比例缩小并居中以适应图片区域大小(注意:某些风格可能不支持)[true|false],默认值:false。


    来源: http://www.chhua.com/myfocus/api.html

http://www.ppmy.cn/news/561995.html

相关文章

爬虫初识之BeautifulSoup库的使用-爬取某图片站的image

知识背景&#xff1a; beautifulsoup&#xff1a;是一款非常强大的工具&#xff0c;爬虫利器。“美味的汤&#xff0c;绿色的浓汤”。一个灵活又方便的网页解析库&#xff0c;处理高效&#xff0c;支持多种解析器。 利用它就不用编写正则表达式也能方便的实现网页信息的抓取。 …

python多张图叠加为一张_Python PIL实现图片重叠

入学前学校有个作业,想想可以搞点啥呢 于是就想着可以用PIL模块,把学校的风景和某些元素叠加起来 于是在网上搜寻了一些资料,看到的都是烂七八糟的,以及从其他地方COPY下来的 于是自己就找到了PIL模块的手册搞起来 图1 11.jpg 图2 22.jpg 这个程序的功能是实现两张图…

python图像识别之图片相似度计算

作者 | a1131825850疯子 来源 | Python爬虫scrapy 1.背景 要识别两张图片是否相似&#xff0c;首先我们可能会区分这两张图是人物照&#xff0c;还是风景照等…对应的风景照是蓝天还是大海…做一系列的分类。 从机器学习的的角度来说&#xff0c;首先要提取图片的特征&#…

职教云计算机考试上传图片,2017全国计算机等级考试报名关于上传图片须知

2017全国计算机等级考试报名关于上传图片须知 每年都会有部分考生由于对报考流程的不了解&#xff0c;造成报名失败&#xff0c;而图片上传不当是大家报名失败的最大原因。下面小编为大家整理了2017全国计算机等级考试报名关于上传图片须知&#xff0c;希望能帮到大家&#xff…

android 4.4 获取图片主色调,Android Lollipop:使用Palette抽取图片主色调

使用Palette抽取Bitmap主色调 关于Palette 一些Support库随着Android Lollipop的发布而诞生了,其中就有Palette。这个库可以让你很轻松地从一幅图中抽取特征颜色,这在你希望界面的颜色风格适应指定图片时非常有用,它还会提供与指定颜色相搭配的字体颜色。 Palette顾名思义调…

python识别图片中数字_Python Opencv识别两张相似图片

在网上看到python做图像识别的相关文章后&#xff0c;真心感觉python的功能实在太强大&#xff0c;因此将这些文章总结一下&#xff0c;建立一下自己的知识体系。 当然了&#xff0c;图像识别这个话题作为计算机科学的一个分支&#xff0c;不可能就在本文简单几句就说清&#…

python批量下载图片用多线程_简单使用python多进程并发下载大量图片

如果有大量图片想要下载&#xff0c;肯定希望速度越快越好&#xff0c;那么就要使用多任务。 python支持多线程和多进程。但是解释器中的GIL锁导致任何Python线程执行前&#xff0c;必须先获得GIL锁&#xff0c;然后&#xff0c;每执行100条字节码&#xff0c;解释器就自动释放…

python 使用 requests 库爬取百度图片脚本

# coding utf-8"""爬取百度壁纸图片 """/* 优秀开源电商系统学习地址&#xff1a;http://github.crmeb.net/u/fei */import requests,re,time,warnings,os warnings.filterwarnings("ignore")def search(key_word):# 百度获取风景壁纸…